Creating a scalable and accessible design system for all our products.
Problem Statement
Over the past couple of years, our front-end developers started a design system but didn't have designers to define the styles. How do we leverage their work and create a complete design system?
My Role
Create the vision, best practices, and found for our design system. Collaborate with UX designers and engineers to identify and build the components we use in our products.
Discovery.
Understanding where we were starting with our design system.
Discovery
Infant state.
As we evaluated the current state left by previous designers, we found that it was still very limited.
Where We Started
Design System Evaluation
11%
Foundation Elements
Main Colors Charting Colors Avatars Typography Experience Principles Mobile Applications
13%
Base Elements
Icons Input Fields Form Elements Chips Notifcations/Snack Bars Status Indicatiors
0%
Compound Elements
Vertical & Horizontal Tabs Breadcrumbs Table List Views Color & Date Pickers Look Up Dialogs Edit Profile
Creating a Foundation.
Setting standards to make sure we designed as a team and created great experiences.
Foundation
Design Principles.
To help the team understand if a component was built correctly we established experience principles we wanted to ensure.
Foundation
Unifying Colors.
Defining standard colors to be used in all products formed the foundation of our Design System.
Foundation
Interaction Model.
Throughout our 12 products, we use common patterns but most aren't similar. We standardized these interactions across the board.
Foundation
ADA Compliance.
Making sure our components meet ADA compliance is a key focus as we build new components for our system.
Speed to Concept.
Having a design system isn't beneficial if it doesn't speed up the team.
Speed to Concept
Design Libraries.
Creating libraries helped our design team deliver concepts almost 240% faster than previous projects.
Where We Are Today
Design System Results
100%
Foundation Elements
Main Colors Charting Colors Avatars Typography Experience Principles Mobile Applications
98%
Base Elements
Icons Input Fields Form Elements Chips Notifications/Snack Bars Status Indicators
80%
Compound Elements
Vertical & Horizontal Tabs Breadcrumbs Table List Views Color & Date Pickers Look Up Dialogs Edit Profile
