Accessibility template

Problem

When I started in this role, it became abundantly clear to me that our product design process needed some work. If we wanted to make accessible experiences from the start, we needed designers, developers and QA to be on the same page. This required a number of things to take place:

1. Designers needed to take ownership of notating the structure, order, and intended function of their designs.

2. Developers needed to rely on these notations when implementing their code.

3. QA needed to test against these notations to ensure they'd been implemented properly. 

Research

To best enable communication across the board, I wanted to figure out a solution that could be used as the singular source of truth. The first step in getting there, was speaking to my customers. I needed to understand each team's requirements, and just as important, I needed to understand how to make this solution stick.  

Takeaways:

  • App fatigue was a major issue among each group, which made it clear I needed to find a solution in something we were already using. 

  • Feedback, comments and assets were being stored in multiple places, making it difficult to keep up with all of the moving pieces.

  • Nearly everyone was onboard and eager to find a better solution moving forward.

Solution

After many iterations, we settled on a solution that seemed to make everyone's lives a bit easier. I created a template housed in Sketch that could be pulled into any design file. Once complete, the template could be handed off to development and QA through Abstract (our design version control software), where everyone was able to comment or leave feedback in one place. All of the projects' assets were now living in one place.

Education was a huge piece in getting this template adopted. It was important that the designers, in particular, understood how to properly notate their designs for developers and QA. I created supporting documentation, and held office-hours to make sure everyone felt comfortable incorporating the template into their design workflow.

Design Assets

Accessibility template

Slide 1: Accessibility design template  / Slide 2: Accessibility labels / Slide 3: Real-life example by a designer