Curae Design System
There were too many variations of buttons, tabs, list items, and other components, so I built the Curae Design System to ensure consistency between the design and the live app.
Team
Project lead
1 Web Engineer
Length
4 months
Responsibility
Design advocate
Client
coAmplifi Apps
Project Overview
I eliminated inconsistent styles, created a set of reusable design components, and documented a comprehensive style guide used by the development team. This process was designed to streamline design workflows, enhance the user experience, and establish a cohesive design language across the platform.
Problem
Our products faced challenges due to the absence of a brand guideline or documented design system. Users experienced frustration from inconsistent behaviors across the interface, caused by varied and unpredictable styling decisions
Solution
Implemented design tokens, a design system in Storybook, components in Figma, a style guide, and an internal advocacy campaign within the team.
Outcome
Increased design-to-development consistency, fewer visual QA bugs and decrease developer onboarding time by 25%.
Plan
From ground to top
Employees spend excessive time on non-clinical tasks, reducing overall productivity. Many users either avoid logging tasks or do so incorrectly, leading to inaccurate work-hour data. This results in mismanaged resources, billing errors, and compliance issues, ultimately decreasing client satisfaction and retention
Design Process
Build bridge
consolidate the Design tokens
We reduced all colors into structured color scheme with WCAG 2.0 Compliance. And build up the the font set across the application. With design tokens, user will be able to see consistent styles in all pages through out the experience in current implementation and future features. And the communication with Dev team is more simple without misunderstanding.
Color Palette Audit
Design Token
Define style tokens to connect the design styles and development.
Style Structure
Reorganize the style file structure to built the foundation of all style variables and included design tokens.
Less new code with more consistent
Component Library
Principles
Reliability Simplification & Consistency
Based on the current issues users have regarding to our UI and experience. I suggested 3 design principles to guild our design system iteration.
With the design principles, I documented the UI elements can be unified with design system and discussed the feasibility and priority of implementing these components. After presented with with Dev team and received validation from PM team, we focused on refining the styles widely used and creating demos for common patterns.
Documentation
Single Source of Truth
After the development team established the UI guidelines for more consistent styles and layouts, we soon realized that the implementation was more complex than we initially thought. To address this issue, we collected all the areas needing changes, organized them by similarity, and assigned them to a few dedicated developers. Additionally, we enhanced the utility classes library to serve not only as a common language between engineers and designers but also as a single source of truth
Component research & Implementation plan
UI annotation with utility classes
Hand off with design system - Task component
Storybook Site
Grand improved UI quality
As we went through these iterations and cleaning up process, our software is more predictable for customers. Customers views our service more reliable and trustful.