CITICINEMAS - MAY 22
Aumentando las ventas de boletos mejorando la experiencia del usuario
Reducir fricción, aumentar registros y mejorar performance en el flujo de compra.
Coltrane Design System
Escalando foundations para una organización enterprise
| Organización: | Coppel |
| Plataformas: | Web · iOS · Android |
| Escala: | +65 diseñadores de producto y múltiples equipos de desarrollo |
| Mi rol: | Principal of Foundations / Design Systems |
| Periodo: | 2022 – 2026 |
Resumen ejecutivo
Coppel es una organización enterprise que opera múltiples productos digitales en web y móvil, donde más de 65 diseñadores de producto colaboran con múltiples equipos de desarrollo en paralelo.
Cuando me integré, existía un design system inicial creado por un proveedor externo. Aunque funcional, carecía de adopción, gobernanza y capacidad estructural para escalar al ritmo del negocio. En paralelo, la organización entraba en un rebrand corporativo y una transformación tecnológica profunda.
Como Principal of Foundations, mi responsabilidad fue definir una estrategia de evolución del design system que permitiera escalar foundations de forma segura, sin interrumpir productos activos ni introducir regresiones en un periodo crítico de cambio.
El reto
La organización enfrentaba tres fuerzas al mismo tiempo:
- Nuevas arquitecturas de frontend y desacople de plataformas
- Un rebrand corporativo con cambios visuales significativos
- Decisiones de diseño impactando a decenas de productos y equipos en paralelo
El riesgo principal no era visual. Era organizacional. Romper la continuidad operativa o frenar la evolución a largo plazo.
La decisión clave
En lugar de reemplazar el sistema existente, Coltrane se estructuró en dos capas complementarias, con un paso de transición intencional.
Coltrane Legacy
- Base estable para productos existentes
- Continuidad operativa para equipos activos
- Incluyó un adaptador de tema como paso intermedio
- Actualización del color primario
- Actualización de tipografía de encabezados
- Ajuste del color de fondo
- Permitió alineación visual parcial con el rebrand sin cambiar foundations ni componentes
Coltrane Bubble
- Nueva capa evolutiva del sistema
- Arquitectura de tokens plenamente semántica
- Accesibilidad integrada desde foundations
- Alineación total con la nueva marca
- Preparación para futuras plataformas y productos
Este enfoque redujo el riesgo organizacional al separar la adaptación visual del cambio estructural, permitiendo adopción progresiva sin romper productos activos.
Redefiniendo foundations
Uno de los cambios más críticos fue la redefinición de foundations y tokens.
Antes (Legacy):
- Colores primitivos
- Semántica implícita
- Alto margen de interpretación y error
Después (Bubble):
- Tokens definidos por rol, elemento y estado
- Semántica explícita y predecible
- Reducción de variabilidad visual
Las foundations pasaron de ser una colección de estilos a un marco de decisión que permitió elecciones consistentes entre equipos y plataformas. El adaptador de tema legacy resolvió la alineación visual a corto plazo, mientras Bubble abordó el problema estructural a largo plazo.
Accesibilidad como foundation
El rebrand introdujo colores de marca más expresivos, muchos de los cuales no cumplían requisitos de contraste para texto accesible.
La decisión fue preservar el lenguaje visual de marca e introducir tokens semánticos específicos para texto accesible.
La accesibilidad se integró a nivel de foundations, evitando re-trabajo futuro y reduciendo riesgo durante el despliegue del rebrand.
Componentes iOS y Android
A partir de esta nueva base:
- Se construyeron librerías desacopladas para iOS y Android
- Los componentes se diseñaron para reutilización, accesibilidad y consistencia
- El sistema se preparó para escalar a nuevos flujos y productos
Mi rol no fue ejecutar todos los componentes, sino definir el sistema, establecer el proceso, mentorizar y capacitar a diseñadores, y asegurar calidad y adopción entre los equipos.
Resultados
Foundations
- La adopción de foundations alcanzó ~14.6M inserciones entre Legacy y Bubble
- La adaptación de tema en Legacy permitió alineación temprana con el rebrand sin interrumpir productos
- Reducción de ~84 colores a 32 tokens semánticos
- Accesibilidad integrada a nivel de foundations
- Evolución progresiva del sistema sin romper productos activos
Componentes iOS y Android
- Creación y documentación de 39 componentes móviles nativos alineados con foundations Bubble y estándares de accesibilidad
- Definición de prácticas de revisión y listas de verificación de calidad
- Uso medido en los primeros 6 meses: 232,625 instanciaciones de componentes en Figma
La reutilización de componentes generó eficiencia operativa medible. Con base en referencias internas conservadoras, esto representa decenas de miles de horas de diseño evitadas, equivalente a aproximadamente MXN 6.7M en esfuerzo de diseño, utilizando costos internos promedio.
Aprendizajes
- Los design systems escalan por las decisiones que protegen
- La adopción nace del involucramiento, no de la imposición
- Evolucionar sin romper requiere arquitectura, criterio y timing
Cierre
Coltrane Bubble se convirtió en la base del rebrand digital de Coppel y de sus productos futuros, mientras Legacy aseguró continuidad mediante una transición controlada.
Este proyecto consolidó mi rol como Principal of Foundations, enfocado en claridad, reducción de riesgo y escalabilidad a largo plazo.