challenge.
Multiple product teams were building digital experiences independently, creating duplicate components and inconsistent user experiences. This resulted in wasted resources, brand dilution, slower time-to-market, and a lack of coordination across 28 countries.
how we solved.
We created Hexa Design System as the single source of truth connecting design, code, and brand. The solution includes standardized design tokens, 50+ reusable components (available in both Figma and code), usage patterns, governance processes with SLAs, multi-platform support (Web, Android, iOS), and AI integration throughout the process.
results.
100% designer adoption in prototypes. Mobile libraries are complete, web library in progress (~50%). Engineering adoption targets: >70% mobile, >50% web. Reduced design/development time, improved collaboration, accelerated time-to-market, strengthened brand identity, and reduced operational costs.
activities.
User Research
Benchmarking
User Journey
Strategic Design
Wireframe
Usability tests
Visual Design
Information Architecture
Handoff
Design Tokens
Component Library
Documentation
Governance
problem.
The Problem No One Saw
(Until It Was Too Late)
When teams operate independently, minor inconsistencies quickly scale into systemic problems. Components such as primary buttons and brand colors were implemented differently across products, breaking visual consistency and leading to unnecessary duplication.
Beyond visual issues, the lack of a single source of truth led to significant organizational and financial impacts: teams repeatedly rebuilt existing components, engineering diverged from design specifications, timelines became unpredictable, and hard-coded design values made even simple brand updates complex maintenance efforts.
discovery.
Understanding the Problem
Before designing any components, we conducted a structured discovery process to understand not just what was broken, but why it was happening and how it impacted the business. Through interviews with designers, developers, and product managers across different markets, clear patterns emerged: products that should share the same identity showed visual divergence, components with identical functionality were duplicated with other implementations, and the absence of standardized design tokens led to hardcoded values scattered across hundreds of files.
The analysis revealed a heterogeneous scenario: some teams had already utilized local design libraries, others had partially implemented tokens, and many relied solely on fragmented documentation in various formats. There was no central coordination, and each team addressed problems independently.
solution.
The Architecture:
Solving the Paradox of Scale
The biggest challenge of a global Design System is solving a paradox: How do you guarantee global consistency without blocking local personalization? The answer emerged through a layered structure that distinguishes between what is universal and what is specific.
Hexa Core: The Universal Foundation
Hexa Core is a neutral, brand-agnostic layer that contains components and tokens serving as the foundation for everything. Think of it as the foundation of a building, solid, consistent, and invisible, but essential.
Themes: Personalization Without Fragmentation
Themes are brand-specific layers that adapt colors, typography, spacing, and shapes while maintaining consistency in structure, behavior, and accessibility.
This architecture allows a single component to serve multiple brands. A button in Core works for all brands; each brand defines its primary color tokens, and the same code produces visually distinct but functionally identical experiences.
Core Components vs. Local Components: A Hierarchy That Enables Innovation
Themes are brand-specific layers that adapt colors, typography, spacing, and shapes while maintaining consistency in structure, behavior, and accessibility.
This architecture allows a single component to serve multiple brands. A button in Core works for all brands; each brand defines its primary color tokens, and the same code produces visually distinct but functionally identical experiences.
Governance: Systems Without Process Do Not Scale
A Design System only works if it is adopted. Adoption doesn't happen by chance; it requires transparent processes, accessible support, and ongoing education.
The Component Lifecycle
Office Hours: Direct Relationship With Specialists
I implemented Hexa Office Hours, 20-minute scheduled sessions with Hexa specialists. These sessions became a crucial channel for adoption, resolving questions in real time and building direct relationships with teams.
The process is simple yet effective: booking 7 days in advance, verifying information prior to the session, sharing files, and providing clear feedback during the session.
Living Documentation
I launched a documentation site on Supernova that became the single source of truth for our team. The documentation is dynamic, automatically updated when components change, ensuring that teams always have access to the most up-to-date information.
Engineering Partnership
I worked directly with engineering to ensure Figma–Code parity, ensuring components reflect exactly what is in the design, thereby eliminating ambiguity that caused rework. This partnership was crucial in accelerating implementation and minimizing friction between design and development.
Accessibility:
Not Optional, but Fundamental
The system was built with accessibility as a core priority. Compliance with WCAG, global usability guidelines, screen reader support, appropriate contrast, and keyboard navigation are not optional; they are fundamental requirements for every component.
This means that when a team uses a Hexa component, accessibility comes built in. It's not something added later; it's embedded in the infrastructure.
results.
Numbers That Tell a Story
Hexa's results speak for themselves, but they also go beyond numbers, representing a cultural transformation in how design and engineering collaborate.
Hexa has transformed how BEES builds digital products. We achieved 100% design adoption in prototypes. Engineering adoption (in progress) targets are set at >70% for mobile and >50% for web.
The system has reduced design and development time through component reuse, improved collaboration between design and engineering teams, and accelerated time-to-market for new features. Brand identity has been strengthened, operational costs reduced, and a scalable foundation established for future growth across all 28 countries where BEES operates.
But the real impact goes beyond metrics. Hexa created a shared language between designers and developers. It established processes that enable teams to work faster while maintaining quality. It transformed how we think about building digital products at scale.
100%
Design adoption in prototypes
28 countries
with apps using the design system
>70%
target in progress for mobile app adoption
>50%
target in progress for web adoption
thanks for reading.
I hope you enjoyed this case overview. While most of the project details are protected by a non-disclosure agreement (NDA), I'd be happy to discuss my role and contributions further in a live meeting. Check the contacts below and feel free to reach out.