Accessibility Case Study

YouView High Contrast Mode

PROJECT OVERVIEW

Brief

Create an accessible version of the YouView UI, taking into account various 
sight-related disabilities to make the platform easy to use by all 

Client

YouView TV LTD

Target Audience

Customers who currently use the service but may have difficulty using the product due to sight-related issues. Customers who wish to have a more accessible TV service

 Project Date

2017

Focus

As I was the design owner of the accessibility release on the first generation of the YouView service it made sense for me to take the project over for the relaunch of the service. With communication and feedback from the RNIB, SCOPE as well as partially sighted consumers in user testing allowed the team to create a bespoke UI skin to help everyone use the service

Role

Product Designer

The Goal

The goal of the YouView High Contrast Mode was to enable users with a wide range of visual issues to be able to use the YouView product at the same level as people with no visual problems.  As the BBC was a founding member of the YouView product, it is essential that the company followed the BBC Trust guidelines for accessibility. With this in mind, the approach to acceptance criteria for the YouView High Contrast mode was much higher than it would be at other companies. My experience working on the accessibility mode of the previous YouView UI made me a prime candidate to lead the project and I took it on with the goal of making a great user experience.

User Research

We took the initial research from previous accessibility work as a starting point for this new project. In the previous YouView design, the team worked very closely with partially sighted users for a constant stream of feedback and we continued this process we moved towards the next phase of the user interface.
As a team, we were also in constant communication with two of the UK’s biggest disability charities the RNIB and SCOPE to give us an insight into the challenges that people with disabilities face in day to day life.

A big part of our research came in the way of using a toolkit from the University of Cambridge which allowed the product design team to simulate mild vision loss. This toolkit consisted of glasses which replicated acuity and contrast loss. These glasses could then be stacked up on top of each other to analyse how different level of eyesight issues will affect the ability to see and interact with the product  

We also spent time conducting competitive research in both the TV industry and wider, trying to get a sense of where the competition put their focus on helping disabled customers. By looking at rivals we could see where the gap in the market stood and how we could use our expertise to create a bespoke experience that solved the brief and created the best solutions

Design Process

One of the main challenges  in creating a UI based around accessibility is the need to remove any gradient that could obscure text. This was reported by both charities as the main reason why partially sighted users will struggle with the experience. With this in mind we had to explore how to approach the design in regard to this, comparing the removal of the gradient with the idea of shifting it further on the screen
Comparing different concepts for the tile asset

Another challenge was the highlight state for the sections of the UI. After User Research and testing it led to having a few ideas, most of which consisted of a solid highlight state. These versions were then presented to both charities and a number of the user-base with eyesight issues. Feedback taught us that solid bright highlight states were actually worse for the user as it caused a bleeding halo-like effect which did not increase visibility at all and rendered nearby text completely unreadable.

Specs and assets shared with development teams

Presenting Concepts & Feedback

We wanted to present two concepts that worked to solve the original brief. Using the evidence and information we gathered from our user-research as well as our deep look at the competition we presented two different concepts to stakeholders. Both had gone through vigorous prototyping and testing in the team and we were looking for final feedback before we took the project into our agile backlog.

The feedback we received from our concepts shaped the final  stages of design and altered some of our directions as we moved into development. We were given the green light to progress with the black version of the UI and started to create assets and specifications for the developers

Subtle Design Touches

As we took the design to its later stages we wanted to ensure that the YouView UI kept its delightful little touches that made it such an attractive design in the first place for customers. I ensured that these touches remained even when the user wanted the High Contrast option turned on.

Design
Solution

The final high contrast version incorporated the client feedback and we made adjustments to the highlight state to increase the contrast levels of text.
Shown below is a range of the final visual design implemented by our development team, as well as a way to compare the high contrast UI with the standard version.

Results & Reviews

“A  big advantage of making the accessibility features available for all, allowed those who did not think of themselves as disabled to enable the functionality without any fuss”
Steve Tyler, Head of Innovation and Development at the Royal National Institute of Blind
“In terms of accessibility, (this box) has the potential to be a cut above the rest if the zoom feature was fixed particularly and a few minor changes to the positioning of content as stated above. Having said that, I think the high contrast option is worth its weight in gold and will be upgrading my current BT Vision + box to this.”
Customer with Aniridia
“The YouView high contrast display, regarded by the RNIB as one of the best available on the market”
OFCOM