Selected Work

NHLBI Homepage Redesign

Redesigning the NHLBI homepage to help people find the right information faster, while setting a stronger foundation for reusable UI patterns.

Role

UX Designer

Team

UX Research, Product, Engineering, Content

Timeline

Multi-sprint effort

Focus

Homepage IA, reusable components, accessibility

Overview

I led the redesign of the National Heart, Lung, and Blood Institute’s public homepage, which had expanded over time without a clear system behind it. As priorities shifted, new sections were layered in, but the structure didn’t evolve with them. We were sorting through content priorities, business goals, and CMS constraints all at once.

What should visitors see first?
How do we guide people toward the right health topics?
How do we add new sections within Drupal without breaking the layout?

Research slide summarizing what users do on the NHLBI homepage and common navigation behaviors. — Research helped us focus on how visitors actually move through the homepage (not how we wished they would).

The Challenge

What we were solving: the homepage wasn’t guiding people well. Important content was hard to spot, navigation was unclear, and the layout didn’t support quick scanning.

Legacy NHLBI homepage experience before redesign. — The legacy homepage had a lot of content, but the structure didn’t make it easy to understand where to go next.

What we were seeing

Too many competing entry points with no clear hierarchy
Key tasks weren’t obvious (and people had to hunt)
Content was dense and hard to scan on first pass
Patterns weren’t consistent across modules

Strategy

We reframed the homepage around what people come here to do. That meant tightening the hierarchy, making the “next step” obvious, and using a smaller set of repeatable patterns instead of one-off layouts.

Lead with intent: clearer primary actions and entry points
Make it scannable: stronger headings, spacing, and content grouping
Design for reuse: components that could work across other pages, not just the homepage

Survey summary chart showing what users think should be at the top of the NHLBI homepage. — Survey results gave us a clear signal on what visitors expect to see first.

Diagram showing the original consumer-facing homepage section order. — We mapped the original content order, then proposed a new order based on research so stakeholders could align early (and stop debating every section in isolation).

Diagram showing the suggested homepage section order based on research and priorities. — We mapped the original content order, then proposed a new order based on research so stakeholders could align early (and stop debating every section in isolation).

Key Design Decisions

Homepage layout and hierarchy

We simplified the page into a clear rhythm: a strong top story area, a consistent wayfinding pattern, and repeatable content modules. The goal was to make the page feel calmer and easier to scan without hiding important work.

Redesigned NHLBI homepage showing improved hierarchy, modular sections, and clearer wayfinding. — Redesign concept: clearer hierarchy, fewer competing modules, and more consistent patterns.

Reusable content modules

Standardized cards and content blocks for repeatable layout
Clear heading + supporting text patterns for scanning
Consistent CTAs so users aren’t guessing what happens next

Research & Validation

I partnered closely with UX research as we iterated. Their findings helped us pressure-test page hierarchy, content grouping, and whether users understood where to go next.

We used a mix of quick tests and behavioral tools so decisions stayed grounded in what people did, not just what stakeholders preferred.

First click test results highlighting where users clicked first on the homepage. — First-click testing showed where people instinctively went. Open-ended prompts helped us understand the “why” behind the confusion.

Helio open-ended question test showing qualitative feedback prompt. — First-click testing showed where people instinctively went. Open-ended prompts helped us understand the “why” behind the confusion.

Helio multiple choice prioritization test showing item selection. — Prioritization testing clarified what users expected to see first, and heatmaps showed what actually pulled attention (and how far most visitors scrolled).

Crazy Egg heatmap showing scroll depth and click behavior. — Prioritization testing clarified what users expected to see first, and heatmaps showed what actually pulled attention (and how far most visitors scrolled).

Building the Figma Component System

The homepage redesign became the starting point for a broader component effort. As we built modules for the page, we translated them into reusable Figma components so the team could scale patterns across the site.

Atomic

Typography, spacing, color usage, button styles, input states

Molecular

Card patterns, section headers, utility modules, content blocks

Organism

Hero, featured content rows, campaign sections, multi-card groups

Design system contribution guide flowchart for proposing new components or variants. — We paired the component library with lightweight guidance so designers and partners knew how to contribute without creating one-off patterns.

Figma component library snapshot showing NHLBI homepage modules and reusable components. — Snapshot of the component library as it expanded from homepage modules into a reusable system.

Conclusion

The homepage redesign was the beginning of a broader systems initiative. Working closely with UX researchers, Product Owners, and developers, we aligned the experience around user intent and established reusable components in both Figma and Drupal’s Layout Builder.

Future iterations would focus on expanding behavioral insights through Adobe Analytics and continued partnering with the UX researchers to further optimize user pathways over time.

Previous case study: ARPA-H Solution Site