LR
Return to projects

UX case study · February 2025 — March 2025

Glossier Homepage Redesign

Reimagining Glossier's digital storefront through intentional minimalism and improved product discovery.

01

Project overview

Desktop prototype · MacBook Air
Mobile prototype · iPhone
Role
UX/UI Designer
Timeline
2 weeks
Tools
Figma · Photoshop
Dates
February 2025 — March 2025
Platform
Responsive web (desktop + mobile)
Team
Solo concept project

02

The problem

[Placeholder] Describe the UX challenges on the original Glossier homepage.

[Placeholder] Describe the business or product context for improving the storefront experience.

  1. 01

    [Placeholder] Pain point 1

    [Placeholder] Explain the first primary pain point.

  2. 02

    [Placeholder] Pain point 2

    [Placeholder] Explain the second primary pain point.

  3. 03

    [Placeholder] Pain point 3

    [Placeholder] Explain the third primary pain point.

Original Glossier homepage screenshot · Original Glossier homepage — top of page.

Website performance baselines

Existing site baselines — kept separate from redesign outcomes.

—

[Placeholder] Baseline metric 1

Placeholder · company/site baseline, separate from redesign outcomes

—

[Placeholder] Baseline metric 2

Placeholder · company/site baseline, separate from redesign outcomes

—

[Placeholder] Baseline metric 3

Placeholder · company/site baseline, separate from redesign outcomes

03

Research & discovery

[Placeholder] Introduce the research and discovery approach used for this project.

Annotated original homepage · Heuristic audit of the live homepage — ten findings mapped to the page.

UX audit

[Placeholder] Summarize the UX audit process and what you reviewed.

Target audience

[Placeholder] Describe the target audience for the homepage experience.

Competitive analysis

[Placeholder] Summarize competitor patterns relevant to homepage UX and product discovery.

Figma export · Competitor — Victoria Beckham Beauty · [Placeholder] Brief note on Shop The Icons / discovery pattern.
Figma export · Competitor — Saie · [Placeholder] Brief note on Essentials / Newness scroll pattern.

Key insights

  1. 01

    [Placeholder] Insight 1

    [Placeholder] Write the first key research insight.

    [Placeholder] Optional supporting evidence or observation.

  2. 02

    [Placeholder] Insight 2

    [Placeholder] Write the second key research insight.

    [Placeholder] Optional supporting evidence or observation.

  3. 03

    [Placeholder] Insight 3

    [Placeholder] Write the third key research insight.

    [Placeholder] Optional supporting evidence or observation.

04

Design process

[Placeholder] Describe the design strategy and objectives that guided the process.

  • 01

    [Placeholder] Design decision 1

    [Placeholder] Explain this design decision.

  • 02

    [Placeholder] Design decision 2

    [Placeholder] Explain this design decision.

  • 03

    [Placeholder] Design decision 3

    [Placeholder] Explain this design decision.

Low-fidelity exploration

Wide desktop frame with paired mobile — tap to enlarge when images are added.

Figma export · Lo-fi desktop wireframe · [Placeholder] Annotation for the lo-fi desktop structure.
Figma export · Lo-fi mobile wireframe · [Placeholder] Annotation for the lo-fi mobile structure.

High-fidelity Figma frames

Final visual direction at desktop and mobile proportions.

Figma export · Hi-fi desktop homepage · [Placeholder] Annotation for the hi-fi desktop direction.
Figma export · Hi-fi mobile homepage · [Placeholder] Annotation for the hi-fi mobile direction.

Design system preview

[Placeholder] Replace with exported tokens from Figma when ready.

[Placeholder] Color 1

#111111

[Placeholder] Color 2

#FFFFFF

[Placeholder] Color 3

#E8A598

[Placeholder] Color 4

#F5E6E2

05

Final design

[Placeholder] Introduce the final homepage design and what reviewers should notice.

Figma export · Complete desktop homepage · [Placeholder] Full-page desktop homepage — distinct from the Overview hero preview.

Responsive mobile designs

Figma export · Mobile homepage screen 1 · [Placeholder] Annotation for mobile screen 1.
Figma export · Mobile homepage screen 2 · [Placeholder] Annotation for mobile screen 2.
Figma export · Mobile homepage screen 3 · [Placeholder] Annotation for mobile screen 3.

Interaction Highlights

Key interactive moments from the prototype — image or short video exports.

Desktop Navigation · [Placeholder] Hover-menu interactions — describe the desktop nav behavior.
Shopping Bag · [Placeholder] Slide-out drawer — describe the bag / cart experience.
Mobile Navigation · [Placeholder] Expanded hamburger menu — describe the mobile nav pattern.
Product Discovery · [Placeholder] Featured collections and product carousel — describe discovery.

Before & after comparison

Interactive slider unlocks when both images are supplied.

Before placeholder

Figma export · Before — original homepage

Before · original homepage · After · redesigned homepage

Interactive slider unlocks when both before and after images are set in content.

Figma prototype

Set figmaUrl in lib/content.ts to embed the interactive prototype.

Prototype placeholder

Paste your Figma prototype or file URL into glossierCaseStudy.figmaUrl in lib/content.ts to embed an interactive preview here.

Open interactive Figma prototype · awaiting URL

06

Results & impact

[Placeholder] Summarize intended UX improvements. Do not invent measured company results.

Design Outcomes

  • [Placeholder] Design outcome 1 — what was produced
  • [Placeholder] Design outcome 2 — what was produced
  • [Placeholder] Design outcome 3 — what was produced
  • [Placeholder] Design outcome 4 — what was produced

Success Metrics

  • Product discoverability

    [Placeholder] How improved product discovery could be evaluated.

  • Navigation efficiency

    [Placeholder] How clearer navigation paths could be evaluated.

  • Product engagement

    [Placeholder] How engagement with product modules could be evaluated.

Usability findings

[Placeholder] Room for measured usability findings if testing is completed. Leave blank or replace when available.

07

Reflection

Key takeaways

  • 01

    [Placeholder] Key takeaway 1

  • 02

    [Placeholder] Key takeaway 2

  • 03

    [Placeholder] Key takeaway 3

Challenges & lessons

  • [Placeholder] Challenge or lesson learned 1
  • [Placeholder] Challenge or lesson learned 2

Next steps

  • [Placeholder] Next step 1
  • [Placeholder] Next step 2
  • [Placeholder] Next step 3
Return to projects