top of page

Redesigning the NIMHD Website

NIMHD Redesign Homepage.png

OVERVIEW

Introduction

The National Institute on Minority Health and Health Disparities (NIMHD) website serves as a critical resource in promoting health equity and addressing disparities that affect underserved populations.

The redesign aimed to address significant barriers such as an outdated interface, poor navigation, and non-compliance with accessibility standards. These issues hindered user engagement, discoverability, and functionality. 

ROLE

UX/UI DESIGNER

TEAM

JOSH MORALES

MATT WERNER

MICHAEL BAGNALL

TRISTAN WELLS

DUSTIN BOEGER

DISHA GHORPADE​

TOOLS

FIGMA

MIRO

JIRA​

TIMELINE

2023 - Ongoing

The Problem

The NIMHD website, vital for advancing health equity, had become a barrier to its mission. Users struggled with poor navigation, overwhelming content, and an outdated design that buried critical resources like funding opportunities and event information. Accessibility failures, including non-compliance with WCAG standards, further excluded key audiences, creating frustration and disengagement.

 

Behind the scenes, an aging infrastructure meant frequent errors, broken links, and inefficiencies in content updates. The site couldn’t keep up with modern expectations, and it wasn’t meeting the needs of the very people it aimed to support.

Audiences

The redesign served a wide range of users, including:

  • Researchers: Seeking funding opportunities and publications.

  • Policy Makers: Accessing segmented data for informed decisions.

  • Healthcare Professionals: Looking for actionable insights and best practices.

  • Community Advocates: Navigating resources to support grassroots initiatives..

Goals & Success Metrics

  • Enhance Accessibility: Enhance accessibility for all users by achieving WCAG 2.1 AA and Section 508 compliance.

  • Streamline Navigation: Improve engagement and content discoverability by delivering a mobile-first, responsive design to reduce clicks to key resources.

  • Modernize the Platform: Develop a design system leveraging USWDS ensuring consistency with NIMHD’s branding and alignment with IDEA Act requirements.​

​

The redesign’s success was measured through improved user engagement, lower bounce rates, resolved accessibility issues, and seamless adoption of modernized technical infrastructure.

Solution

The redesigned NIMHD website effectively addressed the challenges identified during the discovery phase, delivering a platform that is modern, user-focused, and accessible.

Project Hero Template.png

RESEARCH

Research Approach

We started by analyzing Google Analytics and audience analysis provided by an external vendor. We conducted a competitor analysis and survey to gathering insights into NIMHD’s key target users, needs, and pain points.

 

This research informed the redesign’s focus on simplifying navigation, improving accessibility, and tailoring content for diverse user groups.

“Usually, in terms of what I’m looking for, I can find what I need in two to three clicks, which I think is outstanding. But from a consumer perspective, it wouldn’t be as user-friendly. It would take me at least five to six clicks on the website to really get information about health disparities in Georgia.”

“The amount of times that people talk about LGBT health is minuscule. So I don’t often feel like NIMHD is an Institute that my community, my participants are reflected in.” 

Insights & Findings

1

The current website organization reflects internal structures rather than audience priorities, making information hard to find.

2

Users desire a balance of simplified navigation with robust content, targeted to their research and professional goals.

3

Accessibility and inclusivity emerged as top concerns, particularly in addressing diverse communities’ needs.

Post-Research Actions

We reorganized the site structure using Miro to recreate the sitemap and iterated on simplified versions that reduced clicks to desired content. Wireframes were developed in Figma, starting with the homepage and section landing pages. Special attention was given to the News and Events sections, addressing confusion and inconsistent updates.

Sitemap Final Transparent 1.png

Visual Site Map in Miro

DESIGN

Exploration & Component Selection

Using the U.S. Web Design System as a foundation, we evaluated components and layout variations to ensure compliance and alignment with NIMHD’s branding and functionality requirements.

UWDS Intro.png

Prototyping & Feedback

Click-through prototypes in Figma were created to visualize user flows. Stakeholders responded positively, particularly to the News section, which encouraged openness to similar changes across the site. However, the need to educate stakeholders about wireframing delayed approvals and the transition to high-fidelity designs.

News Wireframea.png

News & Events Section Wireframes & Flow

Wireframes.png

 Wireframes

IMPLEMENTATION

Design Execution

After finalizing the wireframes, I transitioned to designing high-fidelity mockups using the U.S. Web Design System (USWDS) as the foundation. Components were customized to align with NIMHD’s branding while maintaining consistency and usability.

 

To do this quickly and accurately, I utilized atomic design methodology in all my style & component brand customization as I built NIMHD's child-design system. I also used many of the government provided resources online for modernization work, especially the USWDS Color Tool from CivicActions.


I followed the same order as the wireframing process, starting with the homepage and moving to section landing pages and subpages. Each mockup was carefully designed to balance functionality, branding, and accessibility.

Colors.png

Design System Colors

Collaboration & QA

Throughout the implementation, I scheduled regular check-ins with developers and team members to:

  • Ensure the designs adhered to functional requirements and project scope.

  • Identify and resolve any violations or deviations from USWDS guidelines.

  • Validate custom components or UI elements to maintain WCAG AA standards and Section 508 compliance.

Challenges and Solutions

During this phase, stakeholders expressed dissatisfaction with the initial high-fidelity designs, requiring significant changes to the styled UI and branding. Leveraging atomic design principles allowed for rapid iterations, enabling the creation of three new UI style options.

 

This approach streamlined updates across the design system while maintaining consistency and compliance.

First MockUps.png

Design Iteration #1

Homepage Mockups.png

Design Iterations #2, 3 & 4 

Key Achievements

  • Search Functionality: ​Improved content discoverability through enhanced search features, including filters and categorization, designed for a seamless user experience.

  • News & Events Section: Simplified user journeys by reducing clicks, improving organization, and creating visually engaging layouts tailored to audience needs.

Accessibility & Compliance

Accessibility compliance was ensured through rigorous testing using online tools and government-recommended resources. Adhering to USWDS guidance, the redesign met WCAG AA and Section 508 standards, providing an inclusive experience for all users.

FINAL OUTCOME & REFLECTION

Final Design

  • Accessibility Compliance:

    • Eliminated all WCAG AA standard violations.

    • Achieved full Section 508 compliance.

  • Responsive Design: 

    • Delivered a mobile-first design approach for seamless cross-device experiences.

  • Stakeholder Satisfaction:

    • Stakeholders praised the final designs, particularly the integration of content blocks for the Drupal CMS.​

​

Though the project was still ongoing when my role concluded, these achievements provided a strong foundation for usability testing and launch.

NIMHD - Homepage Desktop and Mobile Mockup trans.png

Responsive Redesigned Homepage

NIMHD - Design Highlights.png

Mobile First Design Highlights

NIMHD - all news Page Desktop and Mobile.png

News Section Redesign

NIMHD - Article Details Page Desktop and Mobile.png

News Article Page Design

NIMHD - After Redesign Nav.png

Redesigned Megamenu

Lessons Learned

Leading this project taught me the importance of:

  • Building a strong understanding of legal and technical requirements for government projects.

  • Constant communication and proactive collaboration to minimize delays.

  • Involving user feedback and testing earlier in the design process to balance stakeholder and audience needs.

Personal Growth as a Designer

This project ignited my passion for accessibility-first design and its role in fostering inclusivity.

 

It underscored that accessibility is vital not only for public-facing websites but for all digital products and experiences.

bottom of page