How we design and develop with accessibility in mind
Shaun Stone
21 May 20202 min
Our engineers, user experience and design teams are always striving for new ways to improve the experience for our customers. Technical performance is an obvious focus for us, but we’re also passionate about accessibility. We want to make it so that everyone can get the most out of Nutmeg. Having a disability shouldn’t be a barrier to becoming an investor or checking your investment performance.
In 2018, we embarked on a challenge to build a new design language and system for Nutmeg, with accessibility at its core. This introduced a new look and feel to many of the pages, but it goes deeper than what you see on the surface.
Here’s an example. When making a payment, customers can use the tab button and the enter key on their keyboard to move around and interact with the form. This is crucial for people who are unable to use a traditional mouse or trackpad.
We want to present complex information to customers as simply as possible so that it’s intuitive. When you want to do something, you should be able to do it with ease. We don’t want anyone to have to think twice. To achieve this, our designs go through lots of planning sessions and rigorous user testing to ensure that we’re building with customers in mind.
The importance of a great design system
In the image below, you can see how we clearly present the impact of making a withdrawal by showing a left-right comparison of your projected pot value. We designed the flow to give customers good feedback on the progress they’re making. The bar at the top shows how far customers have made it through the withdrawal process, helping to set expectations upfront.
These buttons, the header, the typography, the radio buttons, and all of their attendant accessibility features, are all part of our in-house design system.
Design systems are used by many of the top tech companies, such as Airbnb, Google, Salesforce and Twitter, and are used to enforce consistency and reusability of visual elements so that applications can be built faster and more effectively. It allows design and development to agree on the foundations and share a common language.
Keep an eye out as we progress many more of our pages to this new design system, including a fully redesigned dashboard. It’s an exciting time to be part of the Nutmeg team.
Find out more about design systems.
Accessibility guidelines
When developing our design system we use a tool called Storybook to build each reusable element in isolation. It has a lot of great features, but a particularly useful one is the accessibility add-on, shown below developing our loading spinner.
This provides immediate feedback to our developers about the compliance of components they are working on with common web accessibility standards. It will even highlight the offending element if a violation does occur, making the issue very easy to fix.
The ARIA roles and attributes mentioned in the example above are an essential part of making a site accessible. A loading spinner may seem sufficient to describe the state of a page, but to those accessing the site with a screen reader it is essentially meaningless. ARIA tags are hidden bits of text on the page which describe to screen readers what is going on in a non-visual way.