Un sistema para escalar diseño
Design System multi-marca y multi-producto, diseñado para mantener consistencia, acelerar la creación de experiencias y facilitar la evolución de productos digitales.
Rol
UX/UI Designer
Duración
1 sprint
Sistema
Design system
Mercados
México, Honduras y Guatemala
Por acuerdo de NDA, este caso se presenta a través del journey y las decisiones de diseño. No se muestran pantallas del producto.
Contexto
El sistema de diseño había evolucionado principalmente alrededor de experiencias móviles. Con la incorporación de nuevos productos y necesidades de escritorio, surgió la oportunidad de extender el sistema sin perder la lógica, consistencia y lenguaje visual ya construido.
El reto
El desafío no era simplemente adaptar componentes de móvil a una pantalla más grande. Era repensar cómo debía comportarse el sistema en desktop, considerando nuevos espacios, jerarquías, densidad de información y patrones de interacción.
Mi enfoque
Trabajé en la evolución del sistema a partir de los componentes y patrones existentes, identificando qué podía mantenerse, qué necesitaba adaptarse y qué debía construirse para responder a las necesidades de desktop.
Metodología
El trabajo partió del sistema existente y de las necesidades de los diferentes productos. El proceso combinó auditoría de componentes, análisis de patrones, adaptación responsive y colaboración con los equipos de producto y desarrollo para construir una base escalable.
01
Auditoría del sistema
Revisión de componentes, patrones y estructuras existentes para identificar inconsistencias, duplicidades y oportunidades de evolución.
02
Adaptación mobile → desktop
Análisis de cómo los componentes y patrones existentes debían comportarse en espacios de mayor tamaño, considerando nuevas jerarquías y necesidades de interacción.
03
Escalabilidad
Definición de soluciones reutilizables que pudieran extenderse a diferentes productos, marcas y contextos sin perder consistencia.
El Sistema
De átomos a experiencias
Para estructurar el sistema utilicé Atomic Design, llevando los elementos de interfaz desde unidades básicas hasta composiciones más completas y reutilizable
Responsive & Desktop
Pantallas de ejemplo
Las pantallas quedan como protagonistas. El mismo patrón de producto se reorganiza según el viewport, mientras conserva jerarquía, contenido y lenguaje visual.
¿Cómo quiere usar su préstamo?
La pregunta mantiene el protagonismo mientras la interacción se concentra en un panel independiente.
Pregúntale a María cómo le gustaría usar su préstamo
El valor principal gana escala y el panel secundario concentra las entradas del cotizador.
¿Cuánto dinero necesita?
$2,000
12
$0
$70,000
Dispositivos & breakpoints
Las referencias de viewport pasan después de las pantallas para que la adaptación sea lo primero que se vea.
Grid
La propuesta usa 12 columnas para desktop y mantiene la lógica de gutter y margin por breakpoint.
Rules
Reglas visuales que mantienen consistencia al llevar la experiencia a superficies mayores.
Container
Superficies modulares con bordes suaves y aire suficiente alrededor del contenido.
Radius · 24 pxLayout
La estructura se distribuye con una cuadrícula de columnas para evitar posiciones absolutas.
12 cols · DesktopContent margin
En pantallas grandes se conserva un margen lateral amplio para mantener legibilidad.
80 px · LargeInteraction area
El formulario permanece compacto; el espacio adicional se utiliza para jerarquía y contexto.
Focus + hierarchyLo que aprendí
Al inicio no hice las preguntas correctas — repliqué el flujo existente en lugar de cuestionarlo y pensar en una solución real.
Qué haría diferente hoy
Desde el inicio definiría con mayor claridad las necesidades de cada canal y los escenarios de escalabilidad, especialmente para desktop. Eso permitiría diseñar la evolución del sistema desde el principio y no como una extensión posterior.
