CITICINEMAS - MAY 22
Increasing Ticket Sales by Improving the User Experience
Reduce Friction, Increase Registrations, and Improve Performance in the Purchase Flow.
Coltrane Design System
Scaling foundations for an enterprise organization
| Organization: | Coppel |
| Platforms: | Web · iOS · Android |
| Scale: | +65 product designers and multiple development teams |
| My role: | Principal of Foundations / Design Systems |
| Project time: | 2022 – 2026 |
Executive Summary
Coppel is an enterprise organization operating multiple digital products across web and mobile platforms, where more than 65 product designers collaborate with multiple development teams in parallel.
When I joined, there was an initial design system created by an external vendor. While functional, it lacked adoption, governance, and the structural capacity to scale at the pace of the business. In parallel, the organization was entering a corporate rebrand and a deep technological transformation.
As Principal of Foundations, my responsibility was to define an evolution strategy for the design system that allowed foundations to scale safely, without disrupting active products or introducing regressions during a critical period of change.
The Challenge
The organization faced three forces at the same time:
- New frontend architectures and platform decoupling
- A corporate rebrand with significant visual changes
- Design decisions impacting dozens of products and teams in parallel
The main risk was not visual. It was organizational. Breaking operational continuity or slowing long term evolution.
The Key Decision
Instead of replacing the existing system, Coltrane was structured into two complementary layers, with an intentional transition step.
Coltrane Legacy
- Stable base for existing products
- Operational continuity for active teams
- Included a theme adapter as an intermediate step
- Updated primary color
- Updated heading typography
- Adjusted background color
- Enabled partial visual alignment with the rebrand without changing foundations or components
Coltrane Bubble
- New evolutionary layer of the system
- Fully semantic token architecture
- Accessibility integrated from foundations
- Full alignment with the new brand
- Preparation for future platforms and products
This approach reduced organizational risk by separating visual adaptation from structural change, enabling progressive adoption without breaking active products.
Redefining Foundations
One of the most critical changes was the redefinition of foundations and tokens.
Before (Legacy):
- Primitive colors
- Implicit semantics
- High margin for interpretation and error
After (Bubble):
- Tokens defined by role, element, and state
- Explicit and predictable semantics
- Reduced visual variability
Foundations evolved from a collection of styles into a decision framework that enabled consistent choices across teams and platforms. The legacy theme adapter solved short term visual alignment, while Bubble addressed the long term structural problem.
Accessibility as a Foundation
The rebrand introduced more expressive brand colors, many of which did not meet contrast requirements for accessible text.
The decision was to preserve the brand visual language while introducing specific semantic tokens for accessible text.
Accessibility was embedded at the foundation level, preventing future rework and reducing risk during the rebrand rollout.
iOS and Android Components
From this new base:
- Decoupled libraries were built for iOS and Android
- Components were designed for reuse, accessibility, and consistency
- The system was prepared to scale to new flows and products
My role was not to execute all components, but to define the system, establish the process, mentor and upskill designers, and ensure quality and adoption across teams.
Results
Foundations
- Foundations adoption reached ~14.6M insertions across Legacy and Bubble
- Legacy theme adaptation enabled early rebrand alignment without disrupting products
- Reduction from ~84 colors to 32 semantic tokens
- Accessibility embedded at the foundation level
- Progressive evolution of the system without breaking active products
iOS and Android Components
- Creation and documentation of 39 native mobile components aligned with Bubble foundations and accessibility standards
- Definition of review practices and quality checklists
- Measured usage in the first 6 months: 232,625 component instantiations in Figma
Component reuse generated measurable operational efficiency. Based on conservative internal references, this represents tens of thousands of design hours avoided, equivalent to approximately MXN 6.7M in design effort, using average internal costs.
Learnings
- Design systems scale by the decisions they protect
- Adoption comes from involvement, not enforcement
- Safe evolution requires architecture, judgment, and timing
Closing
Coltrane Bubble became the foundation for Coppel's digital rebrand and future products, while Legacy ensured continuity through a controlled transition.
This project consolidated my role as Principal of Foundations, focused on clarity, risk reduction, and long term scalability.