Reconstructing Sephora's Desktop Experience

Hierarchy · Spacing · Purchase Flow

A layout and hierarchy redesign to improve scannability and reduce decision friction across the shopping journey.

Figma UI / UX 5 Desktop Pages 2025 View in Figma ↗

Problem

Users couldn’t scan and compare products fast because the layout lacked a clear hierarchy and visual rhythm.

Solution

Simplified navigation and rebuilt spacing + hierarchy so products become the loudest thing on the page.

Changes

Made product images and price the primary focus so users can compare faster.

Standardized spacing and grid rhythm to reduce visual noise across modules.

Grouped filters and simplified header elements so actions don’t compete for attention.

PAGE DESIGNS

Reduced hero noise and reorganized modules so users can scan categories first, then explore products with less friction.

Simplified filters and strengthened product-grid hierarchy so users can scan, compare, and choose faster.

Clear purchase flow with price, shade selection, and primary CTAs prioritized for faster decisions and checkout.

Standardized spacing and components to make the brand story easier to read and visually consistent across sections.

Consistent Sephora look, clearer hierarchy—events are now browsable and comparable in one pass.

Open to internships.