Esta entrada muestra cómo logramos en el Banco de Bogotá implementar un sistema de diseño para maximizar nuestro talento, estandarizar nuestras soluciones respecto a la marca, reutilización de componentes y mejora en la productividad. Sherpa BdB (Sitio público)
En el momento que arrancamos la transformación digital en el Banco éramos consientes que en muchos productos y canales estábamos re inventándonos la rueda. Fue un trade-off priorizando la entrega de valor en cada solución que implementábamos.
Cada vez que asistíamos a un review de un equipo ágil veíamos problemas de diseño similares en cada producto generado. Nuestro feedback se estaba convirtiendo en pequeños detalles de tamaños, tipos de letra, colores, etc. Eramos consientes que en algún momento íbamos a implementar un sistema de diseño que nos permitiera estandarizar los fundamentos gráficos y de paso realmente reutilizar componentes en una operación similar a un drag&drop de una librería de assets.
El desafío de establecer un sistema de diseño
En el momento que escalamos nuestros equipos e iniciativas tomamos la decisión de implementar nuestra sistema de diseño. Nos pusimos como meta implementar la estrategia de Building blocks y como parte clave de esto nació Sherpa para lograr lo siguiente:
- Establecer patrones y prácticas de diseño para definir aspectos a considerar en las interfaces de usuario a generar de forma coherente y organizada.
- Reutilización de funcionalidades de front-End.
- Modularidad permitiendo componer desde una unidad mínima a componentes más complejos. Enfoque basado en diseño atómico.
- Reglas que nos permitieran gobernar la construcción de componentes visuales a través de la alineación de principios.
- Integración de equipos de UX-UI con equipos de desarrollo de front-end. Esto es clave precisamente no solo para reutilizar funcionalidades de diseño sino para poder crear una librería completa de componentes visuales que implementen el diseño atómico para que los desarrolladores aceleren la construcción de soluciones en diversas tecnologías.
- Gobierno de componentes promoviendo modelos colaborativos tipo Código abierto.
- Ciclo de vida de código para promover la contribución de colaboradores.
Así nació Sherpa BdB (Sitio público) como el sistema de diseño del Banco.
 |
 |
 |
Principales desafíos
- Estandarizar los principales fundamentos de diseño: colores, espaciado, iconos, logos, pictogramas, retículas y tipografías.
- Desarrollar una librería de componentes de software agnóstica. El foco fue soportar las dos principales tecnologías utilizadas en los canales y productos digitales: Angular y React.
- Creación de pipelines de CI/CD
- Generación de un modelo de versionamiento de la librería de componentes Sherpa utilizando SemVer.
- Construcción de los principales átomos base de componentes de software visuales.
- Construcción de los principales moléculas y organismos base.
- Generación de plantillas de componentes.
- Componentes para canales digitales.
- Generación de componentes inteligentes.
- Generación de Sherpa Scanner. Se requirió implementar indicadores de adopción para garantizar la acogida en los diferentes equipos así como su buen uso; sin la medición no se sabe si se alcanzan los objetivos y no se puede generar data para implementar ciclos de mejora continua.
 |
 |
  |
 |
Lo que ganamos
- Desarrollo de talento: ya no es necesario un grado de especialidad “pixel perfect” de destrezas en desarrollo de front-End. Esto debido a que los desarrolladores componen soluciones en la mayoría de los casos.
- Estandarización de diseño y marca: unificación de componentes, marca y experiencias de usuario.
- Reutilización de componentes: reutilización de componentes en átomos, moléculas y organismos, así como de componentes inteligentes entre todos los equipos ágiles del Banco.
- Mejoras en tiempos de desarrollo: mejora en la productividad en un 40%. Quiere esto decir que si un equipo antes se demoraba 100 horas en desarrollo de front-end, ahora puede implementar la misma solución en 60 horas.
congrats!