Renfe Design System

About the project

A comprehensive digital design system for Renfe, Spain's public railway operator, born from a real problem: usability and accessibility frictions across its platforms, sharpened by the arrival of competitors with far stronger digital experiences.

The project started with field research: heuristic audits of the registration and purchase flows, a WCAG 2.1 accessibility audit (95 automatic errors on the current site, 36% critical) and benchmarking against Ouigo, Iryo, SBB, BVG and Ruter Oslo. Findings were synthesised into personas, priority scenarios and system requirements, refined through a co-design workshop with real users.

The system is documented in Figma following Atomic Design: foundations, design tokens (colour, type, spacing, focus and error states), a component library with variants and states, and global flow patterns — step progress, persistent CTA and trip summary. It supports light/dark mode and multilingual content as infrastructure, not as an afterthought.

To prove it works beyond the mockup, the system drives a functional React prototype covering the full purchase journey — search, results, fares, passenger data, extras and payment — with persistent state, its own i18n layer and a deliberately simulated payment error to design the recovery pattern.

Final validation combined expert heuristic review, user testing with differentiated profiles and technical accessibility audits: the automatic retest reported zero errors and full screen-reader navigation (NVDA) ran without incident.

Project details

Role

Research · System design · Frontend

Deliverables

Figma library · React prototype

Accessibility

WCAG 2.1 · axe DevTools · NVDA

Tools

Figma · React · Vitest · Playwright

View the project