2025 | UI RESPONSIVE DESIGN
UI DESIGN
ART DIRECTION
MOTION GRAPHICS
ROLE
UI Design
Art Direction
Motion Graphics
Case Study
TEAM
Hailey Ho Sang
TOOLS
Adobe CC
After Effects
Figma
DURATION
10 Weeks
La Roche Posay is a leading dermatological skincare brand that specializes in gentle formulations across a wide range of products for sensitive skin.
PROBLEM
The brand’s identity as a scientific, dermatological focused brand is not highlighted in the UI design, with generic content and a weak hierarchical system leading to minimal engagement.
SOLUTION
By using product-focused visuals, clear iconography, and an intuitive information layout, the user experience becomes cohesive and meaningful.
COMPETITOR'S ANALYSIS
Visual Strength
Strikingly minimal interface that uses a black-and-white, geometric layout with a clear grid structure, sparse navigation, neutral product-focused imagery, and consistent brand-aligned buttons to reinforce a clean, clinical aesthetic.
Visual Strength
Uniform but unsophisticated visual design. The navigation gets lost due to the scale of its content. Uses imagery of real users to build credibility and follows a grid layout, but lacks a clear visual hierarchy.
Visual Strength
Implements a neutral, nature-aligned color palette, with a clear, navigation hierarchy. Features imagery that highlights its products and ingredients in line with its brand, following a structured grid layout with distinct sections.
CURRENT WEBSITE - USER INSIGHT
WEAK INFORMATION HIEARARCHY
There is no intuitive categorization system in place, with an overload of information leading to clutter and poor user navigation.
STATIC DESIGN SYSTEM
The website design lacks dynamic elements that enhance user engagement and brand recognition as a leading skincare company.
WEAK BRAND DISTINCTION
The visual design does not align with La Roche Posay's identity as an innovative brand. The pages have a generic layout and color palette.
HIGHLIGHT 01 | DESKTOP
Product Detail Page
Established a strong visual identity through a cohesive design system and simplified content categories to create a more intuitive, user-centered experience
HIGHLIGHT 02 | MOBILE
Product Detail Page
HIGHLIGHT 03 | MODES
LIGHT & DARK MODE
DESIGN SYSTEM
KEY TAKEAWAYS
ADAPTABILITY & RESPONSIVITY
VISUAL LANGUAGE
Understanding the importance of a clear, accessible, and brand-focused language played a vital role in the development of the visual language.
PROCESS & REFLECTION
Feedback informed countless rounds of revisions, ensuring a consistency of design system while addressing user pain points.
IMPACT
ENGAGEMENT & BEHAVIOR
Increase in conversion rate (add-to-cart, sign-ups, purchases)
Increase in click-through rate (CTR) on key actions
ACCESSBILITY & PERFORMANCE
Improvement in accessibility score
Faster page load time
Reduction in UI-related support tickets
CUSTOMER CONFIDENCE
Increase in review interactions
Increase in user-generated content engagement (customer photos/videos)