Design System

Design System

Product Owner ~ Pattern Library ~ Innovation

Overview

Every time we started a new project or product, the design team would need to redesign all the components from buttons to navigation. The rework cost in labor and dollars repeats for each project. The design system allows us to do this work once and use it for every project. Our outcome is then a consistent set of design principles and user interfaces.

The design system leads to time for innovation — when the basics exist, we have time for innovation. The design system allows my design team to spend time in each project, innovating new components and design patterns to solve more complex UI problems. By the simple fact, they don’t have to redo all of the essential design components necessary in a UI.

My Role: Product Owner

As the product owner of the design system:

  • I worked on the RFP request for proposal for the design system
  • Participated in the selection of the vendor for the project
  • Worked with the vendor through all phases of the design system design and build as the product owner
  • And now I manage the ongoing backlog, training, and process of the design system

“It isn’t enough to create a design system –
you have to integrate it into your company culture."

Design and Planning

Workshops

Once the vendor was on-boarded, we held several design systems workshops.

  1. Visual Inventory – present and explore all of the existing components in our company's user interfaces.
  2. Defining – Best Practices, Colors, Topography, and Governance
  3. Component Prioritization – the initial design system includes the most-used components in our software. The systems methodology is a cross between Brad Frost's Atomic Design and Design Systems by Alla Kholmatova.
    Download our Workshop Component Prioritization in .xlxs

The design system ensures every individual that interfaces with the design system content are on the same page. When everyone from the business team to developers to copywriters is speaking the same universal design language, projects, products, and initiatives can move seamlessly through the process.

My design system consists of three main pieces:

  1. Design System Platform (DSP)
  2. User Experience Tool (UxT)
  3. Components Library Subsystem (CLS)

Next Steps

I had the component prioritization list divided into ten sprints three weeks each. In the initial sprint, components get a design, including layout, color, and interaction for the DSP and Uxt. In the following sprints or the next sprint, the design is coded and added to the CLS. Check out my system in action in the next three sections.

1. Design System Platform - DSP

Service Design UxTool

Visit our DSP - Design System Platform (opens in a new tab)
The DPS is the visual display of the design system, and it allows us as a design team to share out to developers and designers for everyone to see what is available in our system.

2. User Experience tool - UxT

The Uxt has four pallets that represent our available design system in draggable objects to place on wireframes. Each component in the Uxt matches our Design System Platform - DSP. I have the design team create each high-fidelity wireframe from lo-fidelity with the Uxt pallets during agile sprints for our products.

My design process has the design team begin with lo-fi wireframes coming from design thinking workshops, design reviews, and paper usability testing. When a design is ready to move on from the lo-fi stage to a high-fidelity wireframe, the design team, and I use the Uxt.

Sketch of Wireframe
Service Design UxTool
UxT in action ~ build High-Fidelity!

3. Components Library Subsystem - CLS

The CLS Components Library Subsystem houses the code for all the items in the design system. There is a matching set of code for each detail in the DSP and Uxt. Developers can pull the code from the design system CLS as their base project.

Design System CLS in the works!

UXpin High Fidelity Wireframe
1. Uxpin High-Fidelity Wireframe

Opening the wireframe from the Uxt, I can view the specifications to use for the HTML/CSS. In my process, I have the design team build the responsive template to hand-off to development. The development team will handle the angular, JS, and integrating the appropriate APIs.

Base Template
2. Base Template

From the design system component library, I open the base template. The base template includes the navigation frame, button bars, and a basic form. The CLS has a set of most frequently used templates for our products.

Easy Changes
3. Update the Easy Elements

According to the wireframe, I need to update the

  1. Page title
  2. The tech type navigation is a part of the base template
  3. Form title checking that is a subtitle2

Form Field

4. Form Field Stub

On line 164 in the code, the structure for a form component is stubbed out. I copy-paste the code twice, creating three form field stubs.

Radio button Copy

5.CLS Radio Button Copy

The first field on the form is a radio button. I open the radio.html, in the component folder, to find the code for a horizontal radio button. Seeing the correct radio button, I then copy the section of the code.

Paste Radio Button

6. CLS Base Radio Paste

I paste the base radio into the form and check the page.

Tweak Radio Button

7. Tweak the Radio Buton

The base radio needs a few changes. I type in the label text, radio choices and, and add a class

Text input copy

8. CLS Text Input Copy

The second field on the form is text input. Open the text.html, and copy the section.

CLS Text input paste

9. CLS Base Text Paste

After the paste, I double-check the field.

Small Changes to the text

10. Update Text

Similar to the radio, the base field needs a few tweaks, I update the text and check the page.
The same coding steps apply to the second text field.

Test Responsive

11. Test Responsive

Our styles and templates already have the responsiveness built-in. I test all the breakpoints. The page is ready for a pull request review and the development team.

Final Code

12. Finished!

With a straightforward process to build wireframes and code wireframes, the design team now has more time for new design work on each product.

Design System Wrap-up

Our Design system has been in productions for a little less than a year now.

Our adoption rate in the design team is excellent, and we are moving towards better adoption in development.

The new components process, to add new components, is too complicated. I am working out a better method with simplifying steps.

Our time available to design, research, and run usability tests have increased significantly.