Gamifying Glossier: a new product concept

Glossier

Overview.

Duration: October - December 2018

Tools + skills: Figma, Adobe Illustrator, UX design, user research, journey mapping, personas, wireframing, prototyping, physical prototyping, UI design

About the project: Created for a UX/UI design class, the intent of this project was to create a new product for an existing brand through human-centered design. Glossier is a skincare and beauty brand that has become a major competitor in the makeup industry overnight. Starting from a beauty blog (Into The Gloss), the brand promotes enhancing natural beauty with simple, affordable, easy-to-use makeup.

The problem.

My partner and I, while both avid users and fans of the Glossier brand, noticed that the process of buying makeup was difficult, with many user pain points.

  1. Accessibility — Despite its popularity, the brand is somewhat inaccessible to many of its fans, as it only has two permanent locations (Los Angeles and New York City). The brand’s website is how the majority of their customers purchase their product, however this is a problem for first-time users who want to try the product before buying. Also, the two permanent locations are in rich areas, making the affordable brand rather inaccessible for lower income users.

  2. Lack of diversity — A large portion of Glossier’s fan base are young, middle-class, white girls. While the brand does a lot for inclusivity with its wider range of skin tones,products and models, older and lower-income demographics are not as prominent in their marketing. Additionally, by putting their stores in high-end locations, the store is really only attracting a certain type of person.

  3. Purchase process — In-store wait times often ran really long, as users had to flag down Glossier employees to start the purchase process on an iPad, then wait for their products to be packaged for them. When shopping online, customers have to pay for shipping and wait 2-3 weeks for their product. The stores are notoriously small, crowded, and confusing.

How might we expand Glossier's accessibility and empower more diverse users to shop the brand?

Glossier users

My role.

My partner and I worked together to conduct user research interviews with a diverse range of socioeconomic backgrounds and ages to really get an idea of where Glossier falls short. From there, we developed beginning user flows and low fidelity wireframes for the vending machine experience. We then tweaked the flows and frames to high fidelity, created Instagram stories for each location the vending machine would be at, designed custom stickers, and even created a cardboard prototype.

Glossier IG story screens

The solution.

For our solution, we decided to create a Glossier vending machine that would dispense Glossier products in more diverse neighborhoods, gamify the shopping experience, and create a memorable and interactive experience for Glossier users. The vending machine would “pop up” in eight different locations (Honolulu, San Diego, Venice, San Francisco, Portland, Spokane, Seattle, and Vancouver) with the opportunity to expand across the country. We felt that these locations would be accessible to both locals and tourists. The vending machine would:

  1. Broaden the brand’s reach to a more diverse audience of varying socioecnomic and age backgrounds
  2. Increase and improve the brand’s accessibility
  3. Gamify the shopping experience and make something the Glossier community can be excited about

Using an iPad mounted on the vending machine, users would select which products they would like to purchase and complete the purchase flow with a card reader. Makeup would be packaged into Glossier’s signature millennial pink bag and dispensed immediately, cutting wait times drastically.

Glossier iPad screens

The vending machine.

We wanted to keep the design of the vending machine on-brand with Glossier: simple, minimal, and feminine. Therefore, we opted to have the purchase process solely on an iPad mounted on the machine. The rest of the machine would be Glossier’s signature millennial pink in enamel lacquer with a glass top that would showcase the best selling products.

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 at a specific location within each city, gamifying the process. At each location, users will be able to collect custom stickers related to the city itself.