Latina Design System en acción
Construir un sistema de diseño integral desde cero para unificar, escalar y potenciar la calidad de producto, conectando diseño, desarrollo y experiencia en un mismo lenguaje que impulse el crecimiento de Nowports.
Versión resumida
Construimos Latina Design System para dejar atrás un ecosistema técnico fragmentado y crear una base sólida para crecer. Con un nuevo UI Kit, documentación viva y librería técnica, hoy diseñamos y desarrollamos más rápido, mejor y con propósito. Latina es nuestro viento a favor.
* Algunas cifras y datos han sido adaptadas con fines ilustrativos para proteger información estratégica y confidencial.
Un nuevo punto de partida
En Nowports entendimos que para escalar productos de forma coherente, eficiente y de calidad, no bastaba con parchar lo existente: necesitábamos crear algo nuevo, robusto y pensado para el futuro. Así nació Latina Design System, un proyecto estratégico que no solo ordenó, sino que transformó nuestra forma de diseñar y construir tecnología.
El problema inicial: cuando remendar ya no alcanza
Antes de Latina, nos enfrentábamos a una realidad compleja:
-
Código deprecado, poco mantenible.
-
Hardcodeo generalizado sin componentización.
-
Inconsistencias visuales y funcionales.
-
Dificultades para escalar productos de forma ágil.
-
Ausencia de diseño pensado para responsiveness real.
-
Prácticamente nula consideración de principios de accesibilidad.
-
Tiempo de desarrollo y corrección ineficientes.
Era claro: seguir construyendo sobre una base inestable solo iba a frenar nuestro crecimiento. Necesitábamos crear una nueva estructura que alineara diseño y desarrollo bajo principios compartidos.
Liderar la construcción de un nuevo ecosistema
Como responsable de los equipos de Design Ops, Product Designers y User Researchers en Nowports, lideré la creación de Latina Design System de principio a fin.
La ejecución principal estuvo a cargo del equipo de Design Ops, que tomó el liderazgo operativo en la construcción del sistema desde cero: desde la definición de principios hasta la implementación de procesos y arquitectura de componentes.
Contamos con el aporte estratégico de Product Designers y User Researchers, quienes colaboraron en la validación de necesidades reales de usuarios y negocio, asegurando que Latina no fuera solo un marco técnico, sino un motor de experiencia.
Todo el proceso se llevó adelante en colaboración estrecha con Desarrollo, logrando alinear criterios visuales, funcionales y técnicos desde la base.
Como líder del proyecto, mi foco estuvo en mantener la visión integral: impulsar un sistema que no solo resolviera problemas actuales, sino que nos habilitara a escalar, iterar y evolucionar de forma coherente a largo plazo.
¿Por qué Latina?
El nombre Latina no fue casual. Representa dos dimensiones fundamentales:
-
Nuestra identidad: como empresa nacida en Latinoamérica, orgullosa de su cultura, diversidad y empuje.
-
Nuestro espíritu de avance: la vela latina en náutica es un diseño triangular que aprovecha el viento para navegar de manera flexible y precisa. Así queríamos que fuera nuestro sistema: una estructura que impulse el movimiento hacia adelante, adaptándose sin perder dirección.
Estructura de Latina
Latina no es un documento, es un ecosistema vivo, compuesto por tres grandes pilares:
-
Latina UI Kit: Una librería de componentes visuales en Figma, construida con principios de accesibilidad, escalabilidad y consistencia. Incluye tokens de diseño, variables y estructuras modulares.
-
Latina Design System: Toda la documentación de buenas prácticas, patrones de uso, principios de diseño y guías de interacción. Un marco que educa y alinea equipos.
-
Latina Dev: La implementación técnica en desarrollo: una librería escalable de componentes en código, basada en MUI y adaptada a nuestras necesidades de negocio.
Cada pieza está pensada para dialogar: diseño y tech como parte de un mismo lenguaje.
¿Qué contiene Latina?
Latina no es solo un set de botones y colores. Está construida sobre principios sólidos de diseño: claridad, coherencia, escalabilidad y accesibilidad.
Su base son los tokens de diseño —colores, tipografías, espaciados, bordes, sombras— que permiten unificar la experiencia de forma consistente en todos los productos.
En Figma estructuramos todo el sistema a través de variables inteligentes: cada color, medida, espaciado o propiedad visual está definido como una variable. Esto permite modificar un solo atributo y que el cambio se propague automáticamente a lo largo de todos los componentes y pantallas, garantizando flexibilidad, consistencia y eficiencia en el mantenimiento a largo plazo.
Los componentes siguen una arquitectura de diseño atómico (atoms, molecules, organisms) para facilitar la escalabilidad y la evolución continua.
Además, Latina es un sistema vivo: cuenta con procesos claros de contribución y actualización, impulsados por feedback real y por la evolución del producto.
El proceso: construir sobre bases sólidas
-
Auditoría total: analizamos todos los componentes, flujos y patrones usados en la plataforma.
-
Workshops de definición: co-creación con Producto, Diseño y Tech para identificar necesidades reales.
-
Normalización de tokens y variables: desde el inicio construimos una base robusta en Figma y en desarrollo, permitiendo cambios escalables y ágiles.
-
Benchmarking externo: analizamos sistemas líderes como Material, Atlassian y Carbon de IBM para adaptar las mejores prácticas a nuestro contexto.
-
Procesos claros de cambios: establecimos un sistema de solicitud, evaluación y actualización de componentes, accesible a todos los equipos.
La creación de Latina fue un trabajo intenso, pero necesario: no queríamos solo estandarizar, queríamos construir una plataforma de crecimiento real.
Resultados visibles (y medibles)
Desde la implementación de Latina, los resultados fueron contundentes:
-
+42% de velocidad en la entrega de nuevas features.
-
-38% de bugs visuales detectados post-release.
-
+55% de consistencia en experiencias multicanal.
-
+60% de satisfacción de equipos internos en las encuestas de handoff y colaboración.
-
Reducción del time-to-market en lanzamientos de producto en un 30%.
-
+100% de adopción de buenas prácticas de responsive y accesibilidad desde las primeras fases de diseño.
Además, disminuyó el esfuerzo de mantenimiento técnico en front-end en un 25%, liberando capacidad de los equipos para enfocarse en mejoras estratégicas y de valor agregado.
Un nuevo estándar para el futuro
Latina no es un proyecto cerrado. Es un sistema vivo que evoluciona con el negocio, los usuarios y la tecnología. Cada mes iteramos, documentamos y mejoramos con base en el feedback real de quienes usan y construyen sobre él.
Hoy, Latina impulsa nuestra capacidad de entregar productos más rápidos, más consistentes y más relevantes para nuestros clientes.
Como la vela latina que inspiró su nombre, nos da la flexibilidad de adaptarnos, pero siempre avanzando hacia el mismo horizonte.
Latina es, en esencia, diseño y tecnología trabajando como una sola fuerza para llevar a Nowports (y a nuestros clientes) cada vez más lejos.