Sistema de diseño Renfe

Sobre el proyecto

Sistema de diseño digital integral para Renfe nacido de un problema real: las fricciones de usabilidad y accesibilidad de sus plataformas, agravadas por la llegada de competidores con experiencias digitales muy superiores.

El proyecto arrancó con investigación: auditoría heurística de los flujos de registro y compra, auditoría de accesibilidad WCAG 2.1 (95 errores automáticos en la web actual, un 36% críticos) y benchmarking con Ouigo, Iryo, SBB, BVG y Ruter Oslo. Los hallazgos se sintetizaron en personas, escenarios prioritarios y requisitos del sistema, refinados en un taller de co-diseño con usuarios reales.

El sistema está documentado en Figma siguiendo Atomic Design: fundamentos, tokens de diseño (color, tipografía, espaciado, estados de foco y error), biblioteca de componentes con variantes y estados, y patrones globales de flujo — progreso por pasos, CTA persistente y resumen del viaje. Soporta modo claro/oscuro y multilingüismo como infraestructura, no como añadido.

Para demostrar que funciona más allá del mockup, el sistema se implementó en un prototipo React con el recorrido completo de compra — búsqueda, resultados, tarifas, datos del viajero, extras y pago — con estado persistente, capa propia de i18n y un error de pago simulado a propósito para diseñar el patrón de recuperación.

La validación final combinó revisión heurística experta, pruebas con usuarios de perfiles diferenciados y auditoría técnica de accesibilidad: el retest automático terminó sin errores y la navegación completa con lector de pantalla (NVDA) se ejecutó sin incidencias.

Ficha técnica

Rol

Investigación · Diseño del sistema · Frontend

Entregables

Librería Figma · Prototipo React

Accesibilidad

WCAG 2.1 · axe DevTools · NVDA

Herramientas

Figma · React · Vitest · Playwright

Ver el proyecto