Disclaimer: This case study includes modified content and visuals to comply with a non-disclosure agreement. While the core design process and outcomes remain accurate, certain details have been generalized to respect client confidentiality.
Duration
6 months
Role
UX/UI Designer
Tools
Figma
Jira
Team
5 UX/UI Designers, 1 PM, 1PO
1. The Challenge: Fragmented Design, Frustrated Teams
The client, a key Coca-Cola distributor, had scaled its digital products rapidly—but without a shared design foundation. Inconsistent components, visual styles, and development handoffs were causing confusion, delays, and an uneven user experience.
They reached out with a clear need:
A robust design system that reflects the brand, simplifies collaboration between design and development, and speeds up product delivery—without sacrificing quality.
2. Groundwork: Learning from the “Doers”
Discovery and Research
We kicked off with an audit of their existing products and brand guidelines. We also benchmarked leading public design systems (Material, Carbon, etc.) and conducted workshops with internal teams and vendors—known internally as “Doers.”
Key Insights
Tight timelines: Teams were under constant pressure to deliver fast.
External teams: 99% of product work was outsourced, increasing the need for clarity and consistency.
Communication gaps: There were no shared channels or processes across teams.
Visual inconsistency: Colors, type scales, components, and UI patterns varied wildly across platforms.
Design Opportunities
The app has to be the companion not the focus of the visit - simple flows, few steps, intuitive interactions, and automation should help.
Guides and information should be short and easy to digest. They should encourage the user to learn, without beign an obstacle.
The note-taking experience should allow freedom, not be restrictive, since users have different ways of collecting and analyzing information.
Information distribution is essential for users. Opening more ways to share information directly would be helpful for them.
We structured the system using DesignOps principles:
People, Processes, and Impact.
Core Definitions
Target users: Product designers, developers, PMs, and external collaborators.
Governance model: Who owns the system? How are updates handled?
Communication guidelines: Tone, documentation language, and support flow.
KPIs: Quality, adoption, speed of implementation
Design Principles
Scalable: Built to grow with the product ecosystem.
Practical: Focused on accelerating delivery.
Adaptable: Easy to understand and apply for any team.
Must vs Snowflakes
We used a classification matrix to define scope:
Must-haves: UI tokens, atomic components, interaction patterns, assets, accessibility rules, best practices.
Snowflakes: Optional styles and specific use-case elements.
Out of scope: High-level patterns, templates, UX writing.
Don’ts: Elements that introduce inconsistency or aren’t scalable.
4. Designing the Look & Feel
We proposed two visual directions based on existing brand use and competitor analysis.
Option A:
Spacious, rounded elements, minimal shadows, high contrast.
Option B:
Tighter layouts, bolder elements with shadows, toned-down colors.
Client feedback: While they appreciated both directions, the proposed primary and secondary colors (deep red, black, grey) were seen as too muted and off-brand. However, their preferred brand red did not meet WCAG accessibility standards.
We responded with:
Accessibility test results (Adobe Color)
A proposed brand-compliant red with slightly adjusted contrast
A full color system including status and UI colors, not just brand hues
In the end, we moved forward with their original brand red—with clear documentation on accessibility implications and usage guidelines.
5. Collaboration by Design: Governance & Roles
Since collaboration had been a major pain point, we introduced three key user roles:
Design System Designers: Own and maintain the system
Product Designers & Devs: Main consumers of the system
Ambassadors: A rotating role (QA, PO, Dev) to promote adoption and flag issues per project
Governance Process
We designed a visual governance model for handling:
New component requests (via structured forms)
Developer questions (logged on each component page)
Updates and documentation changes
This governance diagram was included in the documentation—first as a master flow, later simplified into 3 role-based diagrams to improve clarity.
6. Structuring the System Across Platforms
To ensure accessibility for both design and non-design stakeholders, we split the system across:
Figma: Components, styles, assets
Notion: Documentation, structure, governance, principles
Why?
Many team members weren’t fluent in Figma. Notion allowed for easier reading, better organization, and integrated previews of Figma links.
7. What We Delivered
Notion
Value Proposition
Principles & Version Control
Governance Rules
UI Layouts & Breakpoints
Style Guides (colors, typography, spacing, shadows)
Tokens & Naming Conventions
Component Guidelines (states, variants, best practices)
Assets & Brand Usage Rules
Accessibility Guidelines
Glossary & DS Terminology
Admin-Only Research & Style Rules
Figma
Cover & File Guide
Visual Tokens
Iconography, Logos & Illustrations
32 Component Variants
Templates for new component creation
8. Enabling Adoption: Training Sessions
We delivered a two-part onboarding experience:
Session 1: Theoretical walkthrough of the system’s goals and structure
Session 2: Hands-on training using real interface examples
The feedback was positive, and designers quickly began using the system in production.
10. Reflections
This was one of the most rewarding projects I’ve worked on. Not just because of the challenge, but because of the collaborative spirit and respect for design shown by stakeholders throughout the process.
While we didn’t stay on post-delivery to maintain the system, we ensured its long-term success with:
A version control strategy
A governance process
Clear KPIs for internal teams to monitor
The client has already expressed interest in developing a V2 with us—proof that thoughtful systems, paired with strong collaboration, lead to lasting impact.
TL;DR
I designed and documented a scalable design system for one of Coca-Cola’s largest bottlers, unifying a fragmented ecosystem of digital products. Through research, collaboration, and strategic structure, we created a system that improved team alignment, visual consistency, and development speed—while staying true to brand and accessibility standards.
Sofía Beltrán Martín © 2025
Designed by me for you.