Creating a Design System from 0 to 100

my role

Experience and Visual Design

product

Software

sean mccormick
‍ux / ui designer

Creating a Design System from 0 to 100

my role

Experience and Visual Design

product

Software

The problem

A common situation when creating digital products is that things start organized when the product is initially developed, but over years of maintenance, new features, and assorted updates the overall experience starts to feel disjointed. Styles are inconsistent and similar functionalities that could be consolidated are maintained separately which wastes time. Users also suffer because patterns of interactions vary from screen to screen creating an uncertainty of what is going to happen when they interact with the product.

the solution

Creating a Design System where styles, information, interaction patterns, and interface components are standardized in one place as a source of truth allows for the digital product to be master planned from a high level. Since code is reusable this also means it takes less effort to develop new features and those new features integrate more seamlessly into the overall product.

anatomy of a design system

Design Systems are composed of multiple smaller systems that come together and feed off of each other.

Visual Style System

Typography, colors, and any other styles are defined to ensure the look of everything in the product is unified. These styles are often heavily influenced by branding.

Component System

The Visual Style System feeds into the Component System determining the look of each component. Buttons, fields, windows, and other controls are defined using the Atomic Design hierarchy of organization.

Interaction Pattern Library

The Component System feeds into the Interaction Pattern Library where user flows and micro-interactions are standardized using the previously defined components.
Example: A user clicks an image on a page it opens in a window with additional detail and a larger version of the image.

Information Architecture

The Pattern Library defines how users interact and navigate through the product, but the actual sections, pages, screens, and modals being navigated through need logical flows of information. The overall organization of the product should be mapped out to ensure all information is structured logically.

executing the design system

Figma is the tool of choice for design systems because master styles and components can be created with instances duplicated off the master. This ensures consistency and allows the designer to update their designs globally by modifying the master components.

Figma is also cloud based so files are never lost and design teams can collaborate on the same files in real time. That means everyone uses, maintains, and updates the same design system.

The Result

Once the design system is properly set up in Figma screens can quickly be built by pulling from the Styles, Components, and Patterns. Developers now have a clear source of truth, and the product is structured to be consistent and more usable. Future features can be efficiently designed and built without the worry of having inconsistency and disorganization.

Projects

Creating a Design System from 0 to 100

My Role

Experience and
Visual Design

Product

Software

Revitalizing Vehicle Comparison Pages for Acura

My Role

Experience, Visual,
and Motion Design

Product

Responsive Landing Page

Crafting a Premium Experience for Irvine Pacific

My Role

Visual and
Motion Design

Product

Responsive Website

Redesigning the Contiki Agent Experience

My Role

Experience, Visual,
and Motion Design

Product

Internal Portal

Let's Chat

Connect on

Linkedin

email me at

smccormick580@gmail.com