Design System

This case study outlines how building a design system that expands across multiple integrations is important to maintain consistency in the design language, regardless of the platform or product. To achieve this, the design system should be well-documented and easily accessible to all teams working on the project.

Role:

Product Design (UI/IxD)

Tools Used:

Sketch
Marvel
Miro
Confluence
Storybook (Dev)

Time Spent:

Four years (project is still ongoing)

Problem

Streamlining and implementing a consistent, standardized design system is a challenging task, especially as the needs and requirements from various teams within the organization vary widely. Not only do we need to be aware of the various needs among different teams, but we were also tasked with re-skinning newly acquired products and creating a consistent brand across multiple products and platforms.

Initital sketch of how we will connect various sources to teams

Research

Atomic design principles are essential to designing effective design systems. The principles of atomic design advocate for breaking down designs into smaller components, such as atoms, molecules, organisms, and templates making it easier to build consistent, scalable, and maintainable design systems. By following these principles, we can ensure that our design systems remain flexible and can adapt to changing needs and requirements. Atomic design principles also encourage collaboration and communication across different teams, helping to align design and development efforts. In addition, atomic design can lead to more efficient and effective design processes by allowing designers to focus on specific components and reusing them across different projects. Overall, atomic design principles provide a systematic approach to design that helps us create cohesive and functional design systems.

Code Becomes More Consistent

By developing the atoms first it will help reduce the number of errors in the molecules and organisms, thus reducing the amount of re-work later on.

Easier to Update

If any atom is changed it is easier to ensure that the molecules, organisms and the final look will be updated appropriately. Just as easily, any unwanted component can be removed.

Developers are Crucial to the Design Process

Design Systems are created in iterative loops to build up the components and final look. Having both Designers and Developers collaborating together and following the same system helps create a more structured, consistent DS.

Atomic Design Principles can be Applied
to Code

Atomic Design is already prevalent with HTML but it can also be applied to CSS and Javascript.

Design

The team used the research findings and came up with these design goals to create a consistent Design System for developers, POs and Stakeholders, as well as create a unified UI Kit for designers. The design goals are as followed:

1. Get Everyone on Board:

We need to work as a team to make it happen; one single designer can't put this together. We will get other teams and stakeholders on board (e.g. developers, POs, marketing, web technical services, etc).

2. Standardize our Design Framework:

All designs in the CX team will learn how to use our current Sketch UI Library and Sketch UI Kits. The CX team will use Sketch, Marvel, and Storybook for all their projects so design start to become scalable and consistent across projects.

3. Take an Inventory - Audit What We Have Today:

We need a comprehensive list of all components across all platforms to determine what is working, what is not working, and what needs to be resolved right away.

4. Prioritize Work and Establish a Baseline:

We are not going to get this right from the start but we'll continue to test, adjust, and learn.

5. Measure:

We will measure qualitative feedback from customers and teams: designers, developers, POs, and PMs.

Dark Theme Exploration

Conclusion

The use of Atomic Design Principles to create our Design Systems have improved our ability to build products holistically and deliver consistent components across teams. Utilizing Sketch, Marvel, and Storybook to circulate our design system we have managed to reduce duplicated efforts, speed up design iterations, onboard new designers and developers in different locations, and keep cross-functional teams on the same page.