Sustainability Tool Dashboards [Action Sustainability]
Understanding the brief
Action Sustainability was experiencing the following problems with their web-based dashboards that tracked the sustainability performance of their clients’ supply chains.
→ Users were not taking advantage of many features
→ Features that were commonly used experienced fast page abandonment rates
→ Users tended to go direct to csv download functions instead of finding the data visualised
→ General concerns existed surrounding the value & usability of the dashboard homepage, navigation and IA
I was tasked to complete UX research to assess the dashboards, then redesign to optimise usability, in conjunction with identifying obsolete features and missing functionality.
Previous UI design
Carrying out the research
I conducted extensive surveys, interviews and contextual inquiry work with external users (clients), internal users and stakeholders to assess the product’s use and problems.
The research revealed diverse opinions, desires and pain points from its users - however, clear patterns emerged regarding the habits of the user groups, and the shortcomings of the product.
Some of these included:
→ Core navigation issues
→ Non-intuitive, unconventional user flows
→ High interaction cost / cognitive load
I was able to identify two clear user profiles and develop detailed persona work. This helped me to create a set of “user stories” that informed the backbone of my design approach.
Extract from research presentation
Working with the findings
The two personas that were exposed used the dashboards in very contrasting ways:
→ Colin, 48
An infrequent user, with little training and desires for quick data in an “executive summary” format, typically for presentations and board meetings.
→ Selena, 24
A frequent user, savvy with web technologies and needs granular data. They wanted more configuration control to analyse data and performance.
As a result, I created a tabbed component system. One tab displayed “executive summary” style components for persona 1, which was the first tab a user sees.
The “performance” tab was then created for persona 2, with a more detailed data presentation style - allowing the user to click deeper into the layers of data.
Empathy map
Initial sketching
Developing the prototype
In this example, we can see the landing page for the performance tab - this is where the second persona would spend most of their time analysing the data.
The progressive data disclosure approach allowed for them to first select a category card (in this case “Carbon”), revealing two more components for deeper analysis, and graphs showing performance over time.
There were then two more collapsed components that allowed the user to reveal even deeper data analysis down to the original input values that were used to calculate the performance.
This information architecture allowed users to get to the data they needed via a stepped approach, and take action on the back of those findings with more clarity.
Main dashboard performance tab wireframe
Applying the interface design
The interface design was not a significant departure from the high-fidelity wireframes.
My intention to create simplicity, clarity in navigation and grouping meant that delicate use of the UI palette and consistency across components was all that was required.
The red/amber/green status of the category cards was designed intentionally to stand out - this gave the user a top level indication of how their performance currently looked across their most important issues.
The two primary brand colours were used for graph components in order to create an identity and visual awareness of this style of component.
Performance tab UI design
Health check tab UI design
Measuring the impact
Initial external user (client) testing of the interactive prototype has shown an increase in usability rating from 6/10 to 8.5/10, showing a 25% increase in user satisfaction.
Longer term analysis of the results of the changes will be carried out periodically, to assess the change in user habits. The rebuild is a complex piece of work from both a front and back end perspective with a significant amount of new functionality, so the likelihood is that the impact of the changes will be seen gradually over time.
The implementation of the new design will be completed in Q1-Q3 2024 by the Action Sustainability engineering team.
Action Sustainability praised the work delivered, saying that it was a blueprint for becoming an industry leader in ESG reporting and data analysis.