Zeekit Switch Model 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 Switch Models is an eCommerce tool that enables online fashion shoppers to switch the model they see on a brand's Product Display Page (PDP).

Within the PDP, on top of the product photo, a button is placed with a CTA encouraging users to "switch the model" they see, once clicked users can filter between countless models to find the one that best represents themselves.

The Switch Model is a streamlined experience that does not disrupt the purchasing flow but provides more information and help shoppers get a clear vision of what the garment will look like on them, thus hopefully, reduce returns.
 

Collaborators: Designer: Itamar Shamrik // Product Manager: Tal Brayer // Creative Director & Co-Product Manager: Joe Grinbaum

Artboard – 1@2x.png

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

USER FLOW

Artboard – 1@2x.png

WIRE FRAME

iPhone X-XS-11 Pro – 25@2x.png
iPhone X-XS-11 Pro – 36@2x.png
iPhone X-XS-11 Pro – 65@2x.png
Fair – 2@2x.png
iPhone X-XS-11 Pro – 59@2x.png
iPhone X-XS-11 Pro – 53@2x.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

FINAL UI

Entrance Point

The Switch Model is a dynamic button that is displayed in an eCommerce PDP (Product Display Page) on top of the product image.

Clicking the button opens the Zeekit Switch Model experience in an iFrame.

Zeekit Switch Model UX/UI by Joe Grinbau

Onboarding - Select your Model

In the model selection carousel, the users view a narrowed-down verity of models (3-5) that match their description of themselves. 

They have information about the models such as their name, height, and what size they usually wear. If they wish, they can get more information about the model like their measurements and inseam size.

Onboarding - Describe Yourself

Once clicked, the users start a quick onboarding process where they can describe themselves, the users can list their size, height and skin tone before moving on to the next screen.

Meet your New Model

After selecting the model that represents them the user can see additional poses of said model, zoom in and get a better idea of what the product will look like on them.

The New Normal

Once the users have chosen their model, they won't go through the onboarding process again and the selected model will accompany them on all the other PDPs on the site.

Fully Customizable 

The Switch Model was designed to be easily customized to match any brand’s style. Changing colors, fonts and some of the shapes in the interface will make the solutions fit seamlessly into any online store.

Farfetch Swith Model.png
TH Switch Model.png
Web 1920 – 8@2x.png
Web 1920 – 9@2x.png
Web 1920 – 10@2x.png

Desktop UI

Web 1920 – 11@2x.png
Web 1920 – 13@2x.png
Web 1920 – 14@2x.png