BUILDING CAPABILITY

UX Designer + Researcher

Home > Work > Building Capability

Overview

I collaborated with my UX engineering colleague to create an extensive, scalable design system is used to maintain consistent UI design across all platforms and increase efficiency of our small development team.

Challenge

Design Systems are massive undertakings for any size of an organization.

My colleague and I had to advocate time during each sprint for this type of system to be prioritized.

Throughout the years, CMMI external and internal systems have been built by different teams. This disconnected development and design history led to a mismatched UI.

Outcome

Over the past year, we've updated our design system with new patterns and components.

We launched an internal beta version of our design system for our team to use. We want to test and expand on the system before me make the system public.

The system now includes design guidelines, UI patterns, components, and is built using react and redux.

Above all, we have elevated the power of the design system to our colleagues and executives as a powerful tool for the organization, not just the development team.

Our Process

The best place to start a design system is understanding where you are and deciding where you want to be.

For my colleague and I, the starting line was conducting an interface inventory of all of the UI elements and patterns that existed on all of our systems.

Conducting an Interface Inventory allowed us to better understand all of the different UI elements across our systems. I only recommend this method to teams that can dedicate the time and patience needed to complete this exercise.

We needed a collaborative organization method to determine where each UI element should be placed in our design system catalog. We wrote each element on a post-it note and clustered similar elements into groups create an organized design system by principles, components, and patterns.

We followed the Atomic Design framework as an organizational structure for our design system.

We followed an iterative process in that we added new components or patterns as we tackled new problems. By the end of each project, we had an organized repository of every UI component and pattern in a CMMI system.

I documented the usage guidelines for each element using Google Docs so my teammate could access them for implementation.

And the implementation/development of the system was built using React JS and Sass, including Redux components for advanced state management.

Principles

The design principles are the foundation of all of our UI elements. These principles make the system scalable.

All new components and patterns must follow these guidelines before being added to the system. These strict guidelines are key to maintaining a cohesive design system.

Principles included typography, color, layout, and iconography.

Components

Components are the basic building blocks of our design system. You can put components together to form more complex patterns.

Components are the smallest elements in our design system, they cannot be easily broken down any further.

Components are the core of the system. It was important that we made the design principles, design specs, and code snippets accessible to everyone to maintain consistency across the system.

Patterns

Patterns are made up of smaller components or otherwise consist of more complex blocks of functionality, but like components they are reusable design patterns, each with a corresponding block of HTML markup that will bring in all of the styles and behavior needed to realize those patterns.

For every pattern in the design system I wrote design principles so new designers or contract designers knew how to use each pattern in the system. Designers could also use the code snippets to quickly prototype concepts.