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
Set-up and led weekly design system check-ins to drive project progress
Set up a team tracker to delegate and track product audit
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.