coAmplifi Design System
Project lead and designer, with 1 Web Engineer
UI implementation
coAmplifi 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.
The objective was to eliminate inconsistent styles, build a set of reusable design components, and document a comprehensive style guide use by the development team. This process aimed to streamline design workflows, enhance user experience, and ensure cohesive design language across the platform.
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
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.
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.
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
We successfully finish the version beta 1.0 for the design system. Now the design system was deployed and used in Dev team.
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.
Because of the trust from dev team, I am luck to have the chance to lead a internal tools development, it was a great opportunity to apply my development skills and benefits the development process. This close collaboration with dev team helped significantly improve the UI quality and delivery speeds.