NHLBI - Audio Spotlights
The NHLBI Audio Spotlights initiative showcases Black scientists and doctors through engaging audio content. The project needed a scalable, user-friendly design to enhance accessibility and interaction, offering an intuitive way to explore and share stories while deepening connections to the featured scientists.
Team
2 UX/UI Designers (Myself as Lead), 2 Developers, Project Manager, Scrum Master, Testing Team
Sneak Peak
Problem Statement & Challenge
While the NHLBI Audio Spotlights aimed to showcase Black scientists and doctors through engaging audio content, several design challenges limited its effectiveness:
Fragmented Development: A two-phase approach delayed critical features, creating a disjointed experience.
Responsiveness Issues: Audio sections were not optimized for different screen sizes.
Visual Imbalance: Inconsistent layouts due to varying text lengths.
Redundant Imagery: Repeating faces reduced visual diversity.
Limited Engagement: No sharing options or clear pathways to related content.
Inconsistent UX Writing: Labels lacked directive phrasing, reducing clarity and usability.
These issues impacted accessibility, user interaction, and overall engagement.
Phase 1 wireframes
Research Review & Key Insights
To evaluate the existing approach, I revisited the competitive analysis and usability testing insights. The competitive review highlighted common design patterns:
Layout Trends: 7 out of 10 platforms used landscape audio cards for desktop.
Sharing: Only 4 out of 10 allowed users to share content.
Navigation: 6 out of 10 placed audio files on individual pages, while 3 out of 10 grouped them into series.
Additional Content: 4 out of 10 included related resources or information sections.
Usability testing reinforced these findings and revealed key user needs:
Easier access to related spotlights and health topics.
A way to search for spotlights.
The ability to share content easily.
The test results showed a 68% user satisfaction rate, indicating room for improvement.
User Insight: Representation Matters
"It’s good to have someone who looks like you that you can go to." – Usability Test Participant
Many users expressed a deep appreciation for seeing scientists who looked like them. This insight reinforced the importance of strong visual representation, not just in imagery but in the way stories were told. It became clear that beyond functionality, the platform needed to foster a sense of connection and inspiration.
Armed with these insights, I prepared to shift gears—rethinking our design approach to better meet user needs while balancing key trade-offs.
Shifting Gears & Making Trade-offs
Usability testing reinforced my hypothesis that the two-phase approach was ineffective. Instead of patching fixes, I recommended integrating both phases from the start to create a cohesive design. This shift required balancing trade-offs, ensuring:
A cohesive, future-proof layout rather than a fragmented solution.
Stronger engagement by prioritizing shareability and content discovery.
Better scalability for long-term growth and new features.
Despite the effort required, this shift significantly improved long-term usability and scalability.
In addition to redesigning the audio cards to be fully responsive and adaptable, I created quick mockups and prototypes of the main landing page and a concept for the individual spotlights, both designed with future scalability in mind.
Phase 1 card redesign (Desktop) - V1
Trade off layout redesign (Desktop) - V1
Trade off page layout redesign (Desktop) - V1
First Win - Branch Chief Presentation
A key part of my approach is involving developers early to align on upcoming work and catch potential issues before they arise. This collaboration refined our first wireframes and led to a major win—our first-ever presentation directly to the branch chief.
Before the presentation, I polished the wireframes and prototypes, creating V2 with better visual balance. I also enhanced the individual spotlight pages with a related information section, improving the user experience and encouraging deeper engagement.
Key Takeaways & Next Iterations
After the branch chief presentation, we identified key areas for refinement:
How might we reduce scientist image repetition to create a more dynamic and engaging experience?
How might we diversify the landing page content to better represent the breadth of stories?
How might we take cross-linking to the next level on spotlight pages, making exploration seamless and intuitive?
Desktop landing wireframe - V2
Desktop spotlight wireframe - V2
Final Designs – A Cohesive Experience
With key insights in hand, I refined the final designs to create a more structured, engaging, and scalable experience.
Grouping Spotlights by Scientist
To reduce visual clutter and improve navigation, I grouped spotlights under each scientist. Each section featured:
A header with the scientist’s name, position, and organization for added credibility and relatability.
A scientist image to create a strong visual anchor.
Collapsible sections for each spotlight, keeping the page clean while allowing users to focus on one story at a time.
This approach not only improved organization but also increased diversity on the page by making room for a broader range of spotlights.
The Interaction - In Action
To keep the experience structured yet accessible, I designed an expandable/collapsible interaction for spotlight sections. This allowed users to engage with one story at a time while preventing the page from feeling cluttered.
This interaction improved usability and scalability, ensuring users could explore content without friction.
Landing wireframe - Final
Restructuring Individual Spotlight Pages
To enhance usability and encourage exploration, I divided each scientist’s page into two sections:
Left Column: A list of all spotlights from that scientist, keeping relevant content easily accessible.
Right Column: Details on the selected spotlight, allowing users to focus on one at a time.
Bottom Section: A "Related Research Topics" area, cross-linking research, fact sheets, and additional spotlights from other scientists when applicable.
This structure made discovery seamless, ensuring users always had meaningful content at their fingertips.
Desktop spotlights wireframe - Final
Beyond Usability –
Inspiring the Next Generation
Usability testing revealed the power of representation—users felt seen when engaging with scientists who looked like them. Including each scientist’s name, position, and organization wasn’t just about credibility—it was about aspiration.
This was a "Side Quest Win"—an unexpected but meaningful impact that strengthened user connection.
By refining the experience through both usability and representation, these final designs created a more engaging and inspiring product.
Spotlights - header
Learnings & Takeaways
This project improved processes, strengthened collaboration, and set new standards for efficiency.
Improving Developer Collaboration
The team previously relied on PDFs and static style sheets for handoff, leading to inefficiencies. By bringing developers into Figma, I opened communication and streamlined collaboration. After advocating for Figma Dev Mode access, I organized brownbag sessions to help developers transition to a more efficient workflow.
Prototyping for Better Stakeholder Alignment
Prototyping gave stakeholders a clearer vision of the final product early on. They found it so effective that moving forward, demos and usability testing will be done on prototypes, reducing reliance on fully developed pages.
Addressing Visual Inconsistencies
This project uncovered several design inconsistencies across the website. These findings will serve as a foundation for standardization, ensuring a more cohesive and scalable design.
Beyond improving this product, these changes set a new standard for collaboration, efficiency, and user-centered design within the team
Team & Stakeholder Feedback
“Abdu’s ability to not only take feedback and implement it, but build on it and take it to a whole new level is remarkable.” – Branch Chief
"This is the smoothest handoff process we've had—everything was clear, and we saved so much time." – Developer
"Seeing the prototype in action made everything click. This is the level of clarity we’ve needed for testing." – Stakeholder
“Excellent work presenting the wireframes! This is the first time we’ve been asked to present directly to Branch Chief. Great job articulating everything” – Project Manager