Diversity Tool [Action Sustainability]

Action Sustainability boasts the biggest online diversity survey outside of the UK census. It’s a tool that collects complex data from companies and their supply chains regarding their diversity status.

They were experiencing the following chronic problems:

→  Incorrect data input

→  High user drop-off

→  Pain points with new user registrations

I was tasked with redesigning the UX/UI of the homepage, data visualisation pages and general survey structure to reduce page abandonment and improve data accuracy in the survey results.

After initial research, it was clear that the tool was over-complicated and overwhelming for the user.

Huge tables of data, pages with scores of form fields and no progress indicators suggested to me the solution could be found within a more staggered survey structure, better signposting and help tools.

Initial sketching

The two main challenges with re-designing the diversity survey were:

→  Directing traffic to the key content pieces on the homepage

→  Making the survey more manageable and less overwhelming

For the home page I used Z-shaped design, movement (carousel and text animation), and a sectioned content hierarchy.

With this approach I was able to reveal more content and direct users to the actions that mattered most, with just one action per content section.

In the example shown, we can see part of the survey progress. I took a "one-task-per-page" approach with a persistent left-hand breadcrumb trail and multi-point access to tooltips and help centre.

Survey progress example wireframe

Home page wireframe

For the main survey, the UI design was stripped-back and minimalistic, with clear visual hierarchy given to the most important elements:

→  Survey section title

→  “next” button

→  Question text

→  Comment field

The use of white space allowed for clear grouping between section title, progress information and current data input, reducing overwhelm and giving the user added clarity.

For the homepage, two primary colours were used in both gradient and flat form. Background imagery was utilised in some of the content sections to develop a more human visual appeal.

The brighter primary blue colour was used for buttons to attract the user’s eye to the most important desired actions.

Survey progress example UI design

Homepage UI design

The implementation of this design is still ongoing, but preliminary A/B prototype testing on users who were unfamiliar with the product suggests users were 30% more likely to enter data correctly with the new design.

Users were then challenged to find menu items on the homepage, resulting in times 40% faster than that of the old design.

The client remarked that the new design would assist their product to reduce cognitive overload of the user, and vastly improve efficiency.

They estimated that the new structure would reduce staff labour time processing and correcting data by at least 30%.