Reconstrucción de la librería Android durante el rebrand de Coppel

Overview

Coppel vivía dos iniciativas al mismo tiempo: transformación digital y rebrand. Esto trajo nuevas foundations (color, tipografía, elevación, bordes, textos) y creó el momento ideal para reconstruir la librería de componentes de Android y preparar el terreno para migrar journeys completos sobre una base consistente.

La librería anterior tenía mucha variación y poca gobernanza. Había demasiados colores y patrones inconsistentes, lo que afectaba la consistencia visual, la accesibilidad y la velocidad de entrega.

El problema

La base anterior de Android reflejaba deuda acumulada:

• Había ~186 colores en uso, con múltiples variaciones de azules y amarillos "de marca" sin un sistema único.
• Existían diferencias visibles en estados (success/error/etc.) y criterios inconsistentes entre pantallas.
• Convivían componentes con estilos mezclados (formas, elevaciones y tratamientos distintos).
• La experiencia no era uniforme, lo que generaba fricción en journeys y complicaba implementación.

Mi rol

Como Principal / líder de Foundations, impulsé el proyecto y aseguré que avanzara con calidad y velocidad:

• Definí el enfoque: Material-first + adaptación a marca.
• Organicé el trabajo con varios diseñadores de producto (distribución por componentes).
• Revisé y aprobé componentes para mantener consistencia (visual + interacción + accesibilidad).
• Coordiné sesiones de handoff con el equipo Android para validar factibilidad y comportamiento real.
• Lideré la bajada de conocimiento para estandarizar accesibilidad Android dentro del equipo.

Estrategia

Material primero, personalización segura para la marca

Usamos Material Design como base para mantener patrones nativos y escalabilidad. A partir de ahí, definimos un marco de personalización que reflejara la identidad de Coppel sin romper comportamiento, accesibilidad o viabilidad técnica.

Reducir variación, aumentar significado

Convertimos el color en una decisión de diseño, no en "variantes sueltas". El sistema pasó de ~186 colores a 43 colores totales, con semántica definida (colores con intención y uso claro dentro de la interfaz).

Construir rápido con un estándar de calidad

El reto era crear una librería completa en poco tiempo sin sacrificar consistencia, estados/variantes, accesibilidad y alineación con ingeniería.

Cómo trabajamos

• Arranqué con un set de decisiones y componentes de referencia para alinear al equipo desde el inicio.
• Distribuimos componentes entre diseñadores y trabajamos en paralelo.
• Iteramos con el equipo Android en sesiones recurrentes para feedback y validación.
• Operamos en ciclos claros: build → revisión → feedback dev → refinamiento → handoff.

Implementación y testeo (alineación con ingeniería)

Además de diseñar y documentar componentes, participé en el testeo en entorno real. Instalé y utilicé Android Studio para revisar implementación y detectar detalles de comportamiento que no se ven en Figma. El sistema se implementó sobre una base Material-first en un stack híbrido (XML Views + Jetpack Compose, con una ruta clara de evolución hacia Compose). También trabajamos con un archivo XML para definir y consumir tokens (colores, tipografías, elevaciones), asegurando consistencia entre diseño y código.

Accesibilidad

La accesibilidad se integró al estándar del sistema para Android, con reglas prácticas que ayudaron al equipo a diseñar de forma consistente para patrones nativos y lectura con lector de pantalla.

Entregables

• 39 componentes diseñados y documentados.
• Handoff con el equipo Android + checklist de calidad.
• Guía interna para diseño orientada a accesibilidad en Android.
• Librería lista para ser usada por equipos de producto en nuevos journeys.

Puesto en producción

• Se publicó como librería para diseño y habilitó la construcción del resto de journeys en la nueva experiencia.
• Se implementó también en código, como librería Android utilizada en la app nueva resultado de la transformación digital.

Resultados (6 meses)

Cierre

Este proyecto fue una pieza clave para habilitar la nueva app de Coppel: la librería se convirtió en la base de UI para construir y escalar la experiencia durante la transformación digital.

A nivel personal, el mayor aprendizaje fue profundizar en accesibilidad en Android y entender límites técnicos reales. Entre reviews con desarrollo, handoffs y QA en build, aprendí a traducir decisiones de diseño a implementación sin perder consistencia ni calidad.

El trabajo en Android Studio elevó el nivel de validación: permitió revisar accesibilidad y detalles de interacción con precisión, y fortalecer el puente entre diseño, sistema y producto final.