Redesigning the NIMHD Website
Enhancing Accessibility, Engagement, and Modernization for Diverse Audiences
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.
ROLE
UX/UI DESIGNER
TOOLS
FIGMA
MIRO
JIRA
TEAM
JOSH MORALES
MATT WERNER
MICHAEL BAGNALL
TRISTAN WELLS
DUSTIN BOEGER
DISHA GHORPADE
TIMELINE
2023 - Ongoing
Research
Competitor Research
To guide the redesign, I conducted an informal analysis of websites from similar NIH sub-agencies. The focus areas included:
To guide the redesign, I conducted an informal analysis of websites from similar NIH sub-agencies. The focus areas included:
-
Content Structure: Examining how other agencies organized information to meet the needs of diverse audiences.
-
Navigation and Search: Identifying priorities in navigation and the effectiveness of search functionalities.
-
Design System Usage: Assessing the extent of USWDS adoption and customization, noting whether these customizations maintained accessibility compliance and adhered to USWDS guidelines.
This research provided insights into industry best practices and revealed how other agencies balanced usability, customization, and compliance, shaping the direction of the NIMHD redesign.
Research
HUMAN-CENTERED DESIGN
I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you.
LOW EMISSIONS & EFFICIENCY
I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you.
THE PROBLEM
The Challenge
NIMHD’s website faced significant challenges, hindering its ability to serve its audiences effectively. With over 435 pages failing WCAG compliance, accessibility was a key barrier for individuals with disabilities. Navigation was another pain point—users often needed five or more clicks to reach key content like funding opportunities. Additionally, the outdated, non-responsive design left mobile users frustrated, while inconsistencies in content updates reduced trust in the platform. These issues made it clear that the site was no longer aligned with NIMHD’s mission or audience needs.
Project Goals
The NIMHD website redesign aimed to address three primary objectives:
Enhance Accessibility
Enhance accessibility with 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.
Success Metrics
The redesign’s success was measured through improved user engagement, lower bounce rates, resolved accessibility issues, and seamless adoption of modernized technical infrastructure.
Enhance Accessibility
Enhance accessibility with 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 PROBLEM
Understanding the Problem
NIMHD’s website faced significant challenges, hindering its ability to serve its audiences effectively. With over 435 pages failing WCAG compliance, accessibility was a key barrier for individuals with disabilities. Navigation was another pain point—users often needed five or more clicks to reach key content like funding opportunities. Additionally, the outdated, non-responsive design left mobile users frustrated, while inconsistencies in content updates reduced trust in the platform. These issues made it clear that the site was no longer aligned with NIMHD’s mission or audience needs.
Problem Statement
The NIMHD website, vital for advancing health equity, had become a barrier to its mission. Users struggled with poor navigation, overwhelming content, and outdated design riddled with accessibility failures that further excluded key audiences. The site was inefficient, prone to errors, and unable to meet modern user expectations. A comprehensive redesign was essential to address these issues and realign the site with NIMHD’s mission and key audience needs.
Goals
The NIMHD website redesign aimed to address three primary objectives:
-
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.
Scope
The project scope encompassed a full redesign, including the migration to Drupal 10, development of a design system based on USWDS principles, and elimination of redundant or outdated content. However, time constraints required certain functionalities—such as advanced customizations for search and specific content layouts—to be deprioritized.
PROCESS
The Process
The redesign of the NIMHD website followed a structured and iterative process, balancing research, stakeholder collaboration, and design expertise. Despite significant delays and challenges, the team maintained focus on delivering a user-centered, accessible platform that met project goals.
RESEARCHERS & ACADEMICS
Seeking funding opportunities and research frameworks.
HEALTHCARE PROFESSIONALS
Accessing research findings and best practices for addressing health disparities.
COMMUNITY ADVOCATES
Engaging with events and tools for grassroots health initiatives.
INTRODUCTION
Overview
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.
Project Goals
Accessibility
Enhance accessibility with WCAG 2.1 AA and Section 508 compliance.
Modernization
Modernize the platform with a migration to Drupal 10 and USWDS-based design.
Simplification
Simplify content and navigation to better meet diverse audience needs.
Dynamic Updates
Implement advanced search functionality and a robust CMS for dynamic updates.
Legal Compliance
Address digital transformation requirements under the IDEA Act.
Success Metrics
The redesign’s success was measured through improved user engagement, lower bounce rates, resolved accessibility issues, and seamless adoption of modernized technical infrastructure.
INTRODUCTION
Overview
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.
Research Approach
We conducted an audience analysis and surveys, gathering insights into NIMHD’s key audiences, needs, and pain points. This informed the redesign’s focus on simplifying navigation, improving accessibility, and tailoring content for diverse user groups.
Tackling Challenges
Every project has hurdles, and this one had its fair share:
-
Streamline Navigation: Introduced a mega-menu and breadcrumbs to simplify content pathways.
-
Improve Search Functionality: Integrated filters for content types, topics, and funding categories.
-
Eliminate Redundancy: Consolidated redundant pages and clarified the distinctions between NIMHD’s extramural divisions.
PROCESS
The Process
The redesign of the NIMHD website followed a structured and iterative process, balancing research, stakeholder collaboration, and design expertise. Despite significant delays and challenges, the team maintained focus on delivering a user-centered, accessible platform that met project goals.
RESEARCHERS & ACADEMICS
Seeking funding opportunities and research frameworks.
HEALTHCARE PROFESSIONALS
Accessing research findings and best practices for addressing health disparities.
COMMUNITY ADVOCATES
Engaging with events and tools for grassroots health initiatives.
Design Process
The Art and Science of Design
01
Research & Discovery
Understanding your audience and market to craft design strategies that resonate and drive results.
02
Design Conceptualization
Bringing ideas to life through thoughtful and creative design concepts that align with your brand's vision.
THE CONTEXT
About NIMHD
NIMHD is part of the NIH and leads research on minority health and health disparities. Its audiences include researchers, policymakers, healthcare professionals, and community organizations, as well as underserved communities seeking health resources.
THE CHALLENGE
The NIMHD website faced critical issues: complex navigation structures, accessibility shortcomings, and a lack of responsive design, which made it difficult for users to engage effectively across devices. These issues created barriers to communication with key user groups and highlighted the need for a comprehensive, user-centric redesign.
THE CHALLENGE
-
Complex navigation made it difficult for users to find key information quickly.
-
Over 435 pages failed to meet WCAG accessibility standards, limiting usability for people with disabilities.
-
The site lacked a responsive design, leading to poor mobile user experiences.
-
Outdated content architecture created redundancies and inefficiencies.
THE SOLUTION
-
Simplified navigation with a restructured information architecture for easier access to critical content.
-
Enhanced accessibility by redesigning all pages to meet WCAG and Section 508 compliance standards.
-
Developed a mobile-friendly, fully responsive design to ensure seamless functionality across devices.
-
Implemented a child design system based on USWDS to maintain visual consistency and streamline future updates.