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.