Glossier — a UX case study

Product Concept: Glossier Vending Machine

An accessible makeup dispenser that extends the brand’s reach across the United States, helps diversify Glossier’s target market, and provides something for the existing brand community to be excited about.

Part I: Identifying a Problem

As avid Glossier users ourselves, we wanted to identify existing user pain points within the Glossier purchase process and discover where the brand could expand as it continues to grow to a global scale. My partner Teak and I began by conducting various user research interviews. We chose three users from different socioeconomic backgrounds, ages, races, and locations. We found that Glossier’s primary target market consists of young millennials and wanted to see how we could expand this target demographic. Personally, we both found Glossier’s lack of accessibility and long wait times within the store itself rather arduous in the process of purchasing makeup. But here’s what our three users thought.

How would lower-income users want to purchase Glossier products?

How would older users find these products?

From three user research interviews, we identified three diverse types of users who would use this vending machine:

1. Natalie, a Latina barista who loves makeup, but on a budget
2. Lizzie, a trendy, Los Angeles/New York native millennial (the existing target demographic)
3. Diane, a busy mom who knows what she wants

Glossier’s strengths

1. beautiful product design, packaging, branding, and store design

“I love the smell of the store, the look of the store. They really have honed in on having a brand look with pretty packaging and a pretty Instagram page.” — Natalie

2. brand mission of minimalism

“it’s a fresh take on makeup, more about enhancing what you already have than changing it” — Natalie

3. the personalized shopping process

“The bags have name tags on them which feels really personalized.” — Liza

What we learned

1. the process of buying makeup products is difficult

“Why can’t it be easier for a non makeup person to buy makeup?” — Diane

2. the brand is not that accessible to a majority of its users

“When you open your store in that area of town, you’re gonna get a specific type of person only.” — Natalie

Part II: Developing The Solution

Inspired by Snapchat’s Spectacles, my partner and I dreamed up the solution of creating a gamified vending machine available in 8 major cities across the West Coast: Los Angeles (Venice Beach), San Diego, San Francisco, Honolulu, Portland, Seattle, Spokane, and Vancouver. Users would find the exact location of the vending machine in each city by looking at Glossier’s Instagram story. The story and the machine would only be available for 24 hours, gamifying the process. At each location, users will be able to collect custom stickers related to the city itself.

With this product, we want to tackle the problem of inaccessibility and also, Glossier’s lack of diversity. By providing more options to purchase the product, users of different socioeconomic statuses will be able to both find and purchase the products. We have three distinct goals for this product:

1. give the existing Glossier community something to be excited about
2. extend the brand’s reach by providing an accessible dispenser for people of all incomes and regions in the West Coast
3. create a more interactive experience for brand users

Part III: Designing the Machine

After gathering our research about Glossier’s existing users, we set to work designing the experience. For this project, we only needed to create high fidelity wireframes and a working prototype of the experience. However, Teak and I wanted to create a full, immersive experience, so we also created a physical cardboard prototype. We began by mapping out the user flows.

Existing user flow

Within the existing user flow, we noticed several steps that could be cut out:

1. finding a Glossier employee to check you out
2. typing in information on an iPad
3. waiting for a Glossier employee to call your name with a tote bag of makeup ready

We wanted to streamline this process and allow the option for sampling and experience. The store itself is rather crowded and looking for employees to check out with or waiting for an employee to give you a tote bag of makeup can take a long time. We wanted the vending machine to be simple, intuitive, and on-brand with Glossier’s signature style. So, we wanted screens. We thought that a simple screen roughly the size of an iPad would be big enough and intuitive enough for users to browse, shop, and pay for their chosen makeup.

However, after some user testing, we discovered that while screens would be an intuitive way to shop (as the traditional vending machine letter and number combination buttons can be confusing), glass on the machine itself showcasing the products would be preferable so that customers would know what type of products they would be purchasing.

“I just am not comfortable with not being able to see the product I wanna buy”

To showcase the products, but still maintain Glossier’s sleek look, we decided to create a “showroom” for the products at the top of the machine. We wanted to play with the idea of pink shelves, as Glossier’s Instagram page often featured products displayed on bathroom shelves. The products would be lined up and grouped by category along the shelves and a glass plate would be fitted in the front with the Glossier logo across it.

For the screens, we worked in Figma to create basic wireframes. There would be three methods of finding products:

1. bestsellers — for the brand new Glossier user
2. products — for the casual browser
3. search — for the user who knows what they want

Users can tap on different pictures of the product, select their shade, and add it to the bag. Once in the bag, users can either check out or continue shopping. Checkout allows users to choose from one of three samples, allowing customers to explore the brand even further. After selecting their payment method (either credit or debit) and inserting their card, users will be prompted for an emailed receipt.

credits to Allison Underwood from Behance. We used your beautiful icon set for this school project!

Users will then receive their packaged makeup in the signature Glossier pink bubble wrap bag with the location’s limited edition stickers inside.

Our key design direction was:

1. pink
2. italicized sans serif fonts
3. minimalism

Creating from Cardboard

For the cardboard prototype, we wanted to create a slot and a slide for a makeup bag to slide down to the user. We trolled various grocery stores asking for the biggest possible free box they could give us that would otherwise go to the trash. It is surprisingly hard to find enormous boxes for free around Los Angeles. Nevertheless, we MacGyver-ed a beautiful vending machine from two boxes (a trash can box from @Target and a toilet paper box from @Trader Joe’s — thank you!), cut a hole for the slot, fitted a smaller piece of cardboard for the slide, and cut another hole in the back to slip the bag through.

We created a little top area with shelves to showcase the Glossier products and a smaller shelf to hold an iPad for the screens. After cutting a tiny slot for a credit card, we got to spray painting. 4 cans of spray paint and many finger cramps later, we had our beautiful pink box set and drying.

Next, we whipped out our Xacto knives and got to cutting. Painstakingly, we carefully cut around the Glossier logo letters that we printed on sticker paper. While my partner attached a cheap mirror to one side, I placed the stickers on the front. Finally, we arranged the products and wrapped the top with saran wrap as our mock “glass.”

User testing

The primary critique we received was that the Glossier logo we had originally included at the bottom of the screens (as a way to navigate back to home) was confusing, annoying, and visually distracting. For the final high fidelity frames, we nixed that idea.

The Positives:

• felt super intuitive
• design was very on brand with Glossier
• sleek and cool
• the instant gratification from the vending machine (receiving the makeup immediately)

The Negatives:

• the Glossier logo at the bottom is confusing
• want to see a product pop up when searching and typing in half a word

The Results

All of the users we interviewed saw this as a useful product that was on-brand with Glossier. They all identified it as something they would love to see and use, as it was an effective solution to Glossier’s lack of accessibility and diversity by bringing the brand to different areas and different people. The design elements — the wireframes, the Instagram story screens, the custom stickers, and the vending machine itself — all was consistent with Glossier’s signature branding.

Next Steps

I loved working on this project and would love to continue with it going forward. Our next steps would to definitely try and pitch this idea to Glossier, as it is both a good idea, and one we believe in. Moving forwards, we would want these vending machines to spread across the United States, arrive in more low-income areas, use Glossier customer data to better tailor its locations, and potentially partner with ridesharing apps such as Lyft or Uber.

View the full prototype here: