Optimising the Royal Bank of Scotland and NatWest apps for accessibility

How we’re designing a user interface that can’t be seen.

(Copyright DBSV / Friese)

Designing for something you have no understanding of is an inherently difficult task. Designing for a blind user was certainly an unfamiliar one as well. One of the many challenges with optimising the accessibility of an app is the fact that you are dealing with multiple different problems for unique capabilities and needs. Solving something for one user might actually make it more difficult to use for another. The needs of a completely blind user is very different to that of a partially sighted or colour blind user.

Understanding your users needs is a fundamental element of any design process. But what do you do when the user needs are so far away from anything you can relate to that the only thing that helps is literally stumbling in the dark?

There were three main elements that helped our team design a better experience:

1. Accessibility experts from the Royal National Institute of Blind People (RNIB) developed a thorough report containing every issue or potential pain point within the RBS banking apps. Throughout the process we worked with consultants from RNIB to get a better understanding of the underlying issues and how to best solve them.
2. Workshops with blind users to understand common pain-points.
3. Experiencing it first hand. -Forcing yourself to navigate a phone using only the built in voice-over feature with the screen turned off allows you to quickly realise the effort required to handle a content heavy interface as a blind user. The urge to turn the screen back on and off again just to understand where i am in an app was ever-present. As soon as someone or something interrupted me i was lost. I forgot where i was and what i was doing. Struggling to find my way was the quickest and truest way to learn some of the issues a blind person has to deal with while using a phone and what the expected ways of solving them are. I don’t know any blind people using a phone, but luckily the world wide web is full of wonderful people like blind film critic Tommy Edison sharing their knowledge which greatly helps to understand real use cases.

“Every design decision has the potential to include or exclude customers.”

Throughout the process we tested a number of tools and techniques to create a better experience for everyone. Below are the ones we found most useful:

Cambridge Simulation glasses

Simulation glasses are incredibly simple paper and plastic glasses produced at the Engineering Design Centre at the University of Cambridge. They are designed to help you understand different levels of sight impairment. The glasses do not represent any particular eye condition, rather they simulate a general loss of sight and ability to see fine details. Different levels of impairment are simulated by wearing multiple glasses at the same time. The glasses can help get you a good idea of what elements of a design does not have sufficient contrast or size.

Already in the second step, the labels in the old version become too difficult to read.

Color contrast checker

WebAIM by The USU Center for Persons with Disabilities offer a simple online tool to analyse the contrast between two colours. If an element does not reach the recommended contrast ratio of 4.5:1 the tool allows you to tweak the contrast by lightening/darkening the colours to understand what changes are needed.

Simulating colour blindness

There is a wide range of tools allowing you to simulate different types of colour blindness but my weapon of choice was Skala Preview. Skala is first and foremost a mirroring app that let’s you connect a phone to your computer to see your designs on the device. However, it also has a colour blindness simulation feature built in. This allowed me to rapidly prototype different solutions and see the design on the phone just as a colour blind user would.

To create an inclusively designed app with a great user experience we created a list of criteria by which the app would be judged:

1. Elements are in the right order.
2. Content reads out correctly.
3. The contrast between elements are sufficient.
4. It’s easy to differentiate between elements.

1. First of all we had to make sure that all the elements on screen are in the right order to make sense as a sentence. Screen readers allow you to scrub along the screen to select single elements, but by default they cycle through the screen element by element from the top of the screen to the bottom. This means that if you place secondary actions like search in front of the page title (like Facebook do) you are forcing blind users to scrub past actions to figure out what page they are on and then determine if those actions are actually what they need.

2. Content needs to read out correctly and in a natural way on voice over. In the case of our app there were some examples of elements simply not making sense when read out. In other cases they were just presented in and unnecessarily difficult way. The drawer menu items in the RBS Android app read out as “Selected/unselected” followed by the item name. When sighted people look for content they just scan the page and find the action they are looking for. They don’t read every single word before making a decision. It’s often the same for a blind user. They will just listen to the first one or two syllables and then jump to the next item. Scrolling through our menu would take a lot more time when every item starts with “Unselected” Simply putting the selection state after the item name creates a significantly better experience. Just think to yourself, you’re looking for the page “Near me”. Which one do you think is easier to scroll through:

Selected, Accounts > Unselected, Get Cash > Unselected, Near me
Accounts, Selected > Get Cash, Unselected > Near me, Unselected

3. The contrast between elements needs to be sufficient for a partially sighted or colour blind user to see the item clearly and be able to interact with it:

4. Visual differentiation to not confuse similar elements (same but different).
If there are two items on a page doing a similar action it makes sense to make them visually similar as well to make it clear that they somehow belong together, but this might mean that they become difficult to differentiate for some users, which was the case for us in the below example:

Throughout the process we’ve continued to use problems as opportunities to improve the design and experience of the apps for ALL users. We could have easily just done the minimum effort to fix these issues, but saw it as an opportunity to improve upon them and change our own design approach. I personally believe this has helped us design a better app and it’s ensured that the Royal Bank of Scotland apps have become the first UK banking apps to become accredited by the RNIB.