Un design system es un producto. Sus clientes son los equipos que diseñan y construyen con él. Muchos rediseños lo olvidan y empiezan por los componentes: botones nuevos, colores nuevos, una librería nueva.
En Vodafone he trabajado en el rediseño de un design system (sistema de diseño). No he construido los componentes. Mi parte ha sido la orientación: qué necesidades de los productos reales tenía que resolver el sistema. En este artículo explico ese enfoque.
Por qué falla un rediseño que empieza por los componentes
Una librería de componentes puede parecer completa y fallar a los equipos que la usan.
Las señales se ven enseguida. Diseño copia un componente y lo cambia. Ingeniería escribe su propia versión. La misma tarea tiene tres flujos distintos en tres productos. Cada equipo tiene un buen motivo, y cada motivo es una necesidad que el sistema no ha resuelto.
Un rediseño que empieza por los componentes cambia su aspecto y deja esas necesidades sin resolver. Al año vuelven los mismos problemas.
Empieza por los productos que usan el sistema
El primer paso es estudiar los productos con el mismo cuidado que una investigación con clientes.
Busco tres cosas.
Dónde cambian los equipos el sistema
Cada componente que un equipo copia y edita es una evidencia. Pregunta qué necesitaba ese equipo. Muchas veces varios equipos han hecho el mismo cambio, y ese cambio tiene que estar en el sistema.
Dónde un flujo es demasiado largo
Los componentes son piezas pequeñas. El cliente no usa componentes, completa tareas. Sigo un flujo entero en un producto real y cuento los pasos. Un sistema con un buen campo de texto y un buen botón puede dar un formulario lento.
Por eso el sistema necesita patrones para tareas completas, además de piezas sueltas.
Qué falta
Los equipos construyen lo que no encuentran. La lista de esas piezas a medida enseña qué debe incluir el sistema a continuación.
La orientación va antes que los componentes
Después de este estudio escribo la orientación. Es un documento corto para quienes construyen el sistema. Dice:
- Qué necesidades de producto van primero, con la evidencia de cada una.
- Qué decisiones debe tomar el sistema por los equipos, para que no las repitan en cada proyecto.
- Qué flujos necesitan un patrón común, con la versión más corta que queremos.
- Qué debe dejar abierto el sistema, porque los productos son distintos por buenos motivos.
Esto enlaza con el trabajo de estrategia que va antes de cualquier diseño. El método es el mismo. El cliente es el equipo de producto.
He trabajado estas decisiones con el lead designer y con mi manager. Quienes construyen los componentes empiezan así con una lista clara de problemas. Ellos eligen la mejor solución, que es lo que mejor saben hacer.
Señales de que el rediseño funciona
Un design system no vale nada hasta que los equipos lo usan. Yo miro estas señales:
- Los equipos usan los componentes sin cambiarlos.
- Una pantalla nueva se diseña y se programa en menos tiempo.
- La misma tarea funciona igual en productos distintos.
- Los equipos piden mejoras a través del sistema. No construyen por fuera.
Recoge estas señales desde el principio. Enseñan cuál es el siguiente problema y explican el valor del sistema a quien lo paga.
Por dónde empezar mañana
Elige dos productos reales que usen tu design system. Sigue una tarea completa en cada uno. Apunta cada sitio donde el equipo ha cambiado un componente o ha construido uno nuevo, y pregunta por qué.
Esa lista es el principio de tu rediseño. Vale más que un archivo de librería nuevo, porque sale del trabajo real.
Infografía
El orden de un rediseño de design system. Los componentes llegan en el cuarto paso. 1. Define los objetivos: Dos o tres, acordados con el negocio. 2. Estudia los productos reales: Qué necesitan del sistema los equipos, tarea a tarea. 3. Escribe la orientación: Qué necesidades van primero y qué decide el sistema para todos los productos. 4. Construye: Componentes, y patrones para tareas completas como iniciar sesión o pagar. 5. Mide el uso: ¿Usan los equipos los componentes sin cambiarlos? Escribe la orientación antes de cambiar un componente.
Preguntas y respuestas
¿Qué es rediseñar un design system?
Es revisar los componentes, patrones y reglas comunes que usan los equipos de producto para construir interfaces. Un buen rediseño cambia lo que el sistema resuelve a esos equipos. Cambiar solo el estilo visual es un lavado de cara.
¿Quién debe orientar el rediseño de un sistema de diseño?
Alguien que conoce los productos que usan el sistema y el negocio que hay detrás. Esa persona trabaja con quienes diseñan y programan los componentes y les lleva las necesidades de los productos reales.
¿Cómo se sabe si un design system funciona?
Los equipos de producto lo usan sin cambiarlo, las pantallas nuevas se diseñan y se programan en menos tiempo y la misma tarea se ve y funciona igual en todos los productos. Pregunta a los equipos y mira sus archivos y su código.