Feeling Like GLOSSIER.
Website Redesign

Role
UX/UI Designer

Type
Personal Project

Duration
Mar - May 2020

Background

Glossier believes that online marketing is the most effective and inclusive way to reach out to consumers today. Better yet, Glossier's very little offline presence makes them seem scarcer and more valuable. Their goal is to "build the future beauty company where everything [they] make start with [their consumers]" (glossier.com). ‍

With these values, five years after launching, Glossier raised its company valuation to $1.2 billion as of 2019.

Problem

Currently, the website serves one purpose: an online shop for the brand. However, for a brand that's predominantly online, the online shop shouldn’t be the only feature on their main and only website.
Better yet, the website is very bland and basic that when people who don’t know anything about Glossier visits the website, they may question the credibility of this brand.

Original Design

original design original design original design

Solution

The redesign of the Glossier website will create an all-in-one experience for old and new consumers alike.
Glossier's online and offline presence will be unified under one space that is not only visually appealing but also informative and engaging.

reference reference reference

Inspiration

Glossier's "cult following" was mainly established through Instagram but it wasn't just social media marketing that contributed to their success. Their beautiful retail stores played a big part in captivating the hearts of their audience. Therefore, the Glossier website needs to be in the same calibre as their retail stores. ‍

The redesign should be attractive, dynamic, and engaging.
The new website will introduce design elements specific to the retail stores with a more dynamic layout, as well as Instagram posts from real consumers and blog posts from the company's blog, Into the Gloss, incorporated to increase viewership and revisits to the website.

reference reference

Research

research

Competitors

Their main competitors such as Milk Makeup or Drunk Elephant may not have the same level of online following, but instead they are far more accessible offline through wholesale stores, which are located globally. This is an aspect that Glossier lacks in and they need go beyond their current online shop website to cover this disadvantage.

Primary Research: Interview

Interviewee: Eunice Lim / 23 / Female / Recent Grad

Q. Are you familiar with my subject? What is your impression of it?
A. I know of glossier, but I’ve never used their products.

Q. How do you know of glossier?
A. It always shows up on my Instagram feed and Facebook page

Q. How would you describe its marketing proposition?
A. I guess they’re really good at marketing considering I always see them on Instagram and I also see sponsored ads on Facebook

Q. What is your impression on the website?
A. The website looks really dull like... there isn’t much to it. If I were to go on the website without knowing about the brand,I don’t think I would trust this brand? because there isn’t much on it, it makes the brand seem less established

Q. What’s your impression on the retail stores?
A. Their retail stores look very extravagant but not in a bad way, and I think I’d go in even if I didn’t know the brand

research research

Secondary Research

Glossier

Glossier's New York showroom generates more sales revenue per sq ft than the average Apple store

Glossier

They are getting plenty social media coverage thanks to innovative and interactive installations

Glossier

"Experience" is at the forefront of their retail stores

Glossier

Their popularity shows that experience means everything to the modern-shopper

research research

Sketches

development development development

Wireframes

1st Iteration

wireframe

The first iteration needed to be more dynamic to have distinguishable results from the original design.

With this in mind, I tried playing around with the positioning of the images on the second iteration to make the layout more engaging and interesting to scroll through.

2nd Iteration

wireframe

High-Fidelity

hi-fi hi-fi hi-fi hi-fi

Design

Color Palette

design


Style Tile

design

Final Prototype