Karina Maldonado | Corona Design System

Corona Design System

Streamlining design workflows and reducing inconsistencies across teams

DESIGN SYSTEMS

2021

the challenge

Without shared guidelines, Corona’s growing platforms became fragmented—causing redundant design work and slower delivery.

Reduced cross-team meeting time by over 10 hours per week

Thanks to shared guidelines and reusable components that eliminated redundant alignment calls.

Reduced cross-team meeting time by over 10 hours per week

Thanks to shared guidelines and reusable components that eliminated redundant alignment calls.

Reduced cross-team meeting time by over 10 hours per week

Thanks to shared guidelines and reusable components that eliminated redundant alignment calls.

Cut UI design time by up to 40% for new features

Designers reused pre-built components and followed clear rules, reducing decision fatigue.

Cut UI design time by up to 40% for new features

Designers reused pre-built components and followed clear rules, reducing decision fatigue.

Cut UI design time by up to 40% for new features

Designers reused pre-built components and followed clear rules, reducing decision fatigue.

Enabled 3+ teams (design, dev, e-commerce) to collaborate within a single system

All using the same design tokens, Figma files, and visual language.

Enabled 3+ teams (design, dev, e-commerce) to collaborate within a single system

All using the same design tokens, Figma files, and visual language.

Enabled 3+ teams (design, dev, e-commerce) to collaborate within a single system

All using the same design tokens, Figma files, and visual language.

01. Understanding inefficiencies at scale

Measuring the cost of inconsistency across teams

We already knew Corona’s digital platforms were fragmented — but we needed to understand how much this slowed us down and what each team needed to work faster.

Through a heuristic audit and internal interviews, we mapped the full scope of inefficiencies: duplicated UI patterns, misaligned processes, and cross-team friction. Teams reported spending over 10 hours a week aligning on basics — time that could’ve been spent designing. This helped us pinpoint exactly where standardization would make the biggest impact.

We already knew Corona’s digital platforms were fragmented — but we needed to understand how much this slowed us down and what each team needed to work faster.

02. Ideation and Architecture

Creating a foundation with unified guidelines and structure

We proposed a centralized design portal for internal teams, hosted inside the company’s employee platform. We mapped the sitemap collaboratively, defined core principles, and translated early ideas into wireframes for alignment.

This phase involved crafting the sitemap and information architecture, starting with initial paper sketches generated during an ideation session with the team. Later, we transitioned to wireframing the selected concept for further development.

03. Design and Prototyping

Building reusable UI kits and detailed documentation in Figma

Before jumping into implementation, we needed to make sure every design decision could scale. We started by building a robust UI kit in Figma — auditing what already existed, identifying redundancies, and unifying the most-used elements across products.

This kit became the foundation for our design system. We defined core layout grids, spacing logic, typography, iconography, and interactive patterns — not just for the portal, but as a shared language across teams. We also documented usage rules, edge cases, and best practices to make the system easy to adopt and hard to misuse.

High-fidelity prototypes were reviewed with e-commerce and dev teams early on, helping us catch potential blockers and align on feasibility from day one.