cover-ratpdev
cover-ratpdev
cover-ratpdev

Building and scaling a design system

COMPANY

RATPDev

ROLE

Product Design

None

INDUSTRY

Transportation

YEAR

2025

INFOS

Creating a simple yet impactful RATP Dev design system, to ensure consistency and usability across websites subsidiaries.

SCOPE

Researching, designing interfaces, prototyping and documenting

INFOS

Creating a simple yet impactful RATP Dev design system, to ensure consistency and usability across websites subsidiaries.

CONTEXT

CONTEXT

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.

Connect to Content

Add layers or components to infinitely loop on your page.

Connect to Content

Add layers or components to infinitely loop on your page.

GOALS

GOALS

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.

PROCESS

PROCESS

🤓 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.

Components
Components
Components
Components
Components
Components

SOLUTION

SOLUTION

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.

NEXT STEPS

NEXT STEPS

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.

Have a project in mind ?

Feel free to reach out for collaborations or just a friendly hello!

Available to work

All rights reserved,

C.L ©2025

Have a project in mind ?

Feel free to reach out for collaborations or just a friendly hello!

Available to work

All rights reserved, C.L ©2025

Have a project in mind ?

Feel free to reach out for collaborations or just a friendly hello!

Available to work

All rights reserved,

C.L ©2025