Building and scaling a design system
COMPANY
RATPDev
ROLE
Product Design
INDUSTRY
Transportation
YEAR
2025
SCOPE
Researching, designing interfaces, prototyping and documenting
Imagine a digital ecosystem made of dozens of websites, each evolving at its own pace, following its own rules, styles, and exceptions.
That was the reality at RATPDev: every site came with its own visual and functional variations, leading to increasing design and technical debt, a lack of UI/UX consistency, and high maintenance costs.
With the migration to Drupal V3, a unique opportunity emerged: laying the foundations of a unified Design System, able to harmonize, accelerate, and bring a cohesive product identity across all interfaces.
This project had three main goals:
Build a robust and scalable Design System, aligned with the business needs of the subsidiaries and the technical constraints of Drupal V3.
Deliver a consistent and accessible user experience, regardless of the use case.
Document each component and design principle to help teams ramp up quickly, ensure the system's scalability, and reduce the accumulated design/tech debt.
🤓 Audit & Inventory
Before building, we needed to understand the landscape. I started by:
Auditing existing components (legacy sites, Figma files, Drupal libraries).
Identifying duplicates, inconsistencies, and recurring patterns to rationalize.
Interviewing product managers, developers, and CSMs to uncover common needs and pain points.
🛠️ Foundations: Setting the Base
Defining core design tokens (colors, typography, spacing, etc.).
Establishing a responsive grid system, accessibility rules, and design principles.
Documenting visual foundations directly within Figma, using styles and shared libraries.
🧩 UI Components Creation
Using Figma as the playground, I helped design a modular and accessible component library - from basic buttons to complex content blocks - by :
Structuring the system by atomic levels (atoms / molecules / organisms).
Adapting patterns to the varying contexts of our subsidiaries.
Collaborating closely with developers to ensure feasibility and integration with Drupal V3.
📚 Documentation & Governance
A Design System is not just a tool—it's a shared culture. My role included:
Setting up a shared documentation space (Zeroheight or Storybook depending on the audience).
Writing UX guidelines, functional specs, and real-life use cases for every component.
Defining contribution and update rules to keep the system alive and evolving.
🔄 Production & Feedback Loop
The Design System came to life through pilot websites. We observed, listened, iterated—because a good system is one that adapts.
Gradual integration into pilot sites across subsidiaries.
Gathering feedback from local teams and end users.
Iterating on components and patterns based on real usage and insights.
The RATP Dev Design System is now a centralized, scalable, and well-documented library designed to:
Ensure visual and functional consistency across all subsidiary websites.
Speed up design and development through ready-to-use assets.
Significantly reduce the UX/UI debt accumulated over time.
It includes:
A strong foundation of design tokens, grids, and accessibility principles.
A full component library fully compatible with Drupal V3.
A living documentation platform, clear, collaborative, and user-friendly.
The Design System is now:
A compass for designers, developers, and product teams.
A productivity lever for web projects.
A coherence enabler that aligns technology, design, and user experience.
It evolves. It simplifies. It lasts.
This project is more than just a deliverable—it's a new way of working together:
More fluid. More aligned. More user-focused.
What's next ?
Supporting adoption across subsidiaries through training and gradual onboarding.
Rolling out a collaborative contribution process to keep the system evolving as a shared asset.
