Design System

Standardize design components to address product inconsistencies

I have omitted confidential information in this case study. All information in this case study is my own and does not reflect the views of Verily.

Organization
Verily

Role
UX designer

Team
Clinical Studies Platform

Duration
2021 - present

Medium
Web, mobile

WHAT

Overhaul the design system to address UX & engineering debt across the clinical studies platform

COMPLEXITY

4 product pods using different material components (M1, M2, ...) and different UI styling code bases

IMPACT

Co-development of design system through driving product audit and component creation

PROBLEM

Many parts of the product had been developed without UX, leading to UI inconsistencies

The existing Clinical Studies Platform has many feature areas

With a lot of inconsistencies

GOAL

Develop a comprehensive component library to enable faster design & development

Method
Rally the UX team to audit all parts of the product to uncover inconsistencies

Outcome

Next steps
Document product inconsistencies

Method
Analyze gaps in our design system

Outcome

Documented in Figma, all instances of components, their CSS, and behaviors across platform
Transferred to slides for each component (e.g. from atomic: type, color, buttons, up to complex: grids, modals, ...)
Identified all inconsistent product areas

Next steps
Gain engineering & product buy-in to allocate dedicated headcount to this effort

Method
Connect with engineering and product to determine the best path forward

Outcome

Discovered product areas were using different Google Material components (M1 vs M2)
Gained buy-in from product to develop design system consistency
Zero time to build own design system from scratch > audited available systems to use out of the box, side-by-side comparisons to weigh pros & cons

Method
Delegate components design work to address key use-cases

Outcome

Use MUI library, but develop styles on top to customize for our own product needs
Develop specific components as needed, working xfn UXDs to align on style and behaviors

DESIGN SYSTEM IMPACT

Standardization
Shared language both atomic (type, color, etc) and larger (templates, tables, etc) components.

ENG velocity
ENG stops using unique code for every project.

User experience consistency
Consistent experiences across all product areas.