Menu
.png)
Recognizing inconsistencies in the usage of the Toggle component across various projects compared to other similar elements, such as checkboxes and dropdowns, I took on the task of standardizing its usage. The goal was to make it more adaptable across contexts while integrating top-tier usability and accessibility practices.
A thorough evaluation revealed inconsistencies in toggle application, appearance, and accessibility compared to other components.
.png)
Toggle behavior similar to checkbox.
.png)
Toggle behavior similar to button.
I delved into toggle design guidelines established by industry leaders like Google and Apple. This research provided valuable insights into component specifications and best practices.
.png)
Google material toggle guidelines.
.png)
Apple interface toggle guidelines.
I revamped the toggle component, introducing variations in states, sizes, labels, and accessibility features for a more inclusive user experience.
.png)
As-is Toggle component.
.png)
To-Be Toggle component.
.png)
Toggle specification.
Detailed guidelines were meticulously crafted to define the toggle's purpose, usage scenarios, differentiation from other components, best practices, and placement recommendations. Practical usage examples were also included for clarity.
.png)
Component overview.
.png)
Do & Don'ts
Presenting the guidelines to the product and engineering teams was crucial. Their comprehensive feedback and development feasibility assessment led to further refinement of the toggles. Ultimately, the improved toggles were added to the engineering backlog for implementation.
.png)
Design system backlog.
By standardizing the usage of toggle components and integrating accessibility best practices, we have not only improved usability but also ensured a more inclusive experience for all users within the Waresix ecosystem.
Design team collaboration.
Guidelines serve as the north star, ensuring designers follow a consistent path in their designs.
Successful design systems thrive on collaborative efforts, incorporating diverse perspectives and feedback for continuous refinement.
Drawing insights from the design wisdom of other companies accelerates the evolution of our design system.