UI Design | UX Research | Design Systems | Data POrtal Designs

Harvard Medical School

The NIH Human BioMolecular Atlas Program Data Portal

UI/UX Developer | April 2020 - Present

Design Process

Introduction

Challenge

Case Study

User Research

Frameworks

High Fidelity Mockups

INTRODUCTION

How might we design a portal to allow medical professionals and researchers explore single-cell data?

Disclaimer: All views are my own and do not reflect the views of Harvard Medical School or the NIH. 

Techniques & Tools

Design: Figma, Figjam, Miro

Development: Git, Javascript, React

UX Research: User Interviews, Workshops, Surveys, Web Analytics (Google Analytics, Matomo), Design Systems, Remote User Testing, Affinity Mapping

Final Product

Portal Homepage Redesign

Dataset Search Interface

Advanced Molecular & Cellular Search Interface

Kidney Microscopy Dataset

Challenge

The Human BioMolecular Atlas Program (HuBMAP) is a consortium, funded by the National Institutes of Health, to construct an atlas of the healthy human body on the cellular level by developing molecular analysis technologies, computational tools and tissue mapping.

Our team develops the HuBMAP data portal that allows biological professionals to explore single cell data for genomic, molecular and other properties through visualizations, queries and other features.

My role as the UI/UX designer on the team is to:

  1. Design the data portal UI from conception to launch of the website in Sep. 2020.

  2. Create and maintain a design system including reusable components based on Material Design.

  3. Conduct user research to improve existing features and implement upcoming features.

Below is a case study showcasing the typical design process I employ when designing for a new feature.

Case Study: Designing a Molecular & Cellular Query Interface

Challenge

The data portal currently supports a faceted search interface in which users can browse through donor, sample or dataset data, but there is limited capability for users to explore any queries or analysis into the available molecular or cellular data.

Therefore, we applied a user-centered design process to create a query interface that meets user requirements for access and exploration of the molecular and cellular metadata. Our process involved:

  1. User Research: Gathered user requirements based on competitive analysis of biological query interfaces and in-depth user interviews.

  2. Frameworks: Created documentation for developers to understand API requirements and diagrams to understand user flow.

  3. High-fidelity Mockups: Designed mockups in Figma for developers and stakeholders communication.

Current Faceted Search Interface

User Research

Personas

Personas were created prior to this work to include user groups of:

  1. Data Generators

  2. Data Analysts

  3. Technologists

  4. Educators/Learners

We determined the main users of this feature would be experimental and computational biologists who interact consistently with this type of biological data. The personas that included these users helped us determine who to contact for the user research phase.

Preliminary User Research

We consistently gather informal feedback for improvements to the HuBMAP data portal during workshops and meetings, which included feedback related to data browsing or additional functionalities for the query interface. With the relevant feedback, I formed preliminary use cases, which were used for developer communication for API requirements and for narrowing the scope for user interviews. These use cases were formatted in terms of potential research questions that a user might encounter during their data browsing:

  1. How homogeneous is a tissue? (e.g. what fraction of the tissue is of X cell type or distribution of cell types?)

  2. How abundant are X cell type in Y organ?

  3. What is the gene/protein expression in X cell type in Y organ?

We also conducted an informal competitive analysis of other biological data portals and data-related companies’ advanced search features in order to gather typical user interface features and user flows.

Example: Google Advanced Search

Feature Takeaways:

  1. Hint/Example Texts

  2. General → Narrow Search Fields Sections

  3. Free-text vs. Dropdown Entries

User Interviews

We conducted 17 user interviews remotely through video call, with a majority of participants recruited from those involved in biological data contribution for the consortium since they matched our target user groups of experimental or computational biologists. Many were either principal investigators, postdoctoral researchers or research staff.

Participant Biologist Type

Interview questions involved:

  1. User’s general usage and requirements of the HuBMAP Data Portal

  2. Importance of the planned queries supported by the API to the user’s work

  3. Additional relevant query proposals

  4. Desired outputs of the query results.

To analyze the user interview results, I extracted information from the transcripts with interview coding techniques and organized the codes into meaningful categories with affinity mapping.

Affinity Diagram of ‘User-Desired Outputs’ Category

API Validation

The development team that works on the supporting API was separate from our development team, so we wanted to validate the queries they planned to support with the API in our user interviews. With user feedback regarding these queries, we can make any necessary adjustments to the API to improve the usability of the queries.

Planned API Queries

Input Output Description
Gene Expression Cell Retrieve cells with expression of gene X above a significance level of Y.
Gene Expression Organ Retrieve organs associated with expression of gene X above a significance level of Y.
Protein Expression Cell Retrieve cells with expression of protein X above a significance level of Y.
Cell Organ Retrieve organs represented in selected set of cells.
Organ Gene Retrieve genes expressed at significant level Y within selected organ(s).
Organ Cell Retrieve set of cells represented in selected organ. 
User Interview Results: Planned API Queries' VAlidation
Query Type Useful Might Be Useful Not Useful General User Comments
Gene Expression → Cell 8 3 1 Requires additional context.
Gene Expression → Organ 6 4 2 Output should be more specific
Protein Expression → Cell 8 2 1 Requires additional context.
Cell → Organ 7 0 4 -
Organ → Gene 5 3 2 Wants to be able to adjust the cellular composition.
Organ → Cell 10 3 0 Requires additional context. 
User Interview Results: User Proposed Queries

User Interview Results: User Desired Output Types

Frameworks

Minimum Viable Product

User research results were reported to internal stakeholders and developers. Given the limitation of the API at the time of the proposed timeline for frontend development of the interface, our team proposed a minimum viable product for the molecular and cellular query that would be achievable by the API and meet two minimum user requirements:

  1. From datasets selected from the faceted search interface, return datasets that contain at least one cell where a user-selected gene or protein(s) X above a threshold value Y.

  2. For a given dataset that is returned by the first user requirement, show visualization(s) where the cells that express gene/protein(s) X above a threshold value Y.

For the second user requirement, we determined to implement two visualizations:

  1. Bar chart showing cell expression level of selected gene or protein above a Y threshold value

  2. Bar chart showing cell distribution across cell clusters

User Flow Diagrams

I created multiple user flow diagrams to detail the user navigation for the minimum viable product that was used for communication of the potential design to developers and to inspire initial wireframes. The user flow diagrams was iterated upon given developer feedback.

Basic User Flow Diagram

High Fidelity Mockups

I created an interactive prototype of molecular and cellular query interface in Figma shown below in screenshots.

Revised Faceted Search Interface

Query Type Selection

Query Parameter Selection

Query Results

Future Work

Designs were passed off for development. Development of the feature is ongoing given continuous improvements to the API stability and reliability. Once development is finished, I will conduct user testing with the relevant user groups to ensure usability of the feature and to gain feedback for additional improvements.

Impact

I presented this case study at the International DESIGN Conference in May 2022, which can be accessed in the proceedings.

av_card.jpg
cybersecurity_card.jpg
medical_card.jpg