Beacon: Mercedes Benz Design System
Create a design management system (DMS) to unify mbusa.com components and modules and improve both designers’ and engineers’ work processes.
Role: UX Designer/Researcher
Team: 3 pms, 1 visual designer, 3 UX designers/researchers, engineers
Tools: Figma, Story Book
My contributions
Interviewed team members to understand the pain points with the current process
Developed research plan to identify what our new DMS needed to address
Collaborated with developers and our visual designer to create a single source of truth, the DMS
Context
My team had the Mercedes Benz account for ten years, however there was not one centralized source of truth for design components and modules. As a result, many components and modules were one offs that behaved differently and led to an inconsistent site experience.
The Problem
For ten years, my team worked on mbusa.com and designed and deployed countless new experiences. However, there was not a single source of truth for the specs of all the modules and components that were created during those countless new experiences. As a result there were two main problems that led to the creation of this project.
One problem was there was a heavy reliance on team member’s historical knowledge to recall what modules existed as well as their behavior. This meant that the design process was delayed as a designer had to track down who had the most up to date information on the experience they were working on. This also meant that designers created a lot of one off modules since they did not have a comprehensive scope of all the components that existed.
The second problem was that designers and developers were not aligned when it came to components’ behaviors which made reusing components a difficult process as well.
Goals
We wanted the DMS to both improve our internal processes and the mbusa.com site by accomplishing these goals
The Process
This project required a lot of different types of research before working with the visual designer to create and correct the modules and components.
Key Findings from Think Aloud Testing
Our team needs a streamlined resource that is reliable and consistent
The current process for our team to find sources of truth take TIME
auditing the live site
relying heavily on team members with historical knowledge of the site
referencing a combination of the codebase and style guide
Not everyone was sold on the DMS because changing to a DMS will result in new work flows and our team wanted to know what that would look like
Final Design
Component States: Checkboxes
After working with our visual designer and engineers, we were able to create a living, breathing DMS for our team to use. Welcome to MBUSA Beacon.
Light Theme
Outcomes
Dark Theme
Beacon has successfully enabled collaboration by promoting a culture of collaboration (shared language, communication changes, update notifications, cross-functional collaboration). It improved our design efficiency by 15% reducing redundancy, incorporating reusable components and versioning (the entire system and individual modules), have a clear governance strategy, and test early and often (functionality and accessibility). Additionally, Beacon reinforced Mercedes’ brand consistency in the digital experience.
Wrap-up
This project is currently live and has been used to design and deploy experiences on mbusa.com. If you have any further questions, please feel free to reach out!
Thanks for reading!