Design System

Reducing friction and increasing efficiency with design components

  • A design system is a comprehensive set of reusable components with clearly defined standards that enables teams to effectively create and manage digital products at scale with consistency.

    I collaborated with a design lead and UI developers to create a design system that helped streamline designs using a component library.

  • So how does an internal design system improve health outcomes? Great question! Ultimately, by maintaining consistency throughout a digital product, people are able to navigate and find what they need quicker and easier.

    Internally, the design system with it’s component consumption makes development quicker, which makes the timeline from RFP to production quicker. It’s a win win win situation.

UX/UI METHODOLOGIES

  • UI design

  • QA of implementation

  • Component library

  • UI Inventory

  • Style Guide

SOFTWARE

  • Sketch

  • Jira

  • Storybook

DELIVERABLES

  • Component library

  • Documentation

THE CHALLENGES

01. When beginning each new project we were designing from square one without pre-existing design components. We needed to create new design components for each project each time. This was cumbersome and wasted time. We needed a standardized, yet customizable, system.

Set the Foundation:

  • Conduct a UI Inventory

  • Establish Guidelines

  • Communicate Across Teams

02. Each client had their own brand guides to be used in their final product. This meant that designing the typography, color, and sometimes other components would need to be customized to each client.

Build it Out:

  • Generate Style Guide

  • Document Everything

01. SET THE FOUNDATION

01. SET THE FOUNDATION

Conduct a UI Inventory

Based on previous designs, we took inventory of all the components that we used in the final product. Some components were not reusable, others were necessary but not in their current state.

01. SET THE FOUNDATION

Establish Guidelines

We added guidelines for implementation. The Component Library guidelines includes:

LABELS

We gave each component it’s own unique label as agreed upon with both designers and developers. This enabled both departments to discuss and maintain components using the same language.

STATES

We included the basic state changes for all affected components, including default and subsequent states.

NOTES

I made descriptive notes for each component to describe what they were.

01. SET THE FOUNDATION

Communicate Across Teams

The teams gathered to discuss how we would talk about each part of the system, including component labels and states. This was necessary to establish before we began the work so that we could communicate the same language from one team to the other.

02. BUILD IT OUT

02. BUILD IT OUT

Generate Style Guide

I built a style guide in the form of a mock-up client. This ensured that UI developers, QA engineers, and other stakeholders could view how the components were used individually as well as in the context of a product.

02. BUILD IT OUT

Document Everything

I accompanied each component with the following documentation:

  • A clearly defined description of each component with how and when to use them

  • Visual representation of each component to ensure that the component and the label match

  • General guidelines of when and how to use the component