Zeekit Mix&Match 2019-2020
B2B2C business solution for eCommerce sites
UX/UI Design, Creative Direction, Product Management
AR (Augmented Reality) based
BACKGROUND
These models did not wear these products in real life, this is all virtually simulated.
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
USER FLOW
WIRE FRAME
.png)
.png)
.png)
.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
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
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
ICONOGRAPHY
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.
