How to design, build and manage delightful enterprise-grade experiences at speed and scale? …

What is a design system?

A design system is an accelerator to create better experiences while saving time and money through a set of guidelines that help make your work easier and faster. It is made of several components such as colors, text, buttons, icons, ect.

A design system is meant to serve as a foundation that supports both designers, developers, as well as everyone involved in a particular project.

A design system should be purposely simple, scalable and adaptable to design needs.

Software teams save 2,000 hours in dev and design time per pattern and component.

A Design System includes…

• A defined brand expression and design principles

• Reusable design resources and usage guidance

• Reusable components and resources

• Global patterns and flows

• A governance model for current and future growth

A Design System is a critical central source of truth, and all the resources necessary to deliver consistently and efficiently.

A Design System is an accelerator to create better experiences while saving time & money.

Advantages of a Design System?

80% efficiency improvement in individual component implementation

-IBM Cloud Platform case study, IBM, 2020

47% efficiency savings for front-end development

-ROI Impact of Design Systems, Sparkbox, 2021

74% of “leaders” have a dedicated team for their design systems.

-Unlocking Design’s Full Business Potential, Forrester, 2020

Design Systems increase speed to market by 28%

-Business Case for Design Systems, Fathom Analytics, 2018

Theme File

Before getting into the design system, one level below is the Theme file. All of the components used in the design system are pulling in information that help create, mold, and better inform how the design system UI elements are set up such as spacing, colors, typography, ect.

The theme file utilizes:

• Shapes

• Color Spectrum

• Color

• Typography

• Effects

• Spacer

• Screens

• Utilities

A couple examples:

Atomic Design Methodology

The Atomic Design approach to our Design System. Atomic design is a methodology composed of distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The stages of atomic design are:

1. Atoms

2. Molecules

3. Templates

4. Pages

Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time. Each of the stages plays a key role in the hierarchy of the interface design system.

Atoms

Atoms represent the most basic interface elements, they are the basic building blocks. They’re the foundation and supporting structure of an interface. Some examples include: Buttons, Checkbox, Tooltip, Pagination etc. Consider them like lego pieces, there’s no way to break atoms down any further.

The atoms file utilizes:

Molecules

Molecules are groups of atoms bonded together that have their own unique features. They take simple design features and pair them together as a more complete and cohesive UI element. They are concrete and reusable components. Through Molecules, you are starting to build out the page and create more purpose.

Breaking things down at the Molecules level makes testing easier, encourages reusability, and promotes consistency throughout the interface.

The molecules file utilizes:

Templates

Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.
A template displays all the necessary page components functioning together, which provides context for these relatively abstract molecules and atoms. When crafting an effective design system, it’s critical to demonstrate how components look and function together in the context of a layout to prove the parts add up to a well-functioning whole.
Another important characteristic of templates is that they focus on the page’s underlying content structure rather than the page’s final content. Design systems must account for the dynamic nature of content, so it’s very helpful to articulate important properties of components like image sizes and character lengths for headings and text passages.

The Slot components technique is a simple but powerful method that adds extra flexibility to your design system. If designed well, no one will have a need to detach components.

Slot Modeling helps deliver solutions more quickly: This technique allows solutions to be delivered in a short amount of time and designers can create custom components to swap with the slots.

Pages

Here is when we take those wireframes and build on them. It’s time to add all the final details. Templates are gradually removed to make way for actual pages that people may interact with.

This is what users will see and interact with when they visit the screen. This is what your stakeholders sign off on. And this is where you see all those components coming together to form a user interface. In addition to demonstrating the final interface as your users will see it, pages are essential for testing the effectiveness of the underlying design system.

It is at the page stage that we’re able to take a look at how all those patterns hold up when real content is applied to the design system.

Does everything look great and function as it should? If the answer is no, then we can loop back and modify our molecules, organisms, and templates to better address our content’s needs.

The page templates file utilizes:

• Landing pages

• Product listing page

• Product details page

• Review changes

• Plans

• Extras

• Checkout

• Confirmation

• My account

• Payments

• One time payment

• Activation

• DSP

• App

• Content blocks

A couple examples include:

Final Thoughts

It’s one thing to utilize and follow the rules of a design system, but it was an amazing experience to be a part of designing the system it’s self from the ground up and to be part of the team that vouched for the importance of the system at the grass roots level.