Working smarter with a design system

Revamping the design system for a growing design team

Challenge

As our products and design team grew in sophistication over 3 years, it became clear our legacy design system needed to scale. Additionally, with Adobe XD being discontinued, we took the opportunity to transition to Figma and overhaul our design system.

My Role

Design Lead User Research User Interface Design

Problem

Visual Consistency at Scale

As our team doubled over 3 years, maintaining visual consistency across our products became challenging, leading to divergent styles.

Transition from Xd to Figma

Adobe XD's discontinuation prompted our team to transition to Figma, forcing us to reassess and overhaul the design system.

Misalignment with devs

The high turnover of development team and tendency to rely on their own style sheets caused products diverging from designs.

Research

Design Audit

I audited UI components across our wireframes and coded prototypes. I found visual inconsistencies with components having drastically different styles. Also, some of them had color contrast accessibility issues.

Competitive Analysis

Creating a Blueprint

I created a design system map to shape priorities for what components would be most valuable to include. All 6 team members contributed feedback during the design review sessions to evaluate existing and missing components.

Key Insights

Atomic Design by Brad Frost

Start with granular, atomic components to enable flexibility and customization Larger, more complex components can be difficult to manipulate

Cater to Stakeholders

Design for the VA Disability Benefits adjudication system Standard design systems may not meet the precise needs involved in VA projects Difficult to maintain consistency

Efficient Customization

Creating variants enables faster design updates and customization Defining different states using variables allows reusing existing component

Information Architecture

Style

Typography

Colors

Grid System

We implemented a 12-column grid system to allow flexible layouts. This lets us divide space into columns breaking down to 6, 4, 2 as needed. An overlaid 8px grid provides precise alignment of elements and consistent vertical rhythm.

Icons

I designed custom icons to represent VA-specific elements like the DBQ disability benefits questionnaire. For general usage, I leveraged Google's Material Design icon library, which provides a vast selection of easily recognizable icons.

Components

Buttons

Components

The component library contains: General components like buttons, modals, and messages to enable common UI Features. VA-specific components tailored for VA needs, such as benefits calculator input fields.

Templates

I created reusable templates by integrating components from the previous stage. The templates include file drop zones and fillable calculators. This makes process straightforward, fast, and adaptable.

Pages

UX designer Eric led creating calculator pages based on the templates. These calculators are frequently used in our work. Having predefined pages saved significant design time, with the current count being: 10 Body Systems Calculators 38 Individual Disability Calculators

Evolving from Atom to Page

Impact

Efficient systems, happy designers

“As the newest designer on the project, the design system that Yuri created was critical to my ability to quickly onboard and start working on design. Her work is always meticulous, organized, and easy to follow.”

Abena

UX Designer

“The design system has been an integral part of designing with visual consistency with all the other work, and minimizes the amount of decisions I need to make, allowing me to work faster and smarter.”

Brie

UX Designer

"The design system provided by Yuri helps me on so many levels with my daily tasks. It saves me time and allows me to replicate multiple screen designs that share the same components with ease."

Eric

UX Designer

Collaboration with developers

I created a set of reusable message components for common scenarios. The development team documented use cases to guide implementation. Developers then select the appropriate message component as needed. They appreciated having consistent components rather than building them from scratch.

Reflection

Contribution Guide

The design system improves through collective contribution. To enable continuous enhancement, we must establish clear contribution guidelines and make them easily accessible.

Regular Maintenance

Our design system began well- organized. However, with more contributors, some clutter emerged. To maintain order, we should dedicate time for regular technical housekeeping.

Collaboration is Key

My coworkers’ contributions consistently evolve the design system at scale. Maintaining open communication channels is key to maintain effective design system.