Building a High-Quality, Accessible, and Scalable Design System
Brief
This project focused on refining an existing design system to improve consistency, accessibility, and scalability. By reviewing real usage scenarios and identifying gaps in components, interaction patterns, and accessibility standards, the system was optimized to better support designers and developers while delivering a more inclusive product experience.
Role
As a UX Designer at Wistron ITS (WITS), I owned the creation and ongoing maintenance of the design system based on client needs. I refined design principles and usage scenarios to deliver a more accessible and scalable experience.
The screens shown in this portfolio are for illustrative purposes only and do not represent the actual project interface. All rights belong to the original owner.
Color Contrast Optimization
Impact
Enhanced readability and visual comfort by refining color contrast across core components.
Identified insufficient contrast in key UI elements that impacted readability. Through a color system audit and WCAG AA validation using the Stark plugin, I refined 21 chip color variants while preserving brand consistency, resulting in improved visual hierarchy and accessibility.
Button Focus States and Interaction Clarity
Impact
Improved interaction feedback and keyboard accessibility through clearer focus states.
Reviewed existing focus behaviors to better support keyboard navigation and interaction clarity. By refining focus styles across components, users can more easily understand their current state and available actions, improving overall usability.
Notification Toast Standardization
Impact
Increased consistency and cross-team alignment in notification usage.
Identified unclear usage of inline messages within the notification center. After defining distinct scenarios and introducing a standardized toast pattern,I documented clear guidelines covering appearance and disappearance timing, style, and maximum number of toasts to ensure consistent implementation across teams..
Number Stepper Improvement
Impact
Reduced cognitive load and improved usability during numerical input.
Found the original number stepper conflicted with common design conventions. After researching standard patterns and aligning with the team, I proposed a revised interaction that feels more intuitive and easier to use.
Summary
I realized that creating a single component is very different from designing components that span multiple product lines. Working on the design system taught me to consider the full picture early and anticipate how components will behave across various scenarios. Beyond ensuring consistency across products, it is crucial to balance the needs of designers and developers. Additionally, accessibility considerations such as color contrast, touch size, and focus visibility must be integrated from the start.