glossier app mockup.png

UX Challenge

Customers had difficulty visualizing the products on them while shopping online. They related mostly to models based on their own ethnicity and friend recommendations. 

Customers have their own unique beauty needs when it comes to shopping for skincare and makeup products online.

Customers preferred desktop because it was difficult to shop on the mobile website.

Creating an end-to-end mobile application for this project was validated through research findings.

UX Solution

Design a mobile app fulfilling user needs. This includes features to help users find answers to their skincare and makeup concerns.

Enhance overall customer experience. This includes features curated to user personalization.

Maintain Glossier's branding, keeping it clean and coherent. Aesthetic was a strong mental note kept in mind throughout the design process.


Discovery and Exploration

Research goals consisted of understanding the company as a whole: learning about the history behind Glossier (past), observing the current customer service model (present), and analyzing new, upcoming trends (future) in regards to both technology and marketing.

This research framework helped test initial assumptions about Glossier and design this mobile app with curated solutions for Glossier's existing customers.

 

Secondary Research

Secondary research topics included researching market trends in beauty, skincare, and makeup industries, augmented reality, artificial intelligence, and social media marketing.

Artificial intelligence was a topic I found most relevant when designing this app because so many of my participants had their own individual personalized needs.

 

The fact is, certain products don’t work for certain people. We’re all unique, with different skin types or hair types, and have different goals for what we want to achieve.

Most beauty brands aren’t selling products tailored to individual consumers. Instead, they’re selling a brand, a luxury, a lifestyle or some product that will magically work on every skin type and solve every skin problem.

Glossier model Torin wears Haloscope in Topaz.

Glossier model Torin wears Haloscope in Topaz.

Emily Weiss having some sticker fun.

Emily Weiss having some sticker fun.

More and more companies are embracing the individuality of their customers, creating products designed specifically for each of them.

With the help of new technologies, including artificial intelligence and machine learning, the possibilities seem infinite.

I had originally thought it would be augmented reality. However, many of my participants distrusted augmented reality features (but more on that later, found below).

 

User Contextual Inquiries

I visited local Orange County coffee shops to find participants and conduct 1:1 user interviews.

I also reached out to Glossier reps via my personal Instagram and sent them questions to answer through email. 

All participants had various occupations and roles, including being students, models, bloggers, and influencers.

Interviews were audio recorded and uploaded to SoundCloud for documentation and used as a reference while synthesizing user research.

Interviews were audio recorded and uploaded to SoundCloud for documentation and used as a reference while synthesizing user research.

 

Competitor Analysis

Competitors shown on the top row were selected based on social media status, which were recommended as suggestions when I followed Glossier on Instagram.

Pink spaces = fulfilled category. White spaces = unfulfilled category.

The left column depicts customer and consumer values participants reported during user interviews.


Synthesizing User Research

The interviews conducted were translated into an empathy map, which helped narrow down user goals, insights, and needs.

The common themes that emerged from the empathy map findings included: 

 
Glossier launches ecommerce website in 2014.

Glossier launches ecommerce website in 2014.

Mobile vs Desktop (& vice versa)

Participants reported it is difficult to shop on mobile, even with a nice, responsive website.

 

Diversity

Participants want to find products with models based on one’s ethnicity, as that is how they can try to see what products look like on them.

Glossier swatches of Perfecting Skin Tint represented in different shades.

Glossier swatches of Perfecting Skin Tint represented in different shades.

 
The process behind Glossier's new Shade Finder.

The process behind Glossier's new Shade Finder.

On Trusting Technology

When participants were approached with questions about augmented reality, they did not trust it.

Many participants viewed it as being inaccurate.

They want trust with the brand as a whole, including special features, products, and diversity.

 

In Stores vs Online

Participants shop in stores for specific products if they cannot find it online.

A participant reported giving up on buying a product if seen to be out of stock or sold out online.

Location is a key factor when deciding to visit a pop-up shop.

Products look different online versus in person.

Glossier showroom in New York City.

Glossier showroom in New York City.

 
The "You Look Good" mirror to capture some selfies.

The "You Look Good" mirror to capture some selfies.

Glossier Community, Friendships, & Social Media

All participants found Glossier via social media and were recommended by friends.

There is a strong connection found within the Glossier community, social media, models, bloggers, influencers, and beauty enthusiasts.

 

Personalized Research Criteria

Participants rely on heavy research when shopping for products online. This includes:

  • Googling about specific products

  • Comparing prices

  • Learning about product ingredients

  • Looking at both retail & brand store user reviews

  • Watching beloved youtubers & their reviews

  • Quality

  • Friend recommendations

  • Shipping prices

  • Specific skin type & skin concerns

  • Confirming if a product really works or is just all hype

  • Ratings

  • Website information

  • Word-of-mouth

  • Makeup artist reviews

  • Disregarding products that have ads and sponsorships

  • Brands that support diversity

  • Natural beauty

  • Profits back to charity

  • Fair trade

This validates how important it is that users want products based on their own personalization.

View this link for the full research findings report.


Defining the UI Requirements

After synthesizing user research, I moved on to information architecture and interaction design, which included putting together an app map (shown below) and user flow. 

The main focus of this app map is the bottom navigation bar, which was consistently used as a design reference while creating sketches and wireframes.

I also used Glossier's Medium article on mobile navigation by Jan-Niklas Kokott as a design thinking resource.


Letting the Users Play

After designing wireframes, user response and feedback was obtained while observing participants interact with the prototype.

The prototype was tested by millennial users, all being female.

 

Each user had to complete the following tasks: 

1. Explore the mobile app to find and add to shopping bag the product “Lidstar Fawn”.

2. Browse the community screen starting with the community feed.

3. Filter the feed to “featured”.

4. Browse Glossier’s profile page.

5. End at the home screen.


Final Screens

 

Current Navigation Bar (Before)

Mobile Website, Responsive (March 2018)

Mobile Website, Responsive (March 2018)

Proposed Navigation Bar (After)

Mobile App

Mobile App

 
Glossier Home.gif

Home

The home screen displays content for "featured products" and a "skin quiz".

There are customized features "personalized--just for you" and "recently viewed". A "favorites" feature for product items was also added.

Research findings validated users all have their own shopping preferences, which confirms the need for personalization features.

 
Glossier Shop Search.gif

Shop by Search

Users can shop for a specific product using the search bar, arrive at the selected product screen, add to bag, and view their order in their shopping bag.

Research findings validated users search for specific products.

Glossier Shop Category.gif

Shop by Category

Users can shop by category, browse the selected category screen, add a selected product to bag, and view their order in their shopping bag. 

Research findings validated users browse for specific products in selected categories.

 
Glossier Log In.gif

Log In

Log in allows access to view favorites screen.

Account screen displays existing account prototype with account profile settings

A new account screen gives users complete access to profile settings and customer service.

 
Glossier Community Filters.gif

Community Filters

Filter options include "featured", "newest", and "liked".

This feature was created to help users with organization during their mobile community experience. 

A community screen allows users to interact with others and ask for personal beauty advice.

Glossier Community Comments.gif

Community Comments

When browsing the Glossier community screen, users can "like" a photo (depicted with a sparkles icon) and "view comments" (depicted with a comment conversation bubble icon). 

Research findings show customers ask for advice based on personalization, suggestions from friends, and various topics including product usage and application.


In Conclusion

glossier opportunity.png

Opportunity

Helping Glossier's customers have a better beauty buying experience. To achieve this, I designed a mobile app for Glossier with the current brand aesthetic kept in mind. 

 

Perks

It gave me the opportunity to work with some Glossier rep friends (@getglowy and @heytherehelena), to interview Glossier users, and get in contact with a favorite fashion blogger of mine since high school (@thatschic).

glossier perks.jpg
 
glossier the future of beauty.jpg

The Future of Beauty

There's such a powerful connection within the beauty, skincare, and makeup community. 

This shows how important beauty enthusiasts rely on each other for friend recommendations.

The beauty industry is constantly changing, going towards a world of personalization and customization.

 
 

– Case study, April 2018

Four Week Sprint