Our Future Health

Improving dashboard experience to encourage participant growth

Scroll

Time to read: 6 minutes

Role: Interaction Designer

Tools used: Figma, Miro, Matomo

Background

The participant dashboard serves as the central hub where users:

  • Pick up incomplete tasks.

  • Track their progress towards becoming a full participant.

  • Access account details, update information, or withdraw from the programme.

The dashboard's design had issues impacting user engagement and conversion. Tasks were buried below unnecessary content, making them harder to find. The layout varied significantly depending on the user’s state, leading to inconsistent experiences..

Orginal dashboard

Objective

  • Improve the user experience by making tasks more visible and actionable without overwhelming the user with information.

  • Apply product design, behavioural science and content design best practices to increase task completion and encourage participation.

  • Future-proof the design for scalability, enabling the dashboard to accommodate additional functionality.

Research & Discovery

External consultancy Bunnyfoot conducted usability testing across four existing designs. Their findings shaped the foundation for further analysis. I analysed this with the behavioural scientist in the team and pulled out initial findings in Miro.

As we went through the workshop, I documented the user needs identified during user testing on post-it notes to know what to focus when iterating on these designs.

Analytics Review

I used Matomo, an analytics tool to review the design interactions. Some key issues with the design were:

  • Tasks were below the fold, hidden under excessive content and links.

    • the heat map showed that a lot of clicks happened above the fold leading to undesirable tasks including withdrawing from the program.

  • Appointment details were buried further down the page.

  • The dynamic layout constantly changed depending on the user’s state, creating confusion.

The bounce rate shows that 37% of users left the webpage after viewing only that page and a lot more clicks above the fold than expected took place.

After analysing the insights, we worked together to develop How Might We statements to shape and inspire the ideation and problem-solving process.

Design Process

Using Figma, I led design ideation sessions with product designers across the organisation. Together, we explored multiple concepts, focusing on:

  • Task-focused layouts.

  • Moving detailed task information to a separate page.

  • Defining the MVP while allowing for future enhancements.

I went away with the feedback and ideas from the design team and came up with four possible options, before refining down to one. I went with a task-focussed approach, giving each task a separate card. This was intentional to also allow for future scaling as a task-based approach would allow for more content without having to redesign the screen.

As the dashboard was already live, I was able to use the existing states to design a card for each possible dashboard state depending on whether they were in the process.

Behavioural science best practice

Working with the behavioural scientist meant we could explore various techniques that would motivate and encourage users to complete their tasks. I explored some visual progress indicators with the behavioural scientist before agreeing with the content design (the three of us) to use state-based dynamic content to guide users through their tasks.

Example of visual progress and state-based content

Final Design

Key Changes:

  1. Streamlined Content: Replaced the long list of links with a single "Manage Account Details" link at the top.

  2. Task Visibility: Task cards were moved above the fold for quick and easy access.

  3. Dynamic Messaging: Added state-specific motivational content above the task cards to encourage completion.

  4. Clearer Structure: Introduced a separate card element for each task, visually showing how many steps remained.

  5. Icons for Status: Used icons to indicate completed tasks, improving visual clarity.

Designing for scalability

The modular design allowed a new reimbursement feature without requiring significant rework after I had moved on to a new project. The feature allowed users to claim a £10 voucher, simply added as a new task card.

This validated the scalability of the task-focused approach, making sure the dashboard could grow with the programme’s needs.

Outcome

The redesigned dashboard significantly improved user engagement:

  • Increased Conversion: More users became full participants due to the simplified task navigation and targeted content.

  • Positive Feedback: Both users and internal stakeholders praised the new structure for its clarity and focus.

(Statistics to follow when available.)

Previous
Previous

Improving financial information collection for vulnerable users

Next
Next

Adding functionality for client's with partners