Designing a World-Class Design System

Spotlight: Large Beverage Manufacturer in USA

I served as lead UX Writer and UI Designer for a best-in-class design system built in Sketch.

In collaboration with the Lead Visual Designer, I meticulously documented each component of the design system, detailing usage guidelines, best practices, spacing, placement, and accessibility standards. This ensured consistency and clarity across all user touchpoints.

I also led the end-to-end design of the public facing front-end for the design system website.

USER PERSONA & PRIMARY GOALS

Designers, developers, and marketing/leadership teams at a global beverage manufacturer needed a cohesive design system that standardized components across different platforms and regions, enabling efficient design and development while maintaining brand consistency.

THE PROBLEM

The company faced fragmented design standards due to acquisitions, mergers, and brand revisions. This lack of standardization led to inconsistent regional styles and design practices. They needed a unified design system to standardize components and ensure cohesion across all teams and platforms.

HOW MIGHT WE...

How might we develop a comprehensive design system that serves as a single source of truth, facilitating consistent design and development across various platforms and regions?

CLIENT

AB-InBev (Consulting via Insight)

TIMELINE

October 2018 - December 2018

MY ROLE

Lead UX Writer and UI Designer, working alongside the Project Manager, Product Manager, Lead Visual Designer, iOS Developer, Android Developer, Web Developer, Client's Manager of Innovation, and Client Brand Ambassador

SERVICES

Design System Development, UI Design, UX Writing, Usability Testing, Competitive Audit, Documentation Creation
The Problem
The company I was working with, which I'll call BevCorp, was struggling with a lack of standardization across its many divisions.

They had acquired companies, merged companies, and gone through multiple brand revisions. This resulted in a situation with different regional styles and preferred design standards, which that didn't work cohesively for the brand. They needed a central command, a single lego set for all teams to share across platforms and regions.
They needed a central command, a single lego set for all teams to share across platforms and regions.
Research Phase
My journey began with a deep dive into AB-InBev's existing landscape. We identified three primary stakeholders—designers, developers, and marketing teams—each with unique needs and perspectives. To understand these needs, I audited several of AB-InBev's existing applications and analyzed their design components. This audit was crucial in pinpointing where inconsistencies lay and what the design system needed to address.
I also conducted a competitive audit of leading design systems, including those from Google, IBM, Salesforce, and Atlassian. This research guided our approach, aligning us with industry best practices and ensuring our design system was both robust and forward-thinking.
Classification of Components
I led the classification of design components into a structured hierarchy of atoms, molecules, and organisms. To prioritize key components, I proposed cataloging those featured in a representative selection of four highly-used existing internal tools. This methodical approach ensured we focused on high-value, high-need components. I maintained a spreadsheet to size, prioritize, and track the build of each component.
Snapshot of Component List. Broad assessment of component landscape across web, iOS, and android platforms.
Documentation of Components
As Lead UX Writer, I provided thorough documentation for each component. I worked closely with the Lead Visual Designer as well as the iOS, Android, and web development teams to ensure that each component was designed according to best practices for each platform and contained all of the features, styles, and variants that would empower the teams that would need these artifacts. I then wrote clear, compelling copy providing detailed guidance for general usage, placement, specific dos and don’ts, accessibility guidelines, and more.
The Design System Front End UI
In addition to writing all documentation for the components, I also designed the website that would allow people to use the design system from anywhere in the world. Based on the same user groups — Designers, Developers, and Marketing & Leadership, I assembled a list of top priorities that the website needed to include.

Based on the needs identified for our users and with these examples in mind, I created wireframes for the front end UI. Using Sketch & InVision, I created a clickable prototype which we used to perform usability testing on a small group of designers, developers, and marketing team members sourced from BevCorp by the Innovation Manager. Usability testing confirmed that our design included all of the information needed by our target users and that the layout facilitated discovery of those resources.
Wireframes for the Design System Front End. I used these wireframes to create a clickable prototype and performed usability testing to make sure that our target users would be able to find and receive the value they're looking for quickly and easily.
I then collaborated with our Visual Designer to produce the final design:
Usability Testing & User Personas Documentation. Part of the design system included a brand-considered explanation of Design Thinking and UX design methods, which I worked with their Brand Ambassador to write and refine.
User Persona Card. I collaborated closely with the Lead Visual Designer on many visual components including this template for user personas.
Results and Impact
The MALT Design System, launched in 2019, unified global design standards and has become the cornerstone of BevCorp’s design operations, significantly reducing design inconsistencies and accelerating development cycles.
Key Takeaways
  • 💎 Fragmented internal design standards were unified overnight as global teams were instructed to use the new design system
  • 💎 Design of the front end UI for the design system was optimized both for development teams as well as design teams through usability testing at the wireframe level
  • 💎 Designers within the Beverage Company could now use the component library to quickly and easily mock up new experiences
  • 💎  Non-designers from across the company could look up a specific component and learn about how (and how not) to use it
Lessons Learned
This project provided invaluable insights into the creation of world-class design systems. I delved deeply into best practices for component libraries, carefully documenting the subtle differences across platform components. This process enhanced my understanding of the unique perspectives and needs of developers, designers, and marketing managers within a global company.

Through collaboration with a diverse range of stakeholders, I refined my ability to communicate and align on key decisions. I guided discussions on structuring the system's component pages, ensuring that users could quickly and easily access the information they needed. My work involved developing a comprehensive understanding of each 'atom' and 'molecule,' from usage and spacing to layout guidelines and best practices.

While the techniques for building design systems may evolve, the experience of scrutinizing each component in detail will continue to influence my approach throughout my career. I remain a strong advocate for standardization, accessibility, and maintaining a single source of truth.
Read next: