Improving the way customer’s browse and purchase Sephora’s products on their mobile device.

SEPHORA

  • Timeline: March - April 2021

    Platform: Mobile Device

    Tools: Adobe Illustrator, Figma

    Role: Creative Direction, User Testing, Synthesizing, Prototyping

Problem Statement

The original app excels in providing various pathways for browsing and purchasing products. However, the current product makes essential information hard to access in content-rich areas. Additionally, the poor organization and hierarchy hinder the overall user experience when finding key information.

Goals

By reorganizing the navigation bar, users can easily locate and access the tools they need without searching through unrelated options. This reduces the time and effort required to find specific features, making the experience more intuitive overall.

1. Restructed Navigation

2. Grouping

Consistent grouping of features creates a predictable user experience, which helps users quickly understand the app’s structure. Allowing users to go through the app more quickly and confidently.

By focusing on the most frequently used functions, the app can allocate resources more effectively, optimizing performance and responsiveness while browsing and purchasing a product.

3. Prioritize Frequently Used Functions

Testing

    • 50% found it hard to find information about the credit card program.

    • 37.5% felt the credit card was advertised too frequently.

    • 25% suggested the program should only be advertised on the homepage or checkout.

    • 37.5% thought the offers page was redundant or cluttered.

    • 25% found the text hard to read and nothing stood out.

    • 25% preferred having two different ways to sign up to minimize unnecessary information.

    • 37.5% questioned the purpose or necessity of the community tab.

    • 25% appreciated the community tab but would not personally use it.

    • 37.5% had difficulty with the color descriptions being too small or hard to determine.

    • 37.5% appreciated the colorful icons and badges for filtering.

    • 12.5% found the color filtering feature helpful when looking through foundations.

    • 50% found reviews too hard to find.

    • 37.5% relied heavily on reviews and suggested they should be more visible.

    • 12.5% suggested combining reviews with questions/answers for better visibility.

    • 37.5% were deterred by the need to sign up early in the process.

    • 25% skipped signing up initially but had to sign up to purchase products.

    • 25% did not have an account and had to sign up, which they found inconvenient.

    • 25% preferred having two different ways to sign up to minimize unnecessary information.

We asked 8 users to use the original app to browse, select a product to purchase, and go through the purchasing process without completing the purchase. Our users included both frequent brick-and-mortar store shoppers and those who had never shopped at Sephora before.

After gathering their feedback, we identified 6 key areas for improvement in the original app, based on feedback from eight participants.

VERSION 1

With this feedback in mind, we simplified the Sephora app credit card information display, improved color descriptions, and made reviews more accessible. We enhanced the visibility of filtering options and simplified the home page layout to reduce clutter and improve overall user experience.

Low Fidelity

High Fidelity

After gathering their feedback, we identified several key areas for improvement in Version 1, based on feedback from eight participants. Overall, The Version 1 User Testing highlighted several positive findings for the Sephora app. Users appreciated the color carousel for its ease of use and functionality. The clean checkout process was praised for its simplicity. The visibility of the Sephora VIB program on the homepage received positive feedback.

Final Version

The final version of the Sephora app introduces several improvements based on user feedback. The home screen now prominently features VIB program information and current deals, making them more visible. The shop section is organized into clear categories, making it easier to browse products. Users can now filter through different categories in the makeup section, enhancing navigation. Product pages now include enlarged photos, detailed information, and accessible reviews to improve decision-making. The checkout process has been streamlined with options for shipping and samples, enhancing the overall user experience. The cart and checkout pages provide a clear overview of products, shipping options, and payment methods, ensuring a seamless purchasing process.

Before

After

Before

After

Before

After

What I Learned

Throughout this project, we faced several obstacles, including difficulty finding information about the Sephora credit card, numerous credit card promotions, a cluttered and hard-to-read offers page, ambiguity around the community tab's purpose, unclear color filtering descriptions, and hidden reviews. To address these issues, we improved app navigation and strategically placed promotional content, enhanced the design of the offers page, clarified color labeling, increased the visibility of reviews, and revamped the brand identity. These changes have significantly improved the overall user experience.

Our future steps involve undergoing additional rounds of revisions and refining the app's design based on user feedback. We will also continue to improve performance and reliability, as well as update the app to meet evolving user needs.