Components Base Android — Design Language System Coltrane

Rebuilding the Android Library During Coppel's Rebrand

Material-first, color semantics, and accessibility standard for the new app

Organization:Coppel
Platform:Android
Focus:Design System / Mobile Foundations
My role:Principal / Foundations Lead
Scope:Library rebuild, handoff, and alignment with engineering

Overview

Coppel was running two initiatives at once: digital transformation and rebrand. This brought new foundations (color, typography, elevation, borders, text) and created the right moment to rebuild the Android component library and prepare the ground for migrating full journeys on a consistent base.

The previous library had high variation and little governance. There were too many colors and inconsistent patterns, which affected visual consistency, accessibility, and delivery speed.

The Problem

The previous Android base reflected accumulated debt:

  • There were ~186 colors in use, with multiple variations of "brand" blues and yellows and no single system.
  • Visible differences in states (success/error/etc.) and inconsistent criteria across screens.
  • Components with mixed styles (shapes, elevations, and treatments) coexisted.
  • The experience was not uniform, which created friction in journeys and made implementation harder.

My Role

As Principal / Foundations lead, I drove the project and made sure it moved forward with quality and speed:

  • I defined the approach: Material-first + brand adaptation.
  • I organized the work across several product designers (distribution by component).
  • I reviewed and approved components to keep consistency (visual + interaction + accessibility).
  • I coordinated handoff sessions with the Android team to validate feasibility and real behavior.
  • I led knowledge transfer to standardize Android accessibility within the team.
Components Base Android — Design Language System Coltrane.
Components Base Android — Design Language System Coltrane.

Strategy

Material first, brand-safe customization

We used Material Design as the base to keep native patterns and scalability. From there, we defined a customization framework that reflected Coppel's identity without breaking behavior, accessibility, or technical viability.

Reduce variation, increase meaning

We turned color into a design decision, not "loose variants". The system went from ~186 colors to 43 total colors, with defined semantics (colors with clear intent and use in the interface).

Build fast with a quality standard

The challenge was to create a full library in a short time without sacrificing consistency, states/variants, accessibility, and alignment with engineering.

How We Worked

  • I started with a set of reference decisions and components to align the team from the beginning.
  • We distributed components among designers and worked in parallel.
  • We iterated with the Android team in recurring sessions for feedback and validation.
  • We operated in clear cycles: build → review → dev feedback → refinement → handoff.

Implementation and Testing (Alignment with Engineering)

Besides designing and documenting components, I took part in testing in a real environment. I installed and used Android Studio to review implementation and catch behavior details that don't show up in Figma. The system was implemented on a Material-first base in a hybrid stack (XML Views + Jetpack Compose, with a clear path toward Compose). We also worked with an XML file to define and consume tokens (colors, typography, elevations), ensuring consistency between design and code.

Accessibility

Accessibility was integrated into the Android system standard, with practical rules that helped the team design consistently for native patterns and screen reader usage.

Deliverables

  • 39 components designed and documented.
  • Handoff with the Android team + quality checklist.
  • Internal guide for design focused on Android accessibility.
  • Library ready for product teams to use in new journeys.

Launched to Production

  • It was released as a design library and enabled building the rest of the journeys in the new experience.
  • It was also implemented in code, as an Android library used in the new app that resulted from the digital transformation.

Results (6 months)

39

Components documented

43

Total colors with defined semantics (before ~186)

232k+

Component instances used in Figma (design adoption)

30,900

Estimated hours saved (estimate)

$6.7M MXN

Estimated efficiency impact (estimate)

Closing

This project was a key enabler for Coppel's new app: the library became the UI base to build and scale the experience during the digital transformation.

On a personal level, the main learning was going deeper on Android accessibility and understanding real technical limits. Between reviews with development, handoffs, and QA on build, I learned to translate design decisions into implementation without losing consistency or quality.

Working in Android Studio raised the bar for validation: it made it possible to review accessibility and interaction details with precision, and to strengthen the bridge between design, system, and final product.