Le Labo

A UI redesign that explores and enahances Le Labo's identity, demonstrating their artisanal appraoch to luxury.

Le Labo

A UI redesign that explores and enahances Le Labo's identity, demonstrating their artisanal appraoch to luxury.

01 Overview

01 Overview

MY ROLE

UX/UI Designer

MY ROLE

UX/UI Designer

MY ROLE

UX/UI Designer

MY TEAM

Tiffany Wang (Solo)

MY TEAM

Tiffany Wang (Solo)

MY TEAM

Tiffany Wang (Solo)

DURATION

15 Weeks

DURATION

15 Weeks

TOOLS

Figma, Illustrator, Photoshop, and After Effects

TOOLS

Figma, Illustrator, Photoshop, and After Effects

PROBLEM

Le Labo's website lacked a clear visual hierarchy, an engaging hero section, and strong calls to action, which made navigation and product categorization confusing. The site also offered very little interactivity, leading to low user engagement overall. Product detail pages were visually unappealing and missing key product information, CTAs, and a review system, all of which weakened user trust and hurt sales.

PROBLEM

Le Labo's website lacked a clear visual hierarchy, an engaging hero section, and strong calls to action, which made navigation and product categorization confusing. The site also offered very little interactivity, leading to low user engagement overall. Product detail pages were visually unappealing and missing key product information, CTAs, and a review system, all of which weakened user trust and hurt sales.

SOLUTION

I redesigned the homepage with a stronger visual hierarchy, an engaging hero, clear CTAs, and interactive features to draw users in. I elevated navigation and product categorization for a smoother, more sensorial browsing experience. I also rebuilt the product detail pages with richer product info, more CTAs, and a review system to boost engagement and trust.

02 Design Development

02 Design Development

03 UI Design

03 UI Design

HIGHLIGHT 1: RESPONSIVE DESIGN

A flexible layout that adapts from phone to desktop, so browsing and checkout feel refined and effortless on any screen.

HIGHLIGHT 1: RESPONSIVE DESIGN

A flexible layout that adapts from phone to desktop, so browsing and checkout feel refined and effortless on any screen.

HIGHLIGHT 2: FRAGRANCE QUIZ

A short, mood-based questionnaire that turns personal tastes into scent recommendations, guiding shoppers to a few fragrances that suit them.

HIGHLIGHT 2: FRAGRANCE QUIZ

A short, mood-based questionnaire that turns personal tastes into scent recommendations, guiding shoppers to a few fragrances that suit them.

HIGHLIGHT 3: FRAGRANCE MAP

An interactive map that provides information of specific city-inspired scents and their origins around the world.

HIGHLIGHT 3: FRAGRANCE MAP

An interactive map that provides information of specific city-inspired scents and their origins around the world.

HIGHLIGHT 4: DARK MODE

A dark mode that carries the brand’s minimal aesthetic into a moodier palette, reducing glare and adding an immersive feel.

HIGHLIGHT 4: DARK MODE

A dark mode that carries the brand’s minimal aesthetic into a moodier palette, reducing glare and adding an immersive feel.

04 Design System

04 Design System

05 Takeaway

05 Takeaway

WHAT I LEARNED

This project taught me to stay organized across many moving parts. Consistent file structure, naming, and documented decisions kept the work cohesive and easy to revisit. It also showed me how much small details matter. Spacing, alignment, and labeling go unnoticed when they’re right, but they shape how polished and trustworthy an interface feels. Finally, I learned to refine efficiently by working in short cycles of feedback and adjustment, focusing on the changes that improved usability most.

WHAT I LEARNED

This project taught me to stay organized across many moving parts. Consistent file structure, naming, and documented decisions kept the work cohesive and easy to revisit. It also showed me how much small details matter. Spacing, alignment, and labeling go unnoticed when they’re right, but they shape how polished and trustworthy an interface feels. Finally, I learned to refine efficiently by working in short cycles of feedback and adjustment, focusing on the changes that improved usability most.

LOOKING FORWARD

This redesign reimagines the Le Labo e-commerce experience as a more interactive and personal space for shoppers. A refined layout, elegant visual details, and clearer organization and categorization make the brand’s products easier to explore and discover. Next, I would test the redesign with real users to validate the new information architecture, and explore deeper personalization, such as scent recommendations and saved preferences, to extend the sense of individual care the brand is known for.