Case Study Details

Date September 2021 to October 2022
Client Health Data Research UK
Project HDR Innovation Gateway
Role Lead UX/UI Designer
Tools Figma / FigJam / InVision / Jira / Sketch / Slack / Zeplin


Marlon is very creative and was able to produce great user centric designs by standing firmly in the shoes of our key users when some of his internal stakeholders weren’t fully signed up. His perseverance paid off and some fundamental changes to the user experience were achieved. He wore many UX hats – researcher, designer and tester – and has succeeded in each role.
— Elaine Brannigan, Digital Product Owner

The Client

The mission of Health Data Research is to unite the UK’s health and care data to enable discoveries that improve people’s lives. They do this by uniting, improving and using health and care data as one national institute.

Their 20-year vision is for large scale data and advanced analytics to benefit every patient interaction, clinical trial, biomedical discovery and enhance public health.

About the HDR UK Innovation Gateway

In the UK, numerous health datasets are scattered across various organisations, making it challenging for researchers, innovators and the public to identify them. To address this, the Health Data Research Innovation Gateway (hereafter referred to as "Gateway" - see Fig 1.1 below) was established in 2020 as a central platform for discovering and requesting access to UK health-related datasets. It provides essential information about each dataset, aiding researchers and innovators in determining their relevance and potential for advancing health research. The Gateway's development has involved input from patients, the public and healthcare professionals.

Fig 1.1 HDR Innovation Gateway - dataset search page

My Role

During my time with HDR as Lead UX/UI Designer (and researcher and tester), I worked with a small UX and analytics team and with some external agencies on a number of project streams in unison. Some key highlights were:-

  1. Design Platform Migration - completed a comprehensive design platform migration from Sketch/InVision/Zeplin to a single source of truth in Figma. The original designs had been produced by a top design agency but it had become cumbersome and not well documented or notated.

  2. UI and UX Audits - extensive evaluation of the current platform to determine where UX and UI improvements could be implemented.

  3. Usability Testing Strategy - produced a flexible usability testing strategy and trained several full-time staff to effectively run usability testing, analyse results from test and implement UX/UI improvements.

  4. Search Functionality - at the core of the Innovation Gateway is the ability to search and retrieve health datasets. After conducting stakeholder and user interviews, vast improvements to the search core capability were identified and ultimately, implemented into the codebase.

For the purposes of brevity, this case study covers the work completed for the Search Functionality improvements but may touch on other HDR projects or initiatives such as UX Audit, as most projects overlapped one another.

Introduction

The Gateway is a platform designed to provide researchers with access to a wide range of health-related data for their studies. However, users have reported usability, searchability and discoverability issues with the platform's search functionality. This UX case study documents the process I took to identify and address these problems to enhance the overall user experience of the Gateway whilst working with the slightly limiting technology stack.

Problem Definition

One of the key issues from a user’s perspective was that the Gateway had been built on two separate platforms, Craft CMS for the initial site, then a REACT application for the dataset search area. This produce many UI issues as the two code bases had not been aligned, as shown in Fig 1.2 below which demonstrates UI inconsistencies with the navigation bar alone, which was very jarring for the user’s cognitive recognition: -

Fig 1.2 - Inconsistencies in navigation bar between Craft CMS and RWCT application

  1. Usability Issues

    1. Complex Interface: Users find the Gateway's user interface complex and overwhelming, making it difficult to navigate and use effectively.

    2. Lack of User-Friendly Features: There is a lack of intuitive features such as advanced search filters, sorting options, search saves and personalisation.

    3. Inconsistent UI Design: Inconsistencies in UI design elements, layout and navigation flow make it challenging for users to learn and remember how to use the platform.

  2. Searchability Issues

    1. Inaccurate Search Results: Users frequently receive irrelevant or inaccurate search results, leading to frustration and time wasted.

    2. Search Filters: The search filters were extensive but often produced inconsistent search results, making it challenging to refine queries effectively.

    3. Poor Keyword Recognition: The system struggles to recognise and interpret keywords, which results in unsuccessful searches.

  3. Discoverability Issues

    1. Hidden Data Sets: Valuable datasets were challenging for users to discover.

    2. Insufficient Metadata: Many datasets lacked comprehensive metadata or it was inconsistent with other datasets, affecting user understanding.

    3. Lack of Personalisation: The Gateway did not offer personalised dataset recommendations.

UX Process

To address the search usability issues, I conducted the following processes: -

  1. Usability Audit of current UI: the audit formed the basis for most of the projects I worked on and uncovered many usability issues. All UI issues were documented and I wrote Jira stories for the backlog and developers tackled a few UI issues every sprint.

  2. User Research: Extensive user interviews, surveys and usability testing were conducted to gather insights into user needs for the search function (see Fig 1.3 below)

  3. Competitive Analysis: Evaluation of similar platforms helped identify best practices (see Fig.1.4 below)

  4. Information Architecture: The platform's information architecture was redefined for better navigation and interface structure.

  5. Search Algorithm Enhancement: The search algorithm was improved for more accurate results using natural language processing and machine learning techniques.

  6. User Interface Redesign: The user interface was redesigned for simplicity, consistency and user-friendliness. Intuitive search filters and sorting options were added. The ability to save searches was greatly enhanced. I introduced many UI micro-interactions to improve user’s interpretation of each dataset’s value including number of views, last updated date, metadata quality and typical time to access the dataset. A Figma prototype was produced and rigorously tested with real users before being handed over to development team (see Fig 1.5 below)

  7. Metadata Standardisation: Standardised metadata guidelines were established for datasets making the search results much improved and significant to the user’s search input.

  8. Personalisation: I made several recommendations for ways to personalise the user experience including advanced commenting and sharing capabilities, adding to favourites and watch lists and many UI improvements that are still in development.

Fig 1.3 - A sample of search results from user interviews and testing, compiled in FigJam

Fig 1.4 - A small sample of competitor analysis for search functionality

Fig 1.5 - a sample of the search function prototype from Figma

Results and Outcomes

  • Improved User Satisfaction: Users reported higher satisfaction levels and increased engagement with the platform.

  • Enhanced Search Results: Search results became faster and more accurate.

  • Improved Discoverability: Users found it easier to discover valuable datasets.

  • Increased Adoption: The Gateway saw increased user adoption and retention rates with an increase in registered users from 2100 to nearly 3000.

  • Reduced Support Requests: Support requests and user complaints related to search functionality decreased significantly.

Conclusion

This UX case study highlights the successful efforts to address usability, searchability and discoverability issues in the Health Data Research Innovation Gateway. By focusing on user research, system enhancements and interface redesign, the Gateway has become a more user-friendly and effective platform for health data researchers, ultimately advancing healthcare research.

Previous
Previous

Sidero

Next
Next

Shell International