CureMint Design System
A set of thoughtfully designed and accessible components and design standards that improved the user experience and reduced design time by over 65%.
UX Designer
Product Manager
Technical Writer
My Role:
Designed in Figma
Documented in Zeroheight
Tools:
2 UX Designers
1 Full Stack Engineer
Team:
CureMint lacked a single source of truth for how components, patterns, and content should be implemented. This resulted in high product development overhead and an inconsistent user experience.
Problem:
The creation of a scalable and accessible design system that can be applied to any project to improve UX, UI, and product delivery.
Solution:
Design Process
I led a brand workshop in collaboration with senior leadership to define and expand upon the CureMint brand, thus establishing its core values and personality.
Brand Workshop
A typeface was chosen to align with the brand voice and support specific use cases, such as displaying tabular figures in the interface. The existing color palette was updated to enhance accessibility while maintaining brand integrity for a modern and balanced UI.
Typeface and Color Palette
After deciding on the overall brand of CureMint, comprehensive brand voice and tone guidelines were developed and shared across the company, along with a mini-course for employees to ensure consistent application of the brand's voice.
Brand Voice and Tone Guidelines
Collaboration with Engineering led to the selection of an icon library which seamlessly integrated with the brand and facilitated easy use for designers and developers.
Icon Library
We created a set of values that would act as a compass for the product and keep our entire team on the same path as we moved through the design process. These principles were specific, nuanced, and actionable.
Design Principles
We wrote guidelines for grammar, mechanics, and product vocabulary based on best practices and extensive research of other design systems. This included guidelines for inclusive language which I later turned into a mini-course for CureMint employees.
Content Guidelines
A systematic approach was followed, involving research, component creation, collaboration with engineers, and comprehensive documentation to ensure consistent and well-documented components.
Component Development and Documentation
Designing more components and patterns to fill out the complete system.
Building working components with a dedicated front-end engineer.
Ongoing monitoring, refinement, and user testing to continuously improve the design system, supported by regular updates and release notes.