Volver a proyectosSistema de diseño · 2026—Actual
Transformé un kit UI aislado y los lineamientos de marca en un sistema accesible, documentado y posible de implementar para productos de banca digital.
Por confidencialidad, la marca y algunos contenidos de las imágenes fueron anonimizados.
El punto de partida
El equipo contaba con un kit UI, pero no con un sistema de diseño definido. Cada proyecto podía terminar replicando elementos anteriores, arrastrando problemas y generando diferencias entre experiencias.
El desafío fue tomar los lineamientos del manual de marca y convertirlos en reglas, componentes y documentación que permitieran homologar la experiencia sin perder viabilidad técnica.
Enfoque metodológico
Organicé el proyecto con el Doble Diamante para alternar momentos de apertura y decisión. Los cinco planos de Jesse James Garrett ayudaron a conectar las necesidades del equipo con las definiciones visibles del sistema.
Los planos no se resolvieron como etapas cerradas. El sistema avanzó mediante entregas pequeñas, revisiones frecuentes y ajustes con UX, Marketing, Desarrollo y QA.
Mi responsabilidad
Comencé el proyecto de manera individual: definí qué debía incluir el sistema, cómo debía verse y cuáles serían sus criterios. Más adelante, el equipo colaboró en parte de la documentación.
Mi responsabilidad se mantuvo en la dirección del sistema y en articular las necesidades de marca, experiencia, accesibilidad e implementación.
El proceso
Revisé sistemas de referencia que integraban accesibilidad e identifiqué los componentes más utilizados por los equipos internos.
Traducí el manual de marca a fundamentos de producto: escalas de color, tipografía, espaciado y criterios de uso.
Diseñé componentes, variantes y estados para que cada decisión pudiera repetirse de forma clara y consistente.
Contrasté las decisiones con Marketing, personas usuarias internas y equipos de UX, desarrollo y QA.
Fundamentos
Las definiciones iniciales provenían del manual de marca. Construí escalas cromáticas y validé su uso con Marketing. Para la tipografía propuse alternativas legibles y criterios que permitieran sostener la accesibilidad en distintos tamaños y dispositivos.
Componentes
Los componentes se definieron a partir de los patrones más utilizados por los equipos internos. Incluí variantes, estados de interacción, foco visible y mensajes de error o éxito para que diseño, desarrollo y QA compartieran el mismo criterio.
Contenido y accesibilidad
Además de los elementos visuales, documenté pautas de comunicación clara. La accesibilidad se volvió visible mediante anotaciones sobre jerarquía semántica, navegación, nombres accesibles y estructura, facilitando el traspaso a desarrollo y la validación de QA.
El resultado
La construcción de nuevas propuestas se volvió más eficiente. Los equipos dejaron de depender de copiar o duplicar elementos de otros proyectos, una práctica que podía trasladar errores y decisiones desactualizadas.
Lo que me dejó este proyecto