HuBMAP Data Portal
Summary
HuBMAP (Human BioMolecular Atlas Program) is an NIH-funded effort across 40+ institutions to map healthy human tissues at single-cell resolution. The data portal is the central product enabling researchers to explore, visualize, and analyze these datasets at scale.
As the founding and sole product designer, I led 0→1 product strategy, exploration workflows, visualization interfaces, and the end-to-end design system that powers the portal today.
Role
0→1 Product Strategy, UX Research, UI Design, Design Systems
End Users
Experimental Biologists, Bioinformaticians, Clinicians, ML Researchers, Educators & Students
Project Duration
2020 - Present
Highlights
+
Datasets
Avg. Monthly Sessions
Years Active
Challenge
Researchers struggled with:
Difficulty searching across 4,700+ datasets
Need for visualizations that support multi-modal data (spatial, single-cell, imaging)
High technical barriers (Python/R setup, compute resources)
No unified navigation across organs, biomarkers, and cell types
High variance in computational literacy across end users
The core challenge:
How do we design a unified platform that lowers the barrier to finding, understanding, and analyzing complex multi-modal biological data?
Key Features Designed
Drawing from user research and artifacts from the discovery phase, I designed these key features that enable researchers to navigate complex multi-modal datasets, understand biological context, and run analysis workflows in-browser. These features use the portal’s design principles and create a consistent, scalable experience across tools and stakeholders.
Detailed case studies linked below outline the strategy, workflows, and design decisions behind each feature.
Faceted Dataset Search with Exploratory LLM Integration
Faceted search to explore and visualize publicly available single-cell and spatial data spanning 4700+ datasets, 300+ donors, 20 organs, and 22 assay types. Explored an LLM-assisted extension to enable natural-language queries and contextual explanation to support more intuitive dataset discovery.
Zero-Download Jupyter Integration
Cloud-based JupyterLab workspaces to analyze data directly in the browser. No need to download massive datasets or manage local compute resources.
Biomarker & Cell Type Discovery
Visualization and query tools that enable researchers to identify cell type markers and explore biomarkers across spatial and single-cell datasets, bridging raw data with biological insight.
Other Designed Features
Bulk download of data through command line transfer
Design Principles & Research Phase
The portal's design build upon from 5+ years of user-centered research across 40+ institutions, including 50+ interviews, usability testing sessions, hackathons, and monthly analytics reviews—creating a foundation for designing tools that serve experimentalists, computational biologists, clinicians, and educators.
Research Methods
Qualitative
Semi-structured interviews, affinity mapping, moderated usability testing
Quantitative
Web analytics, surveys
Community Engagement
Workshops, hackathons, conference presentations, expert heuristics evaluations
Tools
Design
Figma
Adobe Illustrator
Miro
Dovetail
Maze
Framer
Tango
Analytics & SEO
Matomo
GA4
LookerStudio
SEMrush
Google Search Console
Organization
Confluence
Jira
Notion
Obsidian
Design System
I created a scalable design system rooted in Material Design principles, built in Figma with integration with Storybook, that defines typographic hierarchy, color tokens, and component patterns that support data-dense screens and visualizations, while remaining accessible and easy to navigate for a broad research audience.
Typography
Heading 1
H1 42
Heading 2
H2 37
Heading 3
H3 32
Heading 4
H4 26
Body 1
P 16
Parameters
P 13
Color
Primary
#444a6f
Secondary
#636363
Pink
#DA348A
Orange
#D25435
Blue
#2A6FB8
Green
#6C8938
Components
Accessibility
The design system follows WCAG 2.1 AA accessibility guidelines, with color contrast, typography, and interaction patterns tested using Axe and Siteimprove. Components are built to ensure clear hierarchy, readable data-dense layouts, keyboard-navigable interactions and screen reader compatability.
