view full pdf here
Thanks to augmented reality, discovering your fav lipstick, blush or foundation shade online has never been easier. Virtual try-on leverages AI & AR technology allowing an online user to “try-on” a makeup product using any device equipped with a camera. With the assimilation of virtual try on to tarte.com, consumers can try on the latest and greatest products from the comfort of their home (that’s right, no beauty counter needed!)
The tarte e-comm team was challenged to bring the in-store shopping experience virtual. Our goal was to effectively incorporate Perfect Corp’s virtual try-on technology within tarte’s e-commerce shopping journey. The VTO experience should allow the user to try on and explore a range of makeup products at once. The customer should be able to pair different products together to get a full face look they love, subsequently increasing conversion across tarte.com
Competitive analysis: to determine strengths and weaknesses of current virtual try-on experiences across the beauty industry (see comprehensive analysis here).
Gather site metrics: including products with high site interaction, customer service responses, and current shade matching shortcomings.
Define project parameters including: AI AR technology limitations and code restrictions from our current e-comm platform
User journey map: translate this information into a user journey map (see below).
Once we understood the general VTO journey and the necessary functionality, I began designing low-fidelity mocks. The mockups went threw multiple design iterations, primarily changing the information hierarchy so all details sit above the fold on mobile.
After the team aligned on the low-fidelity mocks, I proceeded with high-fidelity mocks. I used existing brand guidelines for the product detail images, typography, colors, and CTA buttons.
We chose to perform user testing after completing the high fidelity mocks to ensure users could interact with the most flushed out design. I guided focus groups through a try-on scenario to determine whether users could successfully follow. Afterwards participants completed a survey and engaged in feedback through a group discussion. Below are design modifications based off of user testing findings.
See a screen recording of the design solution below or preview live on tarte.com. Also view final high fidelity prototype here.
See the virtual try-on experience for shopping custom value sets in the video below. Also available to preview live on tarte.com or to view the final high fidelity prototype here.
200% increase in sales when customers use virtual try-on
Triple digit increase in time spent on site
30% increase in add-to-bag
Double-digit reduction in customer service inquiries for help with shade matching