GLOSSIER mobile retail app

Skin first. Makeup Second. Smile Always.

Glossier is 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.  

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.

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 have 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. 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. Since Glossier does not have a brick and mortar store, I wanted to offer the users and potential customers a solution: a try-it-on feature that is specific to the app. 

I developed a persona based off of user needs noted in preliminary interviews and began rough sketches and lo-fidelity wireframes.

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.

Following preliminary interviews, I sketched rough drafts of potential app interfaces. My renderings were influenced by Glossier's existing interface design, popular social media platforms (Instagram, Facebook, Pinterest), 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 wireframes.

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

 

My high-fidelity wireframes were supported by user research, research refinement, the site map, and user flow. 

Tools used: Axure, Keynote

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. After several rounds of testing, I created the Glossier App, complete with:

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.

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 layout changes provided by usability testing to previous designs, 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. 

NEXT STEPS

  • Build out checkout procedure
  • Social media APIs

CLICKABLE PROTOTYPE

Please contact me for the complete case study.