Beauty and Cosmetics Website

Glossier-ReDesign

Glossier is a beauty brand that empowers people to feel good in their skin by celebrating natural beauty. We offer high-quality skincare and makeup products that enhance, not hide, your features. Our website is a community for beauty lovers to connect, share their looks, and exchange tips, supporting your beauty journey with simplicity and authenticity.

My Role

UX/UI Designer

Duration

4 months

Tools

Figma

Overview

The Glossier website faces issues with navigation, content organization, and responsiveness across devices, which affect the user experience. Despite its strong brand identity, the site falls short in delivering a seamless, intuitive shopping experience. A redesign is necessary to streamline navigation, improve content structure, and ensure responsiveness, ultimately enhancing customer satisfaction, engagement, and conversions while staying true to Glossier's brand values.

Problem Statement

Glossier is a beauty brand that empowers people to feel good in their skin by celebrating natural beauty. We offer high-quality skincare and makeup products that enhance, not hide, your features. Our website is a community for beauty lovers to connect, share their looks, and exchange tips, supporting your beauty journey with simplicity and authenticity.

Goal

  • Create a visually appealing and accessible platform.

  • Reinforce Glossier’s brand values of simplicity, authenticity, and natural beauty.

  • Increase customer engagement, satisfaction, and conversions.

  • Strengthen the with Glossier’s community of beauty lovers.

  • Improve navigation for a more intuitive user journey.

  • Ensure full responsiveness across all devices.

  • Organize content clearly and efficiently for easier access.

Challenges

  • Content Organization: The structure of content needs refinement to improve clarity and make key sections easier to locate.

  • Device Responsiveness: The website may not be fully optimized for different screen sizes, leading to a subpar experience on mobile and tablets.

  • Brand Alignment: Ensuring that the website redesign aligns with Glossier’s identity of simplicity, authenticity, and natural beauty while remaining modern and engaging.

  • User Engagement: Encouraging users to spend more time on the site, explore products, and interact with the community.

  • Conversion Optimization: Increasing conversion rates by making the shopping experience smoother and more enjoyable for users.

  • Navigation Issues: Current navigation can be confusing, making it hard for users to find products or information quickly.

Goal

  • Create a visually appealing and accessible platform.

  • Reinforce Glossier’s brand values of simplicity, authenticity, and natural beauty.

  • Increase customer engagement, satisfaction, and conversions.

  • Strengthen the with Glossier’s community of beauty lovers.

  • Improve navigation for a more intuitive user journey.

  • Ensure full responsiveness across all devices.

  • Organize content clearly and efficiently for easier access.

Challenges

  • Content Organization: The structure of content needs refinement to improve clarity and make key sections easier to locate.

  • Device Responsiveness: The website may not be fully optimized for different screen sizes, leading to a subpar experience on mobile and tablets.

  • Brand Alignment: Ensuring that the website redesign aligns with Glossier’s identity of simplicity, authenticity, and natural beauty while remaining modern and engaging.

  • User Engagement: Encouraging users to spend more time on the site, explore products, and interact with the community.

  • Conversion Optimization: Increasing conversion rates by making the shopping experience smoother and more enjoyable for users.

  • Navigation Issues: Current navigation can be confusing, making it hard for users to find products or information quickly.

Module & Elements

We began by analyzing the product page to identify and categorize its modules and elements. This will streamline the process of reorganizing and redesigning the page.

User Persona

Low Fidelity Wireframing

Major Screen

We optimized the UX layout to enhance user experience, encouraging visitors to explore products and increase purchases. To align with Glossier’s goal of personalization, we introduced a feature that allows users to customize their skincare routine and makeup looks based on their preferences, creating a more engaging shopping experience and boosting interaction and purchases.

View More Work...

Food Delivery

UberEats

Lifestyle

PlantAura

AR

Social AR Filters

Create a free website with Framer, the website builder loved by startups, designers and agencies.