Overview
This project was developed as part of my UX/UI bootcamp, where I explored how Design Systems can address usability and accessibility issues at scale.
I chose La Roche-Posay, a French dermocosmetics brand whose digital platforms showed inconsistencies across markets, accessibility gaps, and fragmented UI patterns. Through a UX audit of the French and Spanish websites, I analyzed how these issues impacted both users and internal consistency.
The project evolved into Hydra, an international Design System built on accessibility, scalability, and Atomic Design principles, designed to bring coherence and efficiency to La Roche-Posay’s digital ecosystem.
Key Results
Identified UX and UI inconsistencies
across markets.
Unified fragmented ecosystems into a
cohesive design system.
Defined global foundations.
Methods
Audit, Heuristic Evaluation,
Benchmarking, Atomic Design
The Challenge
I did not have access to La Roche-Posay’s internal Design System or documentation. All research and auditing had to be conducted externally, based solely on publicly available platforms.
The challenge was to analyze these issues from the outside and design a cohesive, scalable system capable of aligning markets, improving accessibility, and supporting a more unified global experience.
Research and Audit Insights
I conducted a structured research phase combining heuristic analysis, UX/UI audit, competitive benchmarking and user feedback across the French and Spanish websites.
Three patterns emerged consistently across all methods:
Fragmentation across markets.
Lack of internal consistency.
Accessibility and hierarchy issues.
Competitive analysis confirmed that leading dermocosmetic brands (Isdin, Lancome, Avene; etc) use accessible, simplified and highly standardized systems, reinforcing the need for a global and systematic approach.
User feedback aligned with the audit summary: the experience felt saturated, confusing and visually inconsistent.
Together, these insights clearly validated the need for a scalable, unified Design System.
Defining Hydra, the new Design System
Hydra is the Design System I proposed to bring coherence, accessibility and scalability to La Roche-Posay. Its name, inspired by water, connects directly to the brand’s identity and its iconic thermal spring.
Building Hydra
Foundations
I started by defining the foundations: the elements that shape the brand’s digital identity and ensure coherence across markets.
Color system
I proposed a unified, accessible color palette. Since La Roche-Posay’s signature blue does not meet WCAG contrast requirements, I introduced a darker color for actions and text, while preserving the brand blue for identity and expressive use.
Typography
I replaced Locator with Avenir. This resolved x-height inconsistencies.
Grid, Spacing and Imagery
I defined a unified grid and spacing scale to strengthen hierarchy across breakpoints. Existing imagery was systematized to maintain clinical clarity without adding visual noise.
System Architecture
Using Atomic Design, I structured the system from small building blocks to full interfaces.
Atoms (buttons, icons, inputs) combine into molecules (dropdowns, tooltips), which scale into organisms (headers, product modules). These structures then form templates and full pages, allowing me to validate cohesion in real market contexts.
Research Inputs
I conducted a competitive benchmark across dermocosmetic brands to identify industry design patterns and inform key structural and visual decisions.
Prototyping
Once the architecture was defined, I moved from low-fidelity drafts to high-fidelity screens. This step allowed me to test hierarchy, spacing, responsiveness, and component behavior before documenting the final system.
System Infrastructure
Hydra is supported by:
• Design tokens (global and semantic) for scalable updates
• AutoLayout for flexible, content-aware components
• A clear naming convention aligning designers and developers
Results & Impact
Hydra demonstrates how a structured, research-driven Design System can transform fragmented experiences into a unified, scalable and accessible ecosystem. Its impact can be seen across several dimensions:
Documentation
To ensure clarity and autonomy across teams, I created a dedicated Figma file focused exclusively on documentation. It outlines Hydra’s principles, usage guidelines and component behaviors, supported by examples and best practices that help designers understand not only what to use, but how and why.
Next Steps for Hydra
The next phase focuses on strengthening adoption and scalability by centralizing documentation in a dedicated platform like Zeroheight, extending the system to full user flows, and validating its foundations through user testing.
An additional step would be to present the proposal to La Roche-Posay as a conceptual contribution, sharing the audit, insights and system architecture as a way to open conversation, gather real feedback and explore potential collaboration opportunities with the brand.
Learnings
Designing Hydra reinforced that accessibility is not only a technical requirement, but a responsibility we hold as designers. Our decisions directly impact who can access information and who is left out.
This project reshaped the way I think about scale. Without solid foundations, clear documentation, shared principles, and well-defined components, design systems don’t grow, they fragment. Consistency is key.
Finally, Hydra taught me to design beyond screens. Designing for teams, developers, and future designers became as important as designing for users, as well-structured systems reduce friction, improve efficiency, and support long-term collaboration.
More than a final outcome, Hydra marked a shift in how I approach complexity, structure, and long-term thinking as a designer.
