Improving visual accessibility post testing

Throughout this project we ran a number of moderated testing sessions which allowed us to observe customers complete specified tasks, think out loud and answer questions about their experience.

During the second round of usability testing, we decided to add an accessibility cohort. These participants had a range of visual impairments and had a normal and high contrast mode prototype to go through.

Findings:

  • Overall accessibility was good

  • Some focus states were confusing and unclear, specifically on the order summary screen​ - participants found it difficult to understand what was clickable and what wasn't and where their focus was on the screen.

  • The free trial ribbon was often mistaken for part of the logo and lacked colour contrast

  • Busier background images made it difficult to read information

Snapshot of notes from testing using Miro

Solution:

  • The order summary journey was simplified to make it more clear

  • Aligning with existing behaviours - focus always starts on the left of the screen

  • More defined states were developed to allowed users to know when something can be clicked

  • UX copy was updated to make information more clear and concise

  • The background was updated to create a higher contrast for lighter text

  • Free trial information was moved to a more logical place and made more visible

​

Challenges along the way:

  • Finding a balance of required legal copy and UX copy that could all fit within the template created

  • Challenging existing templates that didn't work within service journeys

  • Creating a balanced and consistent layout that worked throughout the journey

High contrast mode prototype for visual impairments

Before testing

After testing