Accessible Design System

How we start?

The project inspired when my partner and I noticed the shortage for smartwatch design system despite its popularity. Additionally, the focus on aesthetics often overshadows accessibility, leading to visually appealing products but lack inclusivity.

HMW statement

How might we bridge the gap in between aesthetics and inclusivity to enhance the smartwatch interface design, making it accessible for wider range of users?

accessible Design System Starter Kits for Smartwatch: NYC Map Edition

My partner and I were passionate about addressing the often-neglected challenge, in designing the smartwatch to support people with visual impairments

contribution

  • Spearheaded in designing the design system
  • Created UI sample interface design for smartwatch

Team:

2 Product Designers

Duration:

7 Weeks

Roles:

Design System
UI Design

The approach

We provide an accessible design system and UI starter kit for smartwatches, enhancing usability, especially for people with color blindness.

Launch to product page

Design Strategy

Develop an inclusive smartwatch design system focusing on visual cues for people with color blindness.

Foundations

Typography with
WCAG AA level

Various font styles are offered to fostering flexibility among all designers. We set up line height with 1.5 times the font size to adhere to WCAG AA level accessibility guidelines. For leverage the space for small screen, while still concern on accessibility issue, 14px is the smallest font size allowed.

Interface starter kit

Basic components with 3 visual design levels

As mentioned above in the 'iterate' section, here more examples of how we divide our design system into 3 different visual levels.

Process

Tailored all UI components

Follow WCAG 2.1 guideline

Iteration

Gain feedback from experts in the industry

We reached out to experts in our network to gather feedback on our products from multiple aspects. Here are some examples of their opinions.

Design iteration

I enhanced visual cue and color contrast in response to feedback, while broadening our design system's to encompass three levels of visual: basic, accessibility, and color blindness considerations.

Accessible Beauty, Design for Everyone

Next Steps

To enhance the design system, I would integrate additional WCAG guidelines such as screen reader, voice-over support, alternative text, and more. I would also expand the system to cover diverse contexts and industries, and gain feedback with a varied group; individuals with color blindness, designers, and developers.

Key takaways

    Prioritizing the MVP and defining the scope of work at the outset is crucial, as it aids in project management, ensuring that the project is completed on time and within the constraints of the minimum viable. Accessibility design extends beyond color contrast and font size , encompassing aspects such as screen readers, voice-over, alternative text, and keyboard navigation, as outlined in the WCAG accessibility guidelines.

    Get in touch for more project details!  

    Next Project