¿Cómo diseñar un Design System? Así creamos nosotros Junipero.
Junipero es el Design System o Sistema de Diseño de Poool y nuestro episodio favorito de Black Mirror 😊. Tan pronto como nuestro producto comenzó a crecer debíamos asegurarnos que creciera de manera escalable, consistente y eficaz. Es por ello que decidimos crear nuestro propio Design System o Sistema de Diseño.
Parte I: Entremos en contexto.
La manera más simple de entender qué es un Design System es viéndolo como un lenguaje de diseño, una manera que tienen los productos digitales (sus interfaces), para comunicarse con las personas.
Sin embargo, un Design System también es útil para colaborar de manera efectiva entre los integrantes de un equipo de producto ya que se comparte el mismo lenguaje. Tener un lenguaje compartido significa que todos los miembros del equipo van a utilizar los mismos términos para dirigirse a cada elemento de un producto y que todos comprenden la finalidad de cada elemento creado para poder establecer normas y una comunicación eficaz entre la imagen del producto (interfaz) y los modelos mentales de los clientes (percepción de la interfaz formada por el usuario al interactuar con ella). Esto también significa que tanto los archivos de diseño como la arquitectura front-end utilizan las mismas nomenclaturas.
Entonces, ¿qué es exactamente un Design System?
Un Design System o Sistema de Diseño es un lenguaje centralizado que consta de un conjunto de patrones perceptuales y funcionales que están interconectados, traducidos en código y guiados por normas específicas para que se utilicen de manera coherente y eficaz sin perder el objetivo del producto digital.
Los patrones son la repetición de elementos que combinados crean una interfaz: user flows, interacciones, botones, campos de textos, tipografía, textos (copy), etc. Mientras que las normas son la explicación de cómo esos patrones han sido creados, cuáles son sus objetivos, cómo se deben plasmar, compartir y ensamblar en la interfaz de manera coherente y eficaz.
Es muy importante resaltar que los Sistemas de Diseño no son estáticos (por ejemplo un pdf), son más bien dinámicos (códigos), ellos pueden mostrar los componentes, los design tokens, el lenguaje utilizado, los marco de trabajo y las normas de marca y UX de un producto para que todos los integrantes de un equipo los puedan utilizar de manera practica y eficiente.
Beneficios de un Design System
Los Design System están teniendo mucha aceptación porque los beneficios son múltiples a la hora de crear un producto. Algunos de estos beneficios son:
- Se diseña más rápido porque todos los elementos y patrones están disponibles en el sistema.
- Hay más cohesion en el equipo de producto porque todos crean a partir de un mismo lenguaje y las iteraciones terminan siendo más cortas y efectivas.
- El producto es más consistente porque se corrigen todos los patrones y librerías de código que tienen problemas de semántica y pragmática.
- Se reducen los costes porque la información está centralizada y el tiempo de diseño UI, implementación y toma de decisiones se reducen.
- La optimización es parte del proceso porque se trabaja más rápido dejando espacio para mejorar el producto constantemente.
- Facilita la escalabilidad porque el lenguaje está automatizado así que se puede aumentar la actividad sin perder calidad ni aumentar los costes.
Se puede decir que un Design System es efectivo cuando todas las partes de un producto funcionan de manera coherente y eficiente entre sí, cuando se reducen los costos de producción (diseño y front-end) y cuando se mejora la satisfacción cliente (experiencia de usuario).
Parte II: ¿Cómo diseñar un Design System?.
“Más del 70% de las empresas que han creado su Design System confirman que aprendieron a crearlo de manera autodidacta, leyendo artículos sobre Sistemas de Diseño.” —Investigación realizada por Sparkbox.
Y es así como nosotros creamos Junipero, a partir del análisis de otros Sistemas de Diseño y siguiendo algunos de los pasos del libro “Design System” editado por el conocido blog: Smashing Magazine.
Antes de comenzar a diseñar un Design System tenemos que tener en cuenta:
- La madurez del producto (MVP, en comercialización, ya posicionado en el mercado, etc.).
- Si la empresa de verdad necesita un Design System 🤔.
- La estrategia de producto.
- Y, ¿cómo es el ecosistema del equipo de producto?.
No es lo mismo diseñar un Design System para una startup con un MVP o Mínimo Producto Viable (a priori no lo necesita) y con un equipo reducido, al de una empresa como IBM que tiene muchos productos, interlocutores y equipos que trabajan a distancia a lo largo del mundo. Sin embargo, los pasos a seguir para diseñar un Design System son los mismos para todas las organizaciones sin importar si son muy grandes o no, lo que cambia es la estrategia de producto, las necesidades de los equipos de trabajo, la documentación existente, el tiempo de creación y sobre todo, el tiempo de mantenimiento del sistema.
En Poool, somos un equipo de producto reducido y trabajamos todos en el mismo lugar (ecosistema). Sin embargo, nuestro producto que es un Paywall Dinámico se consume en masa (ya posicionado en el mercado). El año pasado la cifra de impresiones de nuestro Paywall Dinámico alcanzó las 30 millones de personas por lo cual crear un Sistema de Diseño se hacía urgente para mantener la consistencia y escalabilidad de nuestro producto (estrategia). Entonces, teniendo claro todos los aspectos anteriormente citados, si tu empresa necesita un Design System y cumple con un objetivo de negocio no queda más que ponerse manos a la obra 😊.
Pasos que seguimos para crear Junipero:
1- Definimos quiénes intervendrían en la creación de Junipero y asignamos los roles.
Esta etapa es importante porque va a permitir delimitar quién hace qué. En nuestro caso decidimos que dos personas se dedicarían por completo a la creación de Junipero: Ugo y yo, principalmente porque representamos los dos polos del equipo de producto: ingeniería y diseño UX/UI. Esta decisión permitió liberar al resto del equipo para enfocarse en los productos de la empresa y nos permitió a nosotros liberar el tiempo necesario para concentrarnos en la creación de Junipero. Por supuesto, el resto del equipo intervenía en su creación aportando sus habilidades de manera puntual en las diferentes etapas.
Nosotros utilizamos Jira para la gestión operativa de Junipero. Esto nos ayudó a visualizar una organización clara para la creación del sistema, resumir el progreso, tomar decisiones, obtener más información y decidir los siguientes pasos a realizar.
2- Definimos quiénes son nuestros usuarios.
La mayoría de los Sistemas de Diseño son para que los equipos de producto lo utilicen. No obstante, como cualquier otro producto debemos estar seguros de cubrir las necesidades, prioridades, aspiraciones y amenazas de los usuarios. Para realizar esta fase de investigación trabajamos en esto dos puntos:
- Evaluar la perspectiva, hábitos y prácticas existentes dentro del equipo de producto y de cada uno de los integrantes.
- Examinar para qué y cómo utilizarían los integrantes del equipo Junipero.
Para realizar este trabajo utilizamos la herramienta de comunicación Slack. Abrimos un canal llamado #junipero para comunicarnos con los integrantes del equipo de producto y obtener la información deseada.
Existen muchas herramientas de investigación (mapas de experiencia, focus group, cuestionarios en línea, etc.), que se pueden utilizar en esta etapa, según los procesos de trabajo de tu empresa los puedes adaptar.
3- Decidimos el naming y creamos el logo de nuestro Design System.
Para encontrar el nombre de nuestro Sistema de Diseño realizamos un brainstorming. Una de las propuestas que nos gustaba era Junipero un capítulo de Black Mirror, que en realidad se titula “San Junipero”. Todo el equipo de producto hicimos una sesión de Netflix juntos para ver este capítulo y al final todos estuvimos de acuerdo en colocarle este nombre 😊.
Para la creación del logotipo más bien nos inspiramos en el parque Junipero Serra Park en San Francisco, USA. Las líneas del logo representan las capas topográficas que forman esta sierra así como los elementos que forman el Sistema de Diseño Junipero.
4- Revisamos toda la documentación del producto actual disponible.
Una vez que teníamos nuestra identidad visual diseñada pasamos a la creación de un inventario UI que contenía todos los elementos que conformaban en aquel momento nuestro producto: listas, botones, campos de textos, tipos de texto, menús, cards, descargadores, modales y un largo y extenso etc. Esta es la base para poder auditar absolutamente todos los componentes de nuestro producto. Realizando este trabajo podemos:
- Determinar si algo está obsoleto o no cumple con su funcionalidad.
- Evaluar las inconsistencias perceptuales y funcionales para corregirlas.
- Evaluar dónde existen fricciones en la experiencia de usuario para corregirlas.
- Tomar decisiones sobre qué elementos deben quedarse o cuáles se deben rediseñar.
- Saber qué elementos nuevos nos hace falta crear.
- Documentar toda esta información para que sea accesible a todo el equipo de producto y para las siguientes etapas.
El inventario UI es una de las etapas imprescindibles a la hora de crear un Design System. La recomendación más popular para crear un inventario de este tipo es realizar capturas de pantallas de absolutamente todos los elementos del producto y colocarlas en una herramienta de colaboración como Google Docs para que se pueda compartir y editar. Nosotros hicimos esto y la verdad fue mucho más rápido y eficaz sobre todo porque nos dimos cuenta que al hacer las capturas de pantalla los elementos del producto existente muchas veces no eran iguales a los elementos que estaban en los archivos de diseño por lo cual trabajar a partir de los archivos de diseño no es una buena practica en este caso.
5- Creamos la arquitectura web de nuestro sistema y compramos nuestro dominio junipero.design 💚.
El inventario UI nos ayudó a reunir todos los elementos existentes y nos permitió visualizar cómo debíamos organizarlos dentro de nuestro sistema haciendo posible la creación de una arquitectura web más coherente. Creamos una estructura que se pueda evolucionar fácilmente, es decir, que se pueda quitar o añadir elementos, patrones o secciones de página de manera simple sin tener que rediseñar de nuevo la estructura web y sobre todo lo que fue clave para nosotros es agrupar todos los elementos según tipo de acción (tipo de interacción del usuario con la interfaz).
En esta etapa es importante tomar en cuenta cómo ensamblando los elementos podemos formar el producto (interfaz), ya que con esta comprensión podemos organizar de manera congruente nuestra arquitectura web para que el sistema sea fácil de usar por todos los integrantes del equipo.
6- Diseñamos la interfaz de Junipero.
Una vez que teníamos la arquitectura web validada por todo el equipo de producto creamos un kit UI de la interfaz de junipero.design para que se pudiera ir integrando y enlazando con la biblioteca de JavaScript que ya se había comenzado a registrar en nuestro repositorio de Git.
7- Aclaramos la base, la identidad visual de Poool.
Apenas comenzamos a chequear los elementos de nuestro producto nos dimos cuenta que en los archivos de diseño los colores se llamaban de una manera diferente que en las librerías de código, que las paletas no eran las mismas en todo los casos, que la tipografía no era consistente a lo largo del producto o que no estaba claro el uso de la marca en el ecosistema digital. Es por ello, que tuvimos que empezar por la base: establecer el uso del logotipo, crear una paleta de colores con una nomenclatura única, establecer las reglas de uso de la tipografía y determinar el uso y la creación de las ilustraciones.
Esta fase fue como crear una guía de marca solo que es totalmente dinámica. Para la creación de la nomenclatura de los colores de nuestra paleta utilizamos esta herramienta: Name that Color.
8- Creamos una nueva librería UI del producto con todos los elementos corregidos.
Creamos un nuevo documento en Sketch que nosotros llamamos “Junipero Design Kit 1.0” y ayudándonos con el inventario UI pudimos comenzar a chequear todos los elementos uno por uno para corregirlos. Se deben revisar todas sus propiedades (color, dimensiones, tipografía, etc.) y ver si al ensamblarse unos con otros se crean patrones e interfaces consistentes y coherentes.
En esta etapa no es solo importante corregir la percepción de todos los elementos del producto (color, tipografía, tamaños, etc.) si no también su función (percepción de la interacción), además hay que darles un nombre apropiado a cada elemento para que todos en el equipo lo utilicen. Lo más fácil para crear la nomenclatura es hacer una sesión todos juntos y decidir los nombres de cada elemento.
El archivo “Junipero Design Kit 1.0” se puede utilizar como una librería en el programa Sketch. Por lo cual cualquier diseñador UX o visual puede crear nuevas pantallas o prototipos a partir de él manteniendo así la consistencia y eficacia del producto Poool.
Si deseas saber cómo construir desde cero los elementos de un sistema, existe una metodología que se llama “Diseño atómico” que es la más popular y es la que nosotros utilizamos 😉.
9- Testeamos los elementos y los patrones de diseño.
Para asegurarnos que todos los elementos que habíamos corregido eran consistentes y coherentes entre sí realizamos algunas pruebas internas para verificar que todo funcionaba de manera coherente.
Las incoherencias son diferentes a las inconsistencias. Por más que unifiquemos todos los elementos (color, tipografía, tamaños, etc.), paradójicamente la consistencia no asegura una buena experiencia de usuario. Muchas veces por contexto (circunstancias de uso) los componentes no deben ser consistentes si no coherentes y esto solo se puede detectar y arreglar haciendo pruebas de usabilidad y observando en qué parte del user flow existe este tipo de incoherencias. Nosotros creamos prototipos rápidos dentro de Sketch construyendo ciertas pantallas claves del producto con la librería “Junipero Design Kit 1.0” y probar si efectivamente todo funcionaba eficazmente antes de pasar al código.
10- Se tradujeron los elementos en librerías de códigos.
Una vez que la fase v1 de diseño UI/UX estaba lista se actualizaron y tradujeron todos los elementos (con sus respectivas nomenclaturas) en React que es una librería de JavaScript de código abierto. Esta librería está compuesta por los llamados Design Tokens (archivos JSON) que son propiedades únicas de: colores de texto, colores de fondo, colores de borde, tamaños de fuente, espaciado, radios de borde, etc.
La versatilidad de los Design Tokens es que si se necesita cambiar el diseño de un elemento del sistema es tan simple como editar el valor de un elemento (su archivo JSON) o crear una nueva versión del mismo en su repositorio de Github y él mismo como se encuentra alojado en una única ubicación este se conecta en cascada a todas las plataformas del producto por lo cual la actualización se hace a lo largo del mismo. Esta es la muestra de que un Design System es dinámico o está “vivo” como les llaman algunos.
React es hoy en día es una de las librerías de código más utilizadas, extendidas y con gran soporte de la comunidad a la hora de crear Sistemas de Diseño ya que es muy intuitiva. Los componentes se llaman unos a otros con un flujo unidireccional (de arriba a abajo) permitiendo entender y solucionar fácilmente los errores con los que nos podamos encontrar a lo largo del sistema.
11- Lanzamos Junipero ⚡.
Mostrar nuestro Design System fue tan importante como crearlo. Explicar al resto del equipo (ventas, marketing, etc.) para qué sirve y qué beneficios trae a la empresa fue todo un caso de éxito. No solo entendían mejor lo que está detrás de un producto (interfaces) o de los roles que tienen las personas que producen ese producto (diseñadores e ingenieros), si no que también se convirtió en un argumento de venta, en un argumento para llamar la atención de talentos, en un argumento de imagen de marca y en un argumento para los inversores 🤑 win-win.
Por último, el mantenimiento de los Sistemas de Diseño.
Si bien es cierto que realizar un Design System equivale a crear un producto, mantenerlo también. La diferencia es que el Design System es el producto. Mantener un Sistema de Diseño solo quiere decir que nuestro producto se está mejorando constantemente. Los Design Systems además van madurando con el tiempo y Junipero (Poool) ahora es que le quedar seguir creciendo 😊😁.
Lo que deberías saber
👉🏻 La creación de un Design System en una organización se convierte en un lenguaje compartido impulsado por las personas y sirviendo a las personas (diseño centrado en el usuario).
👉🏻 Un Design System no es una librería de estilos. Pero la realidad es que una librería de estilo forma parte de un Design System.
👉🏻 Un Design Sytem es parte de la estrategia de un producto.
👉🏻 Un Design System libera a los diseñadores y a los ingenieros a estar más focalizados en la visión y la experiencia de usuario del producto.
¡Gracias por leer! Si te ha gustado el artículo no te olvides de aplaudir 👏, compartir o considerar seguir el blog Diseño UX en español.
Mi nombre es Daniela Peñaranda y soy head of design en Poool. Me gusta escribir para compartir ideas y expandir la información en español. Si quieres saber más sobre la creación de Sistemas de Diseño no dudes en contactar conmigo 😉:
Linkedin / Twitter / danielapenaranda.com
:Daniela
Enlaces interesantes:
