PRODUCT DESIGN CASE STUDY

GLOSSIER mobile retail app

Skin first. Makeup Second. Smile Always.

Glossier is a luxury skincare and makeup brand born from Into the Gloss, a website dedicated to beauty—from the inside. With their highly anticipated and limited release of products, strong branding and engagement, and minimalistic approach to skincare and beauty, Glossier disrupted the beauty industry and gained a cult following through social media. I sought to create an app that enables Glossier's diverse community of customers to have a seamless and customized mobile shopping experience


Challenge 

While Glossier has notably been discovered via [mobile] social media platforms; word of mouth; and guerilla street marketing tactics, their products can only be found online via their e-commerce website or at their New York showroom.

Glossier's products inevitably sell out soon after their social media release announcements, presenting a purchasing challenge to the even the most dedicated consumers and early adopters.

Taking into consideration their wildly successful campaigns and on-the-go discoverability, I sought to create an e-commerce app that offers more than their existing desktop and mobile site. 

GOAL

A retail app would offer users an easily accessible and quick solution to their purchasing needs. I wanted to recreate the web experience in a mobile app in order to best serve the brand's users and their needs.

 

solution

The Glossier App allows for a quick and seamless mobile e-commerce experience, matches products tailored to user needs, and continues building brand trust. 

Research and Discovery

I began this project by interviewing a diverse group of users who had experience shopping with Glossier or with beauty retail apps and asked them to share their experiences, pain points, and feedback. Through user research, I found commonalities between users: the need for an individualized, seamless shopping experience with a tool to assist in capturing and recommending products tailored to each user's unique needs. These users expressed an especially difficult time shopping for foundation or lip colors without an in-store shopping experience.

In researching competitors, I found companies that solved this constraint by using augmented reality and overlays in their e-commerce apps.

Glossier's thoughtful and creative branding provides an exciting and anticipated delivery experience, but users expressed uncertainty over what shades to select without having tried the products on. This could be a missed business opportunity! I wanted to offer the brand evangelists and potential customers a solution: a try-it-on feature that is specific to the mobile app

I developed a persona based off of user needs noted in preliminary interviews and kept her in mind throughout the process. 

The Shade Finder tool found in Honest Beauty and Sephora would meet user needs.

The Shade Finder tool found in Honest Beauty and Sephora would meet user needs.

 

Sketches and information architecture

Following preliminary interviews, I sketched rough drafts of potential app interfaces. My renderings were influenced by Glossier's existing interface design, mobile design patterns, and mobile ergonomics. The sketches were presented to the previous interview group and new users to determine discoverability and usability. With continued user research and refinement, I was able to execute an intuitive sitemap and designed two possible user flows. The sitemap and user flows contributed to higher fidelity mockups.

Wireframe sketches with lo-fi wireframe overlays from a paper prototype to organize user flow

Wireframe sketches with lo-fi wireframe overlays from a paper prototype to organize user flow

Organization of product categories for site map

Organization of product categories for site map

Glossier retail app site map

Glossier retail app site map

Glossier retail app user flows highlighting the process—from launch to checkout

Glossier retail app user flows highlighting the process—from launch to checkout

 

wireframing and testing

Supported by user research, research refinement, the site map, and primary user flows, I created wireframes based off of my sketches in Axure.

Annotated wireframes Tools used: Axure, Keynote

Annotated wireframes

Tools used: Axure, Keynote

I created a paper prototype based off of lo-fi wireframes for usability testing and asked users to navigate the app and discover opportunities for improvement. Only after several rounds of testing and iterating on my designs did I bring the wireframes to higher fidelity in Sketch. 

Usability testing

Usability testing

First row: splash screen, home page, product info, Try-It-On Tool, shopping cart Second row: Shade Selector Tool Tools used: Sketch

First row: splash screen, home page, product info, Try-It-On Tool, shopping cart

Second row: Shade Selector Tool

Tools used: Sketch

conclusion

After implementing changes supported by testing, I was able to verify the usability of my app and present a solution that met user needs and project goals. The app's iconography and style adheres to Glossier's youthful, playful branding and style guidelines. I also received positive feedback from Glossier's design team! 

Features

  • Shade Selector tool to match skin tones and suggest a [Skin Tint] product. This feature is adopted from Glossier's existing website. 
  • Try-It-On tool with digital overlays to suggest the results of [Generation G] lip tints and offer previews to users.
 

NEXT STEPS

  • Build out checkout procedure
  • New iconography for navigation bar

 
I'm so happy you decided to do a case study on us and extremely flattered! You've thought of some really insightful points about our customer and solved them elegantly. It was great getting a new perspective on the topic!

—John Kim, UX Designer @ Glossier