STREAMLINING THE DIGITAL EXPERIENCE OF A MULTI-BILLION DOLLAR BEAUTY GIANT
UI and Interaction Designer
_Redesign Sephora's iOS app with a more unified, visually cohesive user interface
_Optimize the front end to enable responsive UI and phone specific asset catalogues
_Establish a style guide for iOS and future use across all Sephora digital products
_Streamline app features, interactions, animations, and assets to aid in shrinking app size and to improve overall access and maneuverability of the iOS app
_2017 Webby Award for Best Shopping App
_Fast Company's Innovation By Design Award 2017
Sephora is the LVMH-owned global chain of cosmetic stores that carries over 300 brands, including its own label, in makeup, skincare, haircare, nail color, body, and fragrance. Following an impressive year of digital sales numbers, Sephora needed a digital face lift to support continued growth.
The Sephora iOS app was created in 2012 but, after years of adding new features and code, the app size was too large, the code was outdated and difficult to learn, and the interface was visually inconsistent and unresponsive. Consequently, we've seen slow loading and build times, lengthy onboarding of new developers, and disjointed digital experiences across Sephora's channels.
As the UI/Interaction designer on a team of developers, information architects, QA, UX designers, product managers, and C suite engineering and product executives, I was the primary designer and responsible for designing all of the UI and interactions in the app for all use cases, iterating prototypes based on feedback from user testing, working side-by-side with the development team to ensure correct interaction functionality and design pattern usage, and presenting prototypes to get buy-in from stakeholders on design decisions and our experience strategy vision.
The resulting iOS app became a modern shopping companion for our clients. It embedded the mobile experience into every step of the client's journey - before the shopping trip, in-store, and after. The product strategy led to 100% year-over-year revenue growth on the iOS channel. By decreasing the app load time by 3X and shrinking the app size by 50%, we also achieved a 15% increase in conversion rates.
I also created an iOS style guide to build consistency across the app and support future UI/UX development on Sephora's Android app and responsive websites. Check out the style guide here.
2017 Webby Awards - People's Voice Winner for Best Shopping App
Sephora, Walmart Top Mobile App Download Speeds
Sephora Just Revamped the Virtual Makeover with a False Lash Try-On Tool
Sephora's onboarding screens sets our clients up for a more personalized e-commerce experience by, for example, allowing account sign ins to Sephora's loyalty program, "Beauty Insider," and notifications. As the first customer touchpoint, this is where clients first see Sephora's updated fonts, buttons, and card UI.
After entering the app, clients can browse the home screen which consists of 3 tabs: a "Home" tab for main feed content and promos, a "Shop" tab for quick access to a variety of shopping categories, and a "Stores" tab for location-specific reservations and in-store guides. Timely content, promotions, and features are embedded throughout the home screen, sandwiched between carousels of featured products.
The global header on the home screen provides quick access to search functionality, an extended menu, and the shopping basket. Through our research, we found that clients use Search the most for product discoverability and repurchasing. To personalize Search, Beauty Insider clients can search products that match their skin tone and other personal color preferences which Sephora refers to as "color IQ." I used pagination and progress indicators to help a user navigate through the several levels of taxonomy while filtering.
The product page is a dedicated screen for a single product, subscription, or customizable set. Here, the default screen displays the product image, price, options, brand name, product name, and main call-to-action button. The redesign also had to account for the [hundreds of] variations of swatch types based on type of product (ex. rectangular, numerical swatches for fragrance sizes) and button types based on stock inventory.
Secondary information such as Ingredients and How To Use are paginated yet accessible from this main screen. A carousel is used to scroll through colors/variations and product SKU cards at the bottom of the product page (i.e. "Similar Products"). Clients can learn more about products by reading additional information and browsing related videos, photos, and articles. To increase the sense of community amongst Beauty Insiders, clients can also contribute to product pages by writing reviews and sharing photos and videos.
One of the main redesigned sections of the app is the Basket and Checkout flow, as this is where clients complete their purchases. Previously, the basket had no segmentation or hierarchy, making it difficult to differentiate between products in the basket, samples, promotions, and rewards. The new design uses "buckets" of information, distinguished through distinct design patterns and a button hierarchy, to separate the different parts of the basket.
After a client reviews their basket, the purchase is completed once all delivery, shipping, and payment information is submitted. To maintain visual and interactive consistency across the app, I was intentional in reusing text-based design patterns throughout the checkout flow. Upon successfully checking out, clients are met with thank you messages, a tally of their Beauty Insider points, and an opportunity to continue shopping on the order confirmation screen.
Another project that spun out of this basket and checkout redesign is the integration of Apple Pay and PayPal. Check out that project here.
Beauty Insider is Sephora's loyalty program. Clients can earn rewards in exchange for shopping. The three tiers, from lowest to highest, are Beauty Insider, VIB, and VIB Rouge.
Since rewards are directly related to shopping, we incorporated the Beauty Insider program into the app. Clients who sign in to their account have access to the Rewards Bazaar, where they can collect perks based on their number of points. A progress bar keeps track of their spending and how much is left to upgrade to the next tier. The more you shop, the more points and rewards you earn.
Clients can personalize their Sephora app experience by creating an account to track your loves, purchases, gift cards, and subscriptions. Updating the UI for creating an account, signing in, and changing your account settings called for the streamlining of existing user flows to incorporate the latest native updates, such as Touch ID.
Below are 3 samples of flows and design patterns used for signing in with Touch ID, creating an account, and cancelling a Play! By Sephora box subscription.