Creando un Sistema de Diseño en el banco más grande de Colombia: Bancolombia
El punto de partida nace de varios retos: ser más eficientes diseñando experiencias coherentes y consistentes, y mejorar la articulación entre los equipos de diseño / desarrollo de diferentes experiencias para favorecer el re-uso de activos de diseño.
Entendamos qué es un Sistema de Diseño
Los usuarios de las experiencias necesitan coherencia y consistencia.
El negocio necesita eficiencia y calidad escalada para sus diseñadores, desarrolladores y las experiencias que estos crean.
Y en especial la eficiencia para que los diseñadores tengamos el tiempo de investigar, innovar, experimentar, evaluar y evolucionar las experiencias cada día con mayor calidad.
Pero entonces ¿qué es un Sistema de Diseño?
¿Es una guía de estilos? ¿Es un montón de componentes hechos en código y construidos como lego? ¿Es documentar el diseño? ¿Es un UI Kit? ¿Es una librería?
Entendamos que los sistemas de diseño son más que solo diseño visual.
Es una comunidad que se articula a través de componentes reutilizables, guiados por estándares y lineamientos flexibles que pueden ensamblarse para construir cualquier experiencia.
Los sistemas de diseño están vivos y en constante evolución
¿Quiénes han hecho un pastel?
Necesitamos:
- Ingredientes
- Utensilios
- Cocineros
- Receta
Ahora imaginemos que tenemos un negocio que hace 1.000 pasteles al día, con diferentes equipos se vuelve insostenible, pero si les damos la base para que con los mismos ingredientes y utensilios guiemos a las personas con la misma receta a crear el mismo pastel y además les permitimos innovar con nuevos pasteles, ese es el camino.
¿Cómo creamos el Sistema de Diseño en Bancolombia?
Comenzar un sistema de diseño puede parecer abrumador. Hay tantas cosas a considerar: la marca, el estilo de diseño, cómo diseñar para modularidad y escalabilidad, cómo será utilizado por los equipos, cómo vender la idea a los tomadores de decisiones en la empresa. ¿Por dónde empezar?
Nuestro objetivo en Bancolombia es orquestar el diseño de experiencia físicas y digitales a través de estándares flexibles que permitan a más de 160 diseñadores en 40 equipos de trabajo y más de 1.000 desarrolladores crear soluciones partiendo de una base transversal validada para proponer evoluciones a la experiencia y la práctica.
Todo esto teniendo en cuenta una marca corporativa como lo es Grupo Bancolombia con presencia en la región a través de las marcas Banitsmo (Panamá), Banco Agrícola (El Salvador), Bam (Guatemala). Primer paso: empezar en Bancolombia (Colombia) en donde más se concentraba la capacidad de diseño.
Una buena base: equipo, gobierno y entrenamiento
El modelo de equipo que une a las personas y asegura dinámicas es tan importante como el equipo que crea el sistema de diseño. Nathan Curtis describe 3 modelos de equipo utilizados por muchas empresas. Solitario, centralizado o federado. En nuestro caso aplicamos un modelo híbrido.
En una organización tan grande como Bancolombia, un equipo de sistemas de diseño centralizado o solitario no fue suficiente por sí solo. Con tantos actores clave involucrados y la transversalidad que teníamos que cubrir a través de productos y plataformas, necesitábamos un enfoque más sostenible.
Al determinar qué modelo de equipo funciona para ti, considera tus metas.
¿Moverse rápido?, ¿mayor participación y propiedad compartida?, en cualquier caso, involucra desde el principio a personas y áreas comprometidas con su mantenimiento y evolución.
Además de considerar la estructura y el gobierno del equipo deberás tener en cuenta los tipos de diseño que quieras cubrir: macrodiseño y microdiseño. Así identificarás los retos que sean específicos a interfaces e interacciones y otros que puedan responder a dinámicas entre equipos.
Es importante tener en cuenta la asignación de un equipo dedicado para garantizar la evolución y el soporte del sistema. Nielsen Norman Group sugiere un equipo mínimo conformado por: 1 diseñador UX (Senior), 1 diseñador UI (Senior) y 1 Desarrollador Front.
Dependiendo del tamaño del reto vas a necesitar más que diseñadores. Necesitarás articular diferentes actores de la organización que permitan fortalecer los estándares de diseño con lineamientos técnicos y funcionales de la organización (marca, canales, tecnología, etc.)
Para esto es vital tener en cuenta los siguientes roles:
- Diseñadores (Investigadores, Servicios, Interacción, Copy, Visuales) para definir los elementos del sistema.
- Desarrolladores front-end para crear código modular y eficiente.
- Expertos en accesibilidad para garantizar que tu sistema cumpla con estándares como WCAG.
- Estrategas de contenido que pueden ayudar al equipo a captar la voz y el tono del sistema.
- Expertos en rendimiento que pueden garantizar que el sistema se cargue rápidamente en todos los dispositivos.
- Gerentes de producto para garantizar que el sistema esté alineado con las necesidades del cliente, empleados y negocio.
- Líderes (vicepresidentes y directores) para movilizar y alinear la visión en toda la empresa, incluido el liderazgo ejecutivo.
Definir: diseñar el diseño
Al igual que con cualquier proceso de diseño, es muy importante investigar. ¿Quiénes usarán el sistema de diseño y cómo lo usarán? ¿Saben que es un sistema de diseño? ¿Qué plataformas usan? ¿Aliados externos? ¿Buenas prácticas?
Iniciamos una investigación exhaustiva con todos los equipos que participan del sistema: diseñadores, desarrolladores, lideres técnicos y funcionales entre otros, para entender esas necesidades y dolores, que se pudieran convertir en oportunidades y así visualizar las metas y el camino a recorrer juntos.
Realizamos una auditoría a nuestras experiencias digitales para determinar sus estados en términos de madurez en definiciones visuales de todas las interfaces. Es vital reconocer las experiencias existentes y las iniciativas en backlog para estimar impactos desde nuevas definiciones y así determinar la mejor manera de implementación según la prioridad en canales, productos, servicios, etc.
Usamos de manera consistente y coherente el lenguaje de marca y la identidad visual, definiendo tonalidades de nuestros colores para poder crear experiencias accesibles. De igual forma optimizamos los estilos de texto para todas las experiencias, establecimos parámetros de uso de iconografía y pictogramas, uso de ilustraciones en temas dark y light, todo encajando en grillas para alojar con pixel perfect los diseños que viven nuestros usuarios en los diferentes navegadores y dispositivos.
En este camino aprendimos la importancia de una constante articulación del sistema de diseño, sus librerías y definiciones con la evolución continua de la marca para asegurar la consistencia y coherencia en diferentes tipos de experiencias, tanto físicas como digitales.
Esta sincronía impacta de manera transversal al sistema, como lo es la selección de la plataforma adecuada para alojar los activos de diseño de la cual depende la facilidad en la operación. Teniendo en cuenta esto y otras variables como un análisis financiero y de estructura, decidimos migrar de Invision y Sketch a Figma. Esta migración además de darnos orden nos permitió seguir amplificando el impacto en diferentes equipos de la organización.
Estructurar
La metodología de diseño atómico de Brad Frost fue un referente para crear y reutilizar los tokens y atributos de la interfaz de usuario en varias librerías multimarca.
Construimos las librerías de estilos y componentes.
Organizamos las librerías en foundations de marca, experiencias web, mobile y físicas permitiendo evolucionar los diferentes puntos de contacto.
Agrupamos y organizamos componentes similares en uno solo, simplificando la librería con variantes para facilitar su búsqueda.
Conectamos las experiencias diseñadas identificando flujos transversales para construir patrones y lineamientos que favorezcan la eficiencia y coherencia sin afectar la consistencia, generando más valor para nuestros usuarios y el negocio.
Documentar
Definimos una forma para documentar todos los estilos y componentes de nuestra librería. Esta base nos ha permitido evolucionar y comunicar de manera constante y organizada nuestros estándares y buenas prácticas con todos los equipos.
Detallamos la información relacionada con el uso, variantes, ejemplos, tipos, implementación, accesibilidad, estilos y patrones a utilizar en las diferentes experiencias.
Fue esencial documentar nuestro pensamiento y mejores prácticas para elementos, componentes y patrones. De esta manera, tanto diseñadores como desarrolladores conocen cómo se debe usar el sistema.
Diseñar pensando en accesibilidad nos permitió crear experiencias inclusivas, que tomen en cuenta posibles usuarios, tecnologías de asistencia, alto contraste, ARIA, lectores de pantalla y que puedan responder a normativas internacionales.
Implementar
Proporcionamos convenciones, patrones y ejemplos de cómo los equipos deben abordar su código.
Estos estándares y pautas ayudaron a que los equipos de desarrolladores no tengan que preocuparse por refactorizar código descuidado e inconsistente. Es indispensable la cercanía con desarrollo para asegurar la evolución del sistema de diseño.
Las buenas prácticas en el desarrollo frontend permitieron generar coherencia en la codificación para establecer servicios de backend conectados y escalados entre las experiencias.
Evolucionar
Nuestro modelo de trabajo permite que los diseñadores y diseñadoras que utilizan las librerías contribuyan desde su contexto, enriqueciendo el sistema con casuísticas de diseño desde diferentes soluciones digitales que demandan la creación y evolución de uno o más activos tangibles.
Crear el proceso de contribución correcto es un viaje que no terminará, así que no hay que desanimarse si se encuentra desafiante. Es más una maratón, no una carrera.
En los sistemas de diseño maduros se espera ver altos niveles de adopción, promoción, contribución y participación. Ten en cuenta que existen diferentes tipos de aportes al sistema que varían en esfuerzo, costo y complejidad. Algunos de ellos movilizan decisiones estratégicas para la experiencia, la marca y la conexión con desarrollo desde la transversalidad de los impactos en productos, servicios y canales; un ejemplo de esta situación puede ser la creación de estándares técnicos para favorecer la accesibilidad.
Para que la contribución al sistema sea parte del día a día de los equipos y no una tarea más, el proceso debe ser fácil, rápido y conocido por todos los participantes. Es clave solicitar información precisa y solo la realmente necesaria, así como establecer dinámicas de revisión de los aportes para asegurar acuerdos bajo estándares transversales.
Para favorecer la adopción de los modelos de contribución es vital dar acompañamiento y capacitación a los diferentes usuarios del sistema asegurando la claridad en roles, responsabilidades y atribuciones que aseguren la articulación, consistencia y sostenibilidad en la evolución del sistema.
El equipo administrador debe actualizar de manera constante los contenidos formativos para que los usuarios del sistema aprendan cómo evolucionarlo desde el soporte y la contribución.
Con el crecimiento del equipo de diseño de experiencia Bancolombia nos retamos a entender y medir cómo el uso del sistema genera impactos positivos en diferentes dimensiones que van mas allá de diseño visual en sí. Bajo la metodología del “Balance Score Card” de Kaplan y Norton (negocio, clientes, procesos internos y aprendizaje) se identificó que el uso del sistema de diseño visual genera:
Retorno de la inversión en un 126% ROI
Aumento en la calidad de la experiencia clientes en un 26%
(↑19.8% Usabilidad, ↑39.1% Consistencia, ↑47.2% Accesibilidad)
Eficiencia del 46% en procesos de diseño:
(31% Eficiencia tiempo de trabajo, 15% Eficiencia por reprocesos)
Velocidad en el aprendizaje y crecimiento:
10 meses disminución curva de aprendizaje.
2X Incremento en la satisfacción de diseñadores y diseñadoras en su operación.
Hemos estado trabajando en equipo para ajustar y refinar nuestro proceso durante los últimos cuatro años y continúa mejorándose a medida que aprendemos más sobre nuestros consumidores, su entorno y sus necesidades.
Aprendizajes en el camino
Desde nuestro conocimiento y experiencia al vivir todo este proceso durante 5 años en Bancolombia podemos concluir que:
- El sistema de diseño son las personas y equipos que lo conforman.
- El sistema evoluciona con la participación de sus usuarios desde las diferentes necesidades del negocio, mediante un modelo de contribución.
- Las plataformas de diseño cambian con el tiempo, las librerías están en constante evolución.
- Evidenciar el valor de un sistema de diseño y los impactos positivos que genera en el negocio convierte a actores en sponsors.
- Medir la coherencia, calidad y velocidad que genera el sistema en la creación y evolución de experiencias asegura conexiones mas allá del diseño que amplifican el valor y sostenibilidad de los activos.
¿Qué sigue?
Consideramos que es necesario que los sistemas de diseño sean más abiertos y que cualquier persona en una empresa lo pueda usar, no solo diseñadores o desarrolladores.
Al usar avances en tecnología como reconocimiento de patrones podemos hacer que un dibujo a mano se interprete en un concepto de interfaz .
Evolucionar la articulación con otros conocimientos que se vinculen desde la visión sistémica (front, back, Apis) para aumentar la adopción en los equipos y fortalecer la consistencia en la experiencia de principio a fin y del front al back.
Seguir aprendiendo de este maravilloso camino al construir un Sistema de Diseño en el banco más grande de Colombia.
Referentes
(Artículos) https://www.designsystems.com/
(Artículos) https://medium.com/@nathanacurtis
(Noticias) https://designsystemsrepo.com/
(Noticias) https://news.design.systems/
(Libro) https://www.designbetter.co/design-systems-handbook
(Libro) https://designsystemfoundations.com/
¡Hola!, soy Juan Morera, Diseñador Visual Senior con experiencia en diseño de sistemas, experiencia e interfaz de usuario, apasionado por el mundo digital y la innovación, siempre enfocado en el diseño centrado en el usuario para obtener un solución efectiva y alcanzar los objetivos de negocio propuestos. Actualmente trabajo para diferentes iniciativas de Bancolombia, el banco más grande de Colombia.
¡Hola!, soy Jorge Restrepo Giraldo, Líder de la evolución del diseño de experiencia en Bancolombia. Apasionado del diseño centrado en y para las personas en todas sus expresiones.
