Creating dashboards in 3 simple steps.

UX/UI
Quick Summary
The support team was flooded with tickets about dashboard usability. After research, I identified key issues and redesigned the dashboard, improving the usability score from 63.5% to 84.3%, which drastically reduced support queries.
Problem
How might we make the creation of reports more accesible to users and reduce our support burden?

Discovery

"This is the second time this week a client has asked support to generate a report its costing the team valuble time"

"They have a dasboard for that why aren't they using it?"

To aswer this question I...

Research Insights

Wireframe evolution

The layout went through many different evolutions. Using D3.js meant I had a technical requirement that meant users could only work with one data source.

Changes Made

Insight 1 - Irrelavent Information : Each market I interviewed had their own requirements regarding infomation they sought to find. This made it impossible to respond to all user needs across all of our clients.

"Changing requirements can take many shapes and forms, but in the context of dashboards they usually amount to tailoring the dashboard to every user."

Vázquez-Ingelmo A, García-Peñalvo FJ, Therón R. 2019b. Tailored information dashboards: a systematic mapping of the literature. In: Proceedings of the XX internationalconference on human computer interaction, 1–8.

Solution: Giving users an interface to tailor their dashboard in correspondance with their evolving requirements.

Insight 2 - Confusing Components : Some components, like the timeline, confused users. While it’s meant to display data bounds and allow time period filtering, we needed to add a feature that let users specify a precise date.

Solution: Adding a date selector with pre-defined filters to allow users to quickly swich between day, week, month etc.

Insight 3 - Visually Confusing : Users found that the colours weren't appropriately conveying the the key data points and didn't allow them to quickly 'scan' for important information

Solution: After some research, I identified three different types of palattes to visualize data. Alert Palette, Qualitative palatte and a sequential palatte

Alert Palatte
Sequential Palatte
Qualitative Palatte

Validation

Benchmarking was an important part of the process. I conducted a variety of usability tests including observational analysis, an task severity analysis. Below are the results before and after.

Before
63.50%
After
84.30%

Final Product

What did I learn?

Going through this process, I learned a lot about data visualization. The most interesting part for me was thinking about how to overcome the mamoth task of choosing an appropriate colour palatte to convey the data. I also learned that its important to choose the right UX techniques dependant on the challenge at hand.

Next Project