Overview
This project was developed as part of my UX/UI bootcamp. We were asked to choose a brand with clear usability and accessibility issues to conduct a full audit and then design a complete Design System. Together with a teammate, I selected La Roche-Posay, a dermocosmetics french brand whose digital presence showed inconsistencies across markets, accessibility gaps, and fragmented UI patterns.
Our work combined a UX audit of the French and Spanish websites, the definition of scalable foundations, and the creation of components following the Atomic Design methodology.
The result was Hydra, an international Design System designed to bring coherence, accessibility, 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
We selected La Roche-Posay after identifying major inconsistencies across its French and Spanish digital platforms. The brand operated without a unified Design System: each market used different visual languages, component structures and interaction patterns, and even within the same site, UI logic was often fragmented. Because we did not have access to the brand’s internal design system or documentation, all research and auditing had to be conducted externally, based solely on what was publicly available.
Our challenge was to analyze these issues from the outside and design a cohesive, scalable system that could align markets, improve accessibility and support a more unified global experience.
Research and Audit Insights
We 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 we proposed to bring coherence, accessibility and scalability to La Roche-Posay’s fragmented digital ecosystem. It provides foundations and components that could unify experiences across markets. Its name, inspired by water, connects directly to the brand’s identity and its iconic thermal spring.
Building Hydra
Foundations
We started by defining the foundations: the elements that shape the brand’s digital identity and ensure coherence across markets.
Color system
We proposed a unified, accessible palette. Since La Roche-Posay’s signature blue does not meet WCAG contrast requirements, we introduced a dark color for actions and text, keeping the brand blue for identity and expressive use.
Typography
We replaced Locator with Avenir. This resolved x-height inconsistencies.
Grid, Spacing and Imagery
We 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, we 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 us to validate cohesion in real market contexts.
Research Inputs
A competitive benchmark across dermocosmetic brands revealed industry design patterns that informed key decisions.
Prototyping
Once the architecture was defined, we moved from low-fidelity drafts to high-fidelity screens. This step allowed us 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
Documentation
To ensure clarity and autonomy across teams, we 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.
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:
Learnings
Hydra reinforced that scalable systems rely on structure, documentation and shared principles. Accessibility proved to be both a strategic and human decision, and designing for teams became as important as designing for interfaces.
