Un idioma para cuatro plataformas.

Un producto que creció más rápido que su coherencia.

Vicens Vives lleva más de 80 años publicando libros educativos. Con Edubook, alumnos y docentes acceden a libros interactivos, clases y evaluaciones desde cualquier dispositivo. Al crecer el producto, cada equipo decidía por su cuenta: los mismos botones tenían cuatro tamaños y las tipografías cambiaban por sección.

Sin sistema, cada decisión se tomaba dos veces.

La auditoría fue contundente: el mismo rojo corporativo aparecía con 12 valores distintos, no había especificaciones de componentes y diseño y desarrollo rehacían el mismo trabajo en cada sprint.

Teníamos que decidir desde cero si usar rojo marca o rojo error, si el padding era 16 o 24. No había referencia.Contexto del equipo antes del Design System

Tres capas en cascada.

Tres archivos de Figma interconectados: Guidelines, Tokens y Componentes. Un cambio en los tokens se propagaba a todos los componentes, y uno en un componente, a todos los archivos.

Decisiones que no se toman dos veces.

Más de 200, cada uno con todos sus estados.

Enabled, hover, focused, disabled y error, con auto-layout y propiedades de componente: inputs, navegación, feedback, cartas de libro y clase, tablas de evaluación y reproductores.

Todos hablando el mismo idioma.

Tres lecciones.