Zeekit Mix&Match 2019-2020

B2B2C business solution for eCommerce sites

UX/UI Design, Creative Direction, Product Management  
20818656.png
AR (Augmented Reality) based
Untitled-1.jpg

BACKGROUND

Zeekit's Mix&Match experience designed to allow users to play dress-up in a fun and interactive way while trying on different combinations to eventually style a complete outfit.

The Mix&Match can contain preset collections or individual items meant to “Complete the Look”, and create a gamification version for the common activity of online shopping.

Mix&Match is an engaging and playful experience, designed with the goal of boost up-sells and cross-sells by driving shoppers to purchase an entire outfit.
 

Collaborators: Designer: Adam Einfeld // Creative Director & Product Manager: Joe Grinbaum

all-togheter.png

These models did not wear these products in real life, this is all virtually simulated.

USER FLOW

Artboard – 1@2x.png

WIRE FRAME

Zeekit Mix&Match Wireframe (2).png
Zeekit Mix&Match Wireframe (3).png
Zeekit Mix&Match Wireframe (4).png
Zeekit Mix&Match Wireframe (5).png

UI ELEMENTS

COLOR SCHEAME

TYPOGRAPHY

HEADERS | DIDOT LT PRO
WEIGHTS IN USE
LETTER SPACING
The quick brown fox jumps over the lazy dog
Desktop | Roman 
Web | font-family: linotype-didot, serif;
font-style: normal;
font-weight: 400;
LOWERCASE
0px
Artboard – 1@2x.png
HEADERS | DIDOT LT PRO
WEIGHTS IN USE
LETTER SPACING
The quick brown fox jumps over the lazy dog
Desktop | Book, Medium & Bold 
Web | font-family: futura-pt, sans-serif;
font-style: normal;
Book font-weight: 400;
Medium font-weight: 500;
Bold font-weight: 700;

LOWERCASE
1px

UPPERCASE
2px

Artboard – 2@2x.png
HEADERS | DIDOT LT PRO
WEIGHTS IN USE
LETTER SPACING
The quick brown fox jumps over the lazy dog
Desktop | Regular
Web | font-family: Quentin, serif;
font-style: normal;
font-weight: 400;

LOWERCASE
1px

Artboard – 3@2x.png

ICONOGRAPHY

Artboard – 6@2x.png

FINAL UI

The Mix&Match experience starts with the Model selection screen, users are presented with a large variety of models in all sizes, heights, skin tone, etc.

In the top right corner, users can filter to minimize the selection and narrow it down to the model the best represents them.

By clicking the plus button, users can access the categories menu and select which catagory dress on their model, they can even create layers with jackets and accessorize with bags.

After the users select their model they move to the Mix&Match main screen where they can start playing dress-up by swiping left and right. 

Just a single tap in the middle of the screen can open the product information so the users can click the product they wish to buy and move to said product's PDP (Product Display Page). There is also the option of removing the top layer with another click.