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!