Redesigning Virtual Makeup

Refreshing Sephora's virtual makeup try-on experience.

Challenge

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.

CLIENT
Sephora

AGENCY
Hero Digital

ROLE
UX Lead

Process

UX

Simplify the experience without compromising discoverability and the robust set of features

Assess the current experience and optimize the user journey
Research AR marketplace for trends and inspiration

Design

Extend the current design system to accommodate new features and flows

Create alongside the AR development vendor, Modiface
Develop specs based on functional requirements

Assessing the Current App Experience

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.

Assessing the Current Paths

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.

Creating Micro-Moments

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.

Sephora Micro-Moments

I-Want-to-Capture Moments

Taking and editing photos, capturing snapshots and saving for future reference and purchase.

I-Want-to-Play Moments

Applying looks and mixing & matching products to help validate “is this right for me.”

I-Want-to-Grow Moments

Learning from the community, artists, and friends & inspired by unique ways of using the product.

Applying Micro-Moments

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.

The Snapchat Experience

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.

Competitive Audit

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.

User Journey

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.

Pushing the Simplification Even More

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.

Organizing the Whole Experience

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.

Design

Worked alongside designers to iterate on the wireframes into both iOS and Android screens across mobile and tablet dimensions.

Modiface

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.