Lead designer - user research, end-to-end design process & implementation support.
Design Manager, User Experience Designer, Two UX Designers, UX Designer (me)
2 Months
Netenrich was focused on a lot of data. The data was primarily represented through dashboards. These dashboards were essential in providing actionable insights. I was part of a five-member team where we took on the task of refreshing the dashboard colour palette. I focused on improving the overall look and feel while also maximising accessibility.
The problem was twofold. The existing colour palette had a lot of similar colours and didn’t match the brand identity. Moreover, the design of the dashboard and widgets were dated. There was an overwhelming number of complaints not just from the internal stakeholders but the customers themselves. In short, the dashboard needed some love and it was high time for a complete overhaul.
As I began my research into looking at other enterprise colour palettes and best practices, I realised we were severely lacking on the accessibility front. Till this point, I had limited knowledge about accessibility and WCAG. I had assumed that the text had to include sufficient contrast with the background, but data visualisation was a whole new field.
Why not refresh the dashboard palette to be accessible as well?
I presented to the rest of the design team highlighting the value of inclusive design with respect to user needs and business goals. In the presentation, I showed the importance of compliance from a legal perspective as well as how our competitors approached accessibility. Maximising accessibility became the primary focus of this project and the presentation was used in making our case to other stakeholders as well.
A set of colours that didn’t include semantic colours yet was harmonious with them.
Colours should be optimised for those with Colour Vision Deficiency (CVD).
The palette should be compliant with the WCAG 2.1 AA standard.
We decided to extend our existing base of blues and purples and decided to add some pinks and burgundy. We made the lights lighter and the darks darker and increased the saturation of the mid-tones.
In an effort to create a new colour palette, we explored different ways of creating a set of colours.
With the help of tools such as Colorogical source and Adobe colour, we came up with a few colour palettes. We could generate palettes within a certain spectrum. It focused on creating maximum contrast between neighbouring colours and maximum difference.
So I took the manual approach. With an amalgamation of the colours of the existing palette and the computer-generated ones, I selected new colours. Ultimately, coming up with two options.
Colour contrast in shapes 3 x 3 pixels and larger is considered accessible if it meets a contrast ratio of 3:1. Once we had the colours, I proceeded to check the colours for the WCAG contrast ratio.
Using WebAIM contrast checker I evaluated the contrast ratio of the palettes against the background. For checking the contrast ratio of the neighbouring colours we used AccessibleColor. The palettes created using the software tools had many colours that didn’t meet the 3:1 contrast ratio.
Since one of the major critiques received included difficulty in differentiating colours, I used Viz Palette to check the Just Noticeable Difference (JND) between colours.
A JND is defined as “the amount something must be changed for a difference to be noticeable.” Colours that are difficult to tell apart are linked with increasingly thick arcs.
It was extremely challenging to be accessible across all colour vision deficiencies while also maintaining a sufficient contrast ratio within the limited spectrum of colours. Ultimately, we decided to focus on the WCAG contrast and ensure our colours had the least number of arcs for the most common colour deficiencies.
The platform had multiple modules, each module having different dashboards. Every module had a product team and the teams worked in silos. Since we didn’t have access to the customers, we decided to test on our internal users, the product team itself. Through A/B testing we finalised on the colour palette.
Presenting the categorical colour palette and the revamped dashboard design aimed to improve functionality and be more accessible.
Using colour alone to convey the information makes the dashboards inaccessible. I explored additional solutions in interactions and patterns to take the colour palette work to the next level.
The background colour was changed from a light grey to a white to ensure maximum contrast.
Separating the bars, slices and lines with white space to increase contrast levels of adjacent colours.
Supplying the raw numbers that comprise the graph in a machine-readable format, such as a CSV file so that people can explore the raw data on their own.
Providing the option to view the chart as a data table is more accessible to people navigating via screen readers.
A brief description of each widget is provided through an info icon, which gave users context on what the data is conveying. A brief description of the overall dashboard was also added.
30% increase in average customer satisfaction post the redesign of the dashboards.
Users are able to quickly decipher insights from dashboards without cognitive strain.
This project just scratched the surface of accessibility. Given the opportunity, I would work on the following to make data visualisation more accessible
1. Validate data with users: Reach out to actual users with colourblindness or visual disabilities to test the revamped dashboard. Additionally, I would run an accessibility test to check our score with the design.
2. Implement keyboard navigation: Future enhancements would include enabling keyboard navigation which will allow users to access data points using a screen reader.
3. Patterns and shapes: Explore usage patterns and shapes in addition to colours to achieve further distinction between different sections.
Usually, accessibility is considered as an edge case or “nice to have” scenario. Through this project, I learned that an accessible-first design approach is inclusive to all users and leads to a more intuitive user experience.
Small changes make big differences. In the first launch phase, just a simple change in background colour, border radius and subtle shadows refreshed the dashboard.
