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.
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.
My high-fidelity wireframes were supported by user research, research refinement, the site map, and user flow.
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.
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.
- Build out checkout procedure
- Social media APIs
Please contact me for the complete case study.