Período 2020-2025
Un sistema de diseño no se escala solo construyendo componentes. Se escala cuando logra ser adoptado, medido y sostenido en el tiempo.
Este artículo recorre aprendizajes reales sobre cómo evolucionó un sistema de diseño en un contexto complejo, y qué métricas ayudaron a tomar mejores decisiones a lo largo del camino.
En agosto del 2020 decidí sumergirme al desafío de trabajar para una multinacional que estaba gestando su sistema de diseño Global, Santander. El equipo de UX argentina iba creciendo a la par de las necesidad de tener lineamientos de marca y de interfaces distribuido en todos los países del grupo.
En ese entonces nace la primer versión de Flame, el sistema de diseño global de Santander. compuesto por lineamientos generales de marca, componentes, contenido, micro-interacciones y un sistema de ilustraciones. A su vez, Estaba a disposición la librería de diseño no así los componentes desarrollado. Conceptualmente funcionaba como las mamushkas, dónde la más grande representaban los lineamientos globales y las más chiquitas a los países, cada uno adoptaba los lineamientos que le servían para las plataformas locales.
Año 2020 disponibilizamos la librería de diseño. También definimos cuáles eran los componentes esenciales cross para todos los equipos que íbamos a desarrollar. A partir de acá empezó el verdadero trabajo de conjugar construcción, adopción y medición del sistema de diseño.
A principios del 2021 hicimos el primer realase de desarrollo que contenía las Fundations. Llevamos a cabo una estrategia de comunicación que consistía en charlas abiertas para todo Santander Tecnología y encuentros particulares a equipos de desarrollo y UX con el objetivo de dar a conocer al sistema de diseño y profundizar en temas técnicos para su implementación.
<aside> <img src="/icons/star_gray.svg" alt="/icons/star_gray.svg" width="40px" />
El verdadero trabajo empezó cuando dejamos de pensar solo en construir y empezamos a pensar en adopción.
</aside>
El primer método de medición que decidimos llevar a cabo fue una encuesta de adopción y utilidad para el equipo de UX y los equipos de desarrollo. La encuesta la mandábamos cada tres meses y nos aportaba información tal como uso del sistema de diseño en proyectos, qué componentes consumía más y qué dificultades tenían en la implementación también aprovechábamos a recolectar información sobre las necesidades de los equipos para priorizar la construcción. Si Bien la información era muy valiosa y nos ayudaba a hacer crecer el producto tenía sus dificultades. Un desarrollador podía indicar que esta utilizando componentes para la creación de una experiencia que no se llegó implementar en el momento que mandábamos la encuesta entonces por un lado teníamos un desfasaje entre la adopción, la implementación y por el otro no podíamos darle seguimiento a que realmente esa experiencia este producción y sea percibida por el usuario.
Otra dificultad era la muestra que obteníamos, variaba la cantidad de respuestas Q a Q, y no nos permitía tener un baseline solido.
Este año también se destacó por la migración que hicimos de Skecht a Figma, Mas Allá de todo el proceso que hicimos para que el equipo esté preparado y pueda utilizar la nueva herramienta, empezamos a ver las métricas que nos ofrecía para entender qué componentes eran los más utilizados en diseño y la cantidad de componentes que sufrían modificaciones a través del detach.
<aside> <img src="/icons/star_gray.svg" alt="/icons/star_gray.svg" width="40px" />
Medir adopción sin mirar producción puede generar una falsa sensación de impacto.
</aside>
Comenzando el año 2022 nos encontraba con todos los componentes de formulario desarrollados y construyendo el componente más importante para las plataformas del banco que son las tablas.
La adopción había escalado y Flame estaba siendo usado por muchos equipos. Teníamos la necesidad de tener información exacta del universo en donde Flame estaba haciendo efectivo entonces nos juntamos con el equipo arquitectura y creamos un script para obtener información en producción sobre la cantidad de iniciativas frontend en las distintas tecnologías. Resultó ser que de todos un total proyectos frontend 129 estaban hechos en angular, 511 en react de los cuales 268 habían sido creados por Flame. También , nos permitió saber en que versión de la librería se había creado el proyecto. Cómo el script se encontraba en proceso de iteración, todavía seguíamos obteniendo información de la encuesta.