ATLAS Design System
What’s the margin between these two sections?
What’s the alignment for this type of data in a table?
What color should this be?
Very often, we find that design guidelines alone fail to answer these reoccurring fundamental questions. How can we establish a better channel to communicate with the development team at MeridianLink?
The 4-man product design team at MeridianLink built out a design system and achieved two goals:
Established better communication between the design and development teams to eliminate reoccurring design questions
Empowered developers to make well-informed decisions during implementation
The positive effects of ATLAS on the product development process resulted in its adoption across all products at MeridianLink.
step 1: understand
We began by analyzing several design systems to understand how a design system would benefit our company. We also interviewed and shadowed people within the organization to learn about their experiences with our product.
step 2: synthesize
Next, we transcribed our observations into core principles for our design system.
The design system should be straight to the point, providing only the necessary information.
The design system should increase the knowledge of the users, allowing them to make well-informed decisions.
The design system should accommodate the growth of a product, providing one-size-fits-all specifications.
step 3: ideate
Next, we sketched out lo-fi wireframes on paper to quickly iterate our ideas. This method allowed us to quickly brainstorm and validate our assumptions with the development team through focus group sessions.
step 4: create
Following the Atomic Design methodology, we introduced components into ATLAS by increasing complexity. Designing the basic components first allowed us to reuse them to design the more complex components. We also created accompanying guidelines to notate the component’s function and behaviors.
step 5: evaluate
Finally, we collected metrics derived from the core principles and interviewed developers to evaluate the design system’s effectiveness. This step is crucial because the data collected not only tells us how we can improve in the next iteration but also proves the impact of the project to stakeholders.
project learning 1: Zooming in and out
A design system contains many components and guidelines. To ensure the cohesiveness of the bits and pieces, we have to zoom out once in a while to look at the bigger picture. Zooming out not only allowed us to evaluate our work from another perspective but it also gave our minds time to strategize what needed to be worked on while zoomed in.
project learning 2: meaningful data
Data is only impactful if they are meaningful to the user. So to collect meaningful data, we converted the core principles of the design system into measurable KPIs. For example, the design system was designed to boost the confidence of the developers. So to measure what effect the design system had on the developers’ confidence, we collected 3 different metrics:
How many design-related questions are we getting from development?
A decrease in the number of questions we get from development suggests that the design system is doing its job.
How many points are committed per sprint?
An increase in the number of points being committed by development suggests they are confident that they have enough information to work on cases faster.
How many points are completed per sprint?
The number of points completed per sprint confirms that the development team’s confidence is not just for show.
By analyzing the three metrics, we quantified the impact the design system has on the development process.
Project learning 3: Mixed-Method
Quantitative data alone doesn’t always tell the whole story. To really gauge the impact of the design system, we needed to collect some qualitative data to humanize the quantitative data. So we interviewed developers about their experiences with the design system so far. This was also a great way for us to gather additional feedback for the next iteration of the design system.
Continue to Project Helios Case Study