coAmplifi Design System
Project lead and designer, with 1 Web Engineer
UI implementation
Different pages had varying designs, leading to a fragmented user experience.
Introduction of design Tokens & utility classes, unification of components, and design system.
The app provides a more cohesive user experience across all pages, and easier to scale and adapt the product to new requirements.
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.
The application is not consistent and maintainable.
Visual overload, increased frustration, and reduced efficiency
Undermined professional brand image, and weakening credibility
Repetitive work, difficulty in scaling, and communication barriers
Increased time to market, high maintenance costs
A single source of truth for both designers and developers
Visual overload, increased frustration, and reduced efficiency
Elevated brand perception with strong brand identity
Streamlined development process and better maintainability
Reduced operational costs and scalable for growth
Unify existing styles, eliminate redundant components, establish standard documentation, design tokens and component storybook.
Pave the foundation for future growth.
The design process for this project was structured into three key phases, building upon the previous one to create a cohesive, scalable, and branded design system.
Why design system is necessary for us
By using style variables (like colors, typography, and spacing) and reusable components, we created a unified system that both designers and developers could rely on.
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.
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
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.