Portfolio / Traffic data dashboard / UX case study
Improving dashboard navigation
Helping users find the data they need faster
Initiative to improve flows across the dashboard to help users find the data they need faster.
- Simplified user flows and information architecture of the multi-page application
- Organised a cross function design workshop during ideation
- Created low fidelity and high fidelity wireframes
- Recorded a 32% increase in returning monthly users post release
Date: Mar-Oct 2024
Copyright: VivaCity
Role: User Research, Workshop facilitation, Wireframing, Prototyping, Testing
Tool(s): Figma, Dovetail, Heap, whiteboards
Date: Mar-Oct 2024
Copyright: VivaCity
Role: User Research, Definition, Visual design, Prototyping & Testing
Tool(s): Figma, Heap
Description
Personal project to keep practicting and experimenting with Data visualisation tools. Semi-regular posts of data vis creations with the goal to make it to 100 data visualisations at some point.
Understanding the problem
The big picture
To understand the big picture, I created a customer experience map . The rating of each step was informed by customer feedback, including NPS ratings for Onboarding teams and CSAT scores. This helped to align engineering and commercial teams on a focus area – in our case the start of an analyst’s journey. We assumed that helping users find the data they need faster would increase engagement with the product and form that basis for future improvements.
The big picture
To understand the big picture, I created a customer experience map . The rating of each step was informed by customer feedback, including NPS ratings for Onboarding teams and CSAT scores. This helped to align engineering and commercial teams on a focus area – in our case the start of an analyst’s journey. We assumed that helping users find the data they need faster would increase engagement with the product and form that basis for future improvements.
User research
Many previous features had been shipped without any user input, so I was keen to talk to customers about their experience when navigating the dashboard. I conducted four in-depth user interviews and collated other customer feedback including feature requests. The product manager and I then tagged and analysed more than 50 pieces of feedback to surface the key problem areas.
User research
Many previous features had been shipped without any user input, so I was keen to talk to customers about their experience when navigating the dashboard. I conducted four in-depth user interviews and collated other customer feedback including feature requests. The product manager and I then tagged and analysed more than 50 pieces of feedback to surface the key problem areas.
Prioritisation
I formulated detailed problem statements and worked with the engineering teams and product manager to translated them into user stories. Together we decided which funcationality to prioritise based on the criticality for the user while taking the technical feasibilty into consideration.
Prioritisation
I formulated detailed problem statements and worked with the engineering teams and product manager to translated them into user stories. Together we decided which funcationality to prioritise based on the criticality for the user while taking the technical feasibilty into consideration.
Design
Information architecture
The dashboard had grown organically over time making it messy and overwhelming. Users could see their sensor network, search for assets, perform analysis and download data, all on one page. But not all analysis was available in the same space and data downloads where difficult to find.
I simplified the sitemap to focus each section on a specific part of the user journey. During discussions with engineering teams, it became clear that changing the backend architecture was more challenging than anticipated. We still decided to go for it as it would set us up for faster iterations in the future and add user value.
Design studio
I kicked off the ideation phase with a design studio – a collaborative sketching technique to generate, critique and prioritise ideas on possible design directions. For this cross-functional session, I invited colleagues from engineering, customer support, commercial and delivery teams. I introduced the core problem and ran a two hour session that involved lots of sketching and collaboration. The workshop was very successful in generating lots of great ideas and also meant that everyone was bought into the solution.
Design studio
I kicked off the ideation phase with a design studio – a collaborative sketching technique to generate, critique and prioritise ideas on possible design directions. For this cross-functional session, I invited colleagues from engineering, customer support, commercial and delivery teams. I introduced the core problem and ran a two hour session that involved lots of sketching and collaboration. The workshop was very successful in generating lots of great ideas and also meant that everyone was bought into the solution.
Wireframes
I created low fidelity wireframes and wireflows and used these in discussions with engineering teams to discuss requirements and identify technical issues early on. These discussions were helpful
- to adjust designs based on technical feasibilty
- for the product manager to prioritise features and sequence work packages
- for the engineering teams to start building the backend infrastructure
Wireframes
I created low fidelity wireframes and wireflows and used these in discussions with engineering teams to discuss requirements and identify technical issues early on. These discussions were helpful
- to adjust designs based on technical feasibilty
- for the product manager to prioritise features and sequence work packages
- for the engineering teams to start building the backend infrastructure
Prototyping and testing
I created high fidelity mockups that I handed over to the engineering teams, including components and visual assets (icons, imagery). Once we had a first prototype on our staging dashboard, I tested the new designs and flows with three different customers. The overall feedback was very positive, but I suggested small changes to the layout and icons or copy that was unclear.
Prototyping and testing
I created high fidelity mockups that I handed over to the engineering teams, including components and visual assets (icons, imagery). Once we had a first prototype on our staging dashboard, I tested the new designs and flows with three different customers. The overall feedback was very positive, but I suggested small changes to the layout and icons or copy that was unclear.
Results
I setup metrics and dashboard on Heap to track the success of the new releases. I also added a form to the new download portal to understand user satisfaction with the functionality.
- 32% increase in returning monthly users YoY
- Increased usage of metadata download and asset search
- 12 responses to the download feature feedback form
- Positive internal and external user feedback
“Really like the dashboard changes, much easier to use and really clear. — Transport Planner, UK Authority
“Biggest change I noticed is this button. As soon as you find your asset and then click on ‘Analysis’, it shows you the nine things. Now it’s easier I will spend more time playing around. — Team Lead, UK Authority
“LOVE the Download Asset Metadata feature. Helped me pull out the summary within 5min, and would’ve previously taken me at least 10x that long. — Customer Support Team Lead, VivaCity
