To figure out where to start, we took a sample of three existing apps that were a good representation of the types of components needed, and, with an eye towards information architecture and using the approach of classifying components into atoms, molecules, and organisms, we broke those apps down into the components they were made of. Those components became our starting point for a functional MVP of the design system. We had many conversations sizing and prioritizing the different components, and had at least a half an hour call to discuss each component as we designed it, documented it, and built it in code.
.png)
Snapshot of Component List. Broad, precise assessment of component landscape across web, iOS, and android platforms.
As Lead UX Writer, I wrote documentation to specify use parameters for each component.
Our process was as follows: The Lead Visual Designer would interpret BevCorp's brand and create visual asset using the Library feature in Sketch. I would chat with him, discuss any relevant quirks and features, and use the BevCorp brand guidelines to write a thorough and precise guide on usage, including placement and heirarchy guidelines, accessibility guidelines, voice, tone, and usage guidelines.
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.
.png)
User Persona Card. I collaborated closely with the Lead Visual Designer on many visual components including this template for user personas.
The Design System Front End UI
In addition to writing all documentation for the design system, 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, and also performed a competitive audit of other top-tier design systems including Google, IBM, Salesforce, and Atlassian.
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.
.png)
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:
Results and Impact
MALT Design system went live in 2019 and continues to support BevCorp's global operations.
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 gave me the opportunity to learn how best-in-class design systems are built. I dove deep on best practices using component libraries, meticulously documented the slight differences between different platform components, and built empathy for the mental models of developers vs. designers vs. marketing managers in the context of a leading global beverage manufacturer. I grew my capacity to collaborate cross-fuctionally with diverse stakeholders. I led the discussion around how to structure the system's component pages to make sure users can to find the right information, quickly. I acquired deep familiarity with each 'atom' and 'molecule', having written usage, spacing, layout guidelines, and Do's and Dont's for each component.
While the methods for creating design systems may change and the process may differ, the experience of examining each component under a magnifying glass will stay with me for the rest of my design career, and I am consistently a voice in favor of standardization, accessibility, and a single source of truth.
