tear.jpg
Fanta Logo.png

Fanta x Fandom

Grab A Thing On The

Way To The Thing

Role

UI/Visual Design

UX Design

Web Design

Tools

Adobe XD

Adobe Illustrator

Adobe Photoshop

The Fanta x Fandom partnership had the unique idea of creating an interactive microsite that would house a digital mosaic containing art pieces aligning with four Fanta flavor stories. 

 

Within the microsite, fans all over the world would get the opportunity to participate by creating their own personalized tile art that would contribute to the overall mosaic and experience.

LANDING-HOME-2@2x.png
Fanta_FEATop3.gif
iPhone X-XS – 1@2x.png
iPhone X-XS – 8@2x.png
iPhone X-XS – 9@2x.png

Creating The User Flow

We collaborated with both the Fandom and Fanta team as well as our in-house development team to come up with a user flow that would fit the needs of Fanta’s idea, fit our dev team’s timeline, and allow for a simple and fun user experience.

Fanta UserFlow 03 (Final)@2x.jpg

Creating The Wireframes

After finalizing the user flow, we quickly jumped onto designing the wireframes for this microsite.

Fanta_wireframes.png

Creating The Microsite

We wanted this microsite to focus on and celebrate Fanta’s brand as well as pop-culture that embody the four Fanta flavors as seen in the mosaic.

 

Firstly, we designed the general pages to be orange heavy, as it is Fanta’s main and original color/drink. Then we decided to design each “customizable tile” journey according to the flavor the user chooses.

LANDING-HOME-2@2x.png
Create_-_STEP_1_–_Strawberry@2x.png
Create - STEP 2 – Grape – SOLID@2x.png
MOSAIC -ARCHIVED 1@2x.png
CREATE - Popup-1@2x.png
LANDING-HOME-1@2x.png
LANDING-HOME@2x.png
Create - STEP 2 – Grape – PATTERN@2x.png
LANDING-HOME_–_Strawberry@2x.png
Create - STEP 2 – Grape – TEXTURE@2x.png
Create - STEP 1 – Pineapple@2x.png
Fanta_mobile33.png

Creating Email Banner Assets

Along with the microsite design and development, our team also worked on designing email banner assets for social marketing purposes.

Banner v1_2x@2x.png
Banner v3_2x@2x.png
Banner v2_2x@2x.png
Banner 1@2x.png
Email Template 1@2x.png