Sephora is one of the biggest cosmetic marketplace brands in the world. They feature thousands of products from more than 300+ of brands, along with its own private label. Sephora offers beauty products including cosmetics, skincare, body, fragrance, nail color, beauty tools, and haircare. As part of the native Sephora app experience, customers can try on various brands and products through augmented reality, all from the convenience of their phone.
Sephora had previously iterated on the Sephora Virtual Artist experience five times, each adding more and more features. After the latest iteration, the product had become extremely cluttered and bloated, struggling to find room for additional features and optimizing performance.
Simplify the experience without compromising discoverability and the robust set of features
Extend the current design system to accommodate new features and flows
During the assessment of the app, there was a tremendous amount of content packed on every screen of the Virtual Artist experience. Five iterations later, the original layout had not been modified and had already outgrown itself. There was no room for additional features.
The cluttered touchpoints had also adversely affected its performance. Users would immediately bounce or would leave after a short session. In addition, there were commerce controls stickied within the native Sephora app (cart, product details) that added additional touchpoints to almost every screen of the Virtual Artist experience.
But the Virtual Artist homepage was the complete opposite. There was very little value and information provided. As users continued onto the next page, the simple page turned quickly into a complex feature map with over 25+ touchpoints.
After developing flows for all of the current screens and options, we can see that the navigation is extremely complex. Many things stood out, including surfacing up the core functions and consolidating repetitive touchpoints.
As part of the exercise of simplifying the app experience, first had to take a step back and assess the user's browsing habits. Based on research findings, consumers on average checked their phones 150 times a day for a total of 300 minutes. Based on that insight, consumers are spending 2 minutes per session on their phones. In 2 minutes, for consumers to be able to complete a task, apps must be hyper-vigilant and create goal-based pathways that are extremely clear and straightforward.
One of the strategies proposed by Google, is to shape the product experience based on micro-moments - moments of a consumer's life when they reflexively turn to a device to act on a need to learn something, do something, discover something, watch something, or buy something.
Micro-moments are intent-rich moments when decisions are made and preferences shaped.
Taking and editing photos, capturing snapshots and saving for future reference and purchase.
Applying looks and mixing & matching products to help validate “is this right for me.”
Learning from the community, artists, and friends & inspired by unique ways of using the product.
And as we applied the concept of micro-moments onto the previous iteration, we can quickly identify various the touchpoints and see how confusing the app experience was. Consumers could not address their core needs on all of the pages and had to jump from side to side, up and down, to address their needs.
And as an example, we audited Snapchat's experience to better understand their success (before they broke their design). We can see that their micro-moments are evenly balanced and the homepage provides easy access to funnel and fulfill the consumer intent. Consumers have 2 minutes per session and if brands can complete a "moment", the consumer is hooked and behavior loops are established.
Assessed various competitors working on augmented reality experiences ranging from chat applications (Snap, Instagram) to beauty (Meitu Plus, Camera 360) to photo manipulation (Adobe Photoshop) for inspiration on how to design our pages and navigation paradigm. Many beauty applications had an unbelievable collection of features including adding makeup, whitening skin, adding costumes, and modifying facial structures with intricate yet intuitive nested navigation panels.
As part of the simplification, developing first an extremely clear flow between the pages based on the proposed micro-moments.
Introduced a dashboard that integrates dynamic modules that recommend products, tutorials, and various "looks" - a collection of beauty products curated by Sephora to try on with a single click. Users can also save their own custom looks into their profile for future reference.
The camera page aggregates all of the various pages that require the camera feature of the phone and utilizes stacks of navigation panels that can be expanded or collapsed based on the intended use.
Continued to push the concept of hyper-simplification by continuing to reducing the overall number of touchpoints across the experience. The flow through the camera pages is much more seamless and additionally, the dashboard was fleshed out with visual design to show the dynamic modules in-action.
Alongside the wireframes, a master flow document was developed to illustrate all of the numbers of touchpoints and options on a page to quantify complexities, or lack thereof, in the experience.
Worked alongside designers to iterate on the wireframes into both iOS and Android screens across mobile and tablet dimensions.
During the design phase, established a partnership alongside Sephora's AR development vendor, Modiface, to gather requirements and help develop designs. Technical specs were provided, documenting touchpoints, interactions, and animations.
Redesigining Virtual MakeupSephora
Designing Modular FrameworksAmerican Eagle Outfitters
Evolving FashionMichael Kors
Paving Digital FrontiersSirius XM
🔒 Empowering ScaleabilityNew York Life
🔒 Delivering DeliciousnessUnilever
🔒 Process VisionBed Bath & Beyond