Desafío
El ecosistema digital del Grupo Petersen está conformado por cuatro bancos y diversas plataformas internas, cada uno con sus propios estilos, lineamientos y criterios de diseño. Esta falta de unificación generaba inconsistencias visuales, duplicación de esfuerzos entre equipos y mayores costos de mantenimiento. Además, la ausencia de una base común dificultaba la escalabilidad del producto y limitaba la posibilidad de ofrecer una experiencia de usuario coherente y unificada a lo largo de todas las marcas y plataformas del grupo.
Objetivo
Diseñar y construir un Sistema de Diseño Unificado que:
– De soporte a cuatro bancos y a sus canales digitales (web pública, home banking y plataformas internas).
– Garantice consistencia, eficiencia y accesibilidad en todas las experiencias, tanto móviles como de escritorio.
– Permita la adaptación visual y funcional de cada marca dentro de un mismo framework.
Solución implementada
Se desarrolló un Design System multimarca, estructurado bajo los principios de unificación, consistencia y accesibilidad. La arquitectura se basó en un modelo técnico de themes y design tokens, permitiendo adaptar la identidad visual de cada banco sin perder coherencia ni escalabilidad.
Para la documentación y gobernanza se integró Zeroheight, logrando una gestión unificada de componentes, patrones y guías WCAG. Desde el desarrollo se implementó Storybook, lo que permitió sincronizar diseño y código en un entorno de colaboración y control continuo.
Además, se establecieron procesos estandarizados de mantenimiento y versionado, asegurando trazabilidad, calidad y evolución constante del sistema.
Componentes para plataforma web
Trabajar en un Design System multimarca y multiplataforma implica diseñar con una visión flexible y escalable. Requiere construir una base coherente que mantenga consistencia visual y funcional entre marcas, productos y entornos, desde web hasta mobile, a la vez que permite adaptar la identidad y el tono de cada marca. Este enfoque potencia la eficiencia, mejora la calidad de las interfaces y facilita la colaboración entre equipos de diseño y desarrollo en múltiples contextos.
Componentes para Home Banking
Mi Rol
Como referente técnico participé en la construcción de un sistema de diseño multimarca, asegurando la coherencia visual, la escalabilidad y la correcta implementación entre equipos de diseño y desarrollo. Mi enfoque estuvo en establecer una base técnica sólida que permitiera la personalización por marca sin perder consistencia ni eficiencia en el mantenimiento.
Aspectos clave:
– Definición de la arquitectura del sistema y su estructura de tokens.
– Coordinación entre diseño y desarrollo para la implementación coherente.
– Estandarización de componentes reutilizables y multiplataforma.
– Documentación técnica y guía de uso en Zeroheight.
– Gobernanza del sistema para garantizar calidad, alineación y evolución continua.
– Incorporación de criterios de accesibilidad desde el diseño hasta la implementación.
– Control de versiones para mantener la integridad del sistema.
Componente Hero por Banco
Documentación
Zeroheight permite documentar un Design System de forma centralizada, dinámica y accesible para todo el equipo. Su mayor ventaja es la capacidad de mantener la documentación siempre actualizada al conectarse directamente con fuentes como Figma o repositorios de código. Facilita la colaboración entre diseño, desarrollo y negocio, asegurando consistencia, reduciendo fricción y acelerando la adopción del sistema dentro de la organización.
Portada de la documentación en Zeroheight
Storybook es un entorno de desarrollo que permite crear, visualizar y testear componentes de interfaz de usuario de manera aislada. Al embeber Storybook dentro de Zeroheight, se integran la documentación y los componentes vivos en un mismo lugar, lo que mejora la claridad, transparencia y alineación entre diseño y desarrollo.
Esto permite a los equipos ver los componentes reales funcionando, validar estados y variantes, y reducir errores al momento de implementarlos en productos.
Muestra de la documentación en Zeroheight con Storybook embebido
Resultados obtenidos
Eficiencia y productividad
– Reutilización de componentes en múltiples marcas y plataformas.
– Reducción de tiempos de diseño, desarrollo y QA visual.
Colaboración centralizada
– Documentación integrada y sincronizada entre diseño y desarrollo (Zeroheight + Storybook).
Calidad y accesibilidad
– Cumplimiento de buenas prácticas WCAG con mejoras significativas en la experiencia de usuario.
Escalabilidad y coherencia
– Identidad visual consistente en todo el ecosistema digital.
– Sistema preparado para nuevas marcas y canales, asegurando evolución a largo plazo.
Reflexión final: Construir para escalar con coherencia
La construcción de un sistema de diseño unificado representa mucho más que crear componentes o definir reglas visuales: es establecer un lenguaje común que conecte equipos, marcas y plataformas. Este proceso impulsa la eficiencia, promueve la colaboración y garantiza experiencias consistentes para los usuarios. Un sistema bien diseñado no solo ordena el presente, sino que sienta las bases para escalar de forma sólida y coherente en el futuro.