Explora App UI Kit

La app Explora crecía de forma desordenada: cada nueva feature se diseñaba y desarrollaba casi desde cero, generando deuda técnica, componentes duplicados y una experiencia inconsistente entre pantallas. No existía una fuente única de verdad ni un lenguaje común entre diseño y desarrollo, lo que añadía fricción al handoff y retrasaba el time-to-market.

Explora es una plataforma con múltiples perfiles de usuario y flujos complejos (viajes, perfil, estados de reserva, notificaciones). El análisis con el equipo de ingeniería mostró que una parte relevante del tiempo se perdía interpretando diseños estáticos o recreando componentes que ya existían con otros nombres. El reto no era solo visual: el sistema debía alinearse con la arquitectura de código y la realidad operativa del equipo.

- Compatibilidad con el framework de desarrollo existente, sin refactorización total.

- Soportar varios perfiles de usuario dentro de la misma app sin perder coherencia de marca.

- Implementar el sistema mientras el producto seguía lanzando nuevas features.

- Gestionar la resistencia inicial a invertir tiempo en "ordenar" en lugar de construir cosas nuevas.

Sistema: Lideré un mapeo de stakeholders y flujos clave, y a partir de ahí definí un UI Kit atómico donde la piedra angular fue la nomenclatura compartida. Diseñé tokens de diseño (color, tipografía, espaciado, estados) que se alinean uno a uno con las variables del framework de desarrollo, reduciendo ambigüedades en el handoff. Los componentes se documentaron con estados críticos (error, carga, vacío) y ejemplos de uso.

Trade-off: Priorizamos consistencia, claridad y velocidad sobre exploraciones visuales más disruptivas. Opté por una estructura de componentes rígida pero altamente parametrizable: menos libertad visual ad-hoc, a cambio de más velocidad de implementación y menor riesgo de errores en producción.

Ética y transparencia: Definimos patrones claros de feedback para el usuario (mensajes, estados vacíos, errores de red) que evitan la sensación de app "rota" y mejoran la confianza en los flujos más sensibles.

El sistema fue diseñado para reducir tiempos de desarrollo y deuda de interfaz: se estimó un ahorro de 40–50 % en tiempo de maquetación gracias a componentes preconstruidos y tokens alineados al código, una reducción significativa de inconsistencias visuales reportadas en QA y menos reuniones de aclaración entre diseño y desarrollo. El resultado es una base escalable que permite lanzar nuevas vistas y flujos en días en lugar de semanas, manteniendo coherencia de marca y experiencia.

👉 https://testing-viajero.pgo-explora.com/#/profile