Construyendo el Design System de Ontop
Una base compartida para crear experiencias consistentes en todas las plataformas.
Diseño de producto
Diseño UX
Design System
Resumen
Un lenguaje visual y de componentes para unificar los productos de Ontop
Ontop crecía como un ecosistema de productos para segmentos distintos. Ese crecimiento hizo visible un problema: cada plataforma avanzaba con criterios visuales y de interacción diferentes, afectando la consistencia, escalabilidad y velocidad de entrega. El objetivo fue construir un Design System que alineara productos, equipos y tecnologías bajo un mismo lenguaje.
El reto
El reto principal fue crear un Design System que funcionara para productos dirigidos a segmentos diferentes dentro de un mismo ecosistema, manteniendo cohesión entre plataformas y elevando el estándar visual y funcional.
Inconsistencia entre 3 plataformas y tecnologías
Cada producto de Ontop usaba criterios visuales y patrones de interacción distintos, creando una experiencia fragmentada y duplicando el esfuerzo de diseño y desarrollo.
Baja preparación para migrar a modo oscuro
La falta de tokens semánticos y una paleta de color normalizada hacía inviable una migración consistente a modo oscuro, pese a la creciente demanda de los usuarios.
Reestructura del sistema mientras Marketing redefinía la marca
El Design System tuvo que evolucionar mientras Marketing redefinía la identidad visual de Ontop, lo que exigió actualizar de forma transversal todos los componentes y tokens.
Proceso
Para diseñar una adopción aterrizada, el trabajo comenzó con diagnóstico y mapeo:
Auditoría (diagnóstico)
Inventarié los componentes existentes para detectar inconsistencias en UI, tokens, comportamiento y accesibilidad, y prioricé su estandarización según su impacto y uso en el producto.
Fundamentos (tokens + reglas)
Definí los fundamentos del sistema: tipografía, una paleta de color semántica, escalas de espaciado y grid, elevaciones, sombras, radios y bordes.
Componentización (UI kit)
Construí los componentes y patrones base del sistema, definiendo variantes, estados y lineamientos de uso para asegurar una implementación consistente.
QA y testing (el diferencial)
Realicé validaciones internas y pruebas en entornos reales para asegurar la consistencia y el funcionamiento de los componentes, e iteré a partir del feedback recibido.
Solución
El resultado fue un Design System funcional, listo para implementarse de forma incremental y alineado con la realidad del producto:
Impacto
Velocidad de diseño (time to design)
Antes, una pantalla tomaba 10–12 horas por iteraciones e inconsistencias. Con componentes y tokens, bajó a 6–8 horas: una mejora del 30–40%.
Menos retrabajo por inconsistencias de UI
Los ajustes por inconsistencias de UI pasaron de 18–25% a 8–12% de los tickets, reduciendo el retrabajo en 40–60%.
Consistencia del producto
Estandaricé componentes clave y reduje las variantes visuales redundantes en 35–50%.
Eficiencia de desarrollo (alineación diseño-engineering)
Con lineamientos claros, las aclaraciones durante el sprint se redujeron en 20–30%.
Adopción del sistema por el equipo
El uso pasó de ser parcial a una adopción de 70–85% en nuevas pantallas mediante el Design System.
Impacto indirecto en la experiencia (calidad percibida)
Una mayor consistencia mejoró la calidad percibida, con +5 a +10 puntos en métricas UX/UI o menos incidencias en QA.
Este Design System se convirtió en la base para construir y escalar el ecosistema Ontop con consistencia, velocidad y preparación para el futuro (modo oscuro y nuevos estándares fintech).
