Redesigning the NIMHD Website
OVERVIEW
ROLE
UX/UI Designer
PROJECT TYPE
Government Website Redesign
TOOLS
Figma, Miro, Jira
TEAM
Josh Morales
Matt Werner Michael Bagnall
Tristan Wells Dustin Boeger
Disha Ghorpade Julia Dugas
TIMELINE
2022 - 2024
Introduction
The National Institute on Minority Health and Health Disparities (NIMHD) plays a critical role in advancing health equity and addressing disparities that affect underserved populations. However, its outdated website hindered its mission, creating barriers to accessibility, usability, and engagement.
This case study highlights the process, solutions, and outcomes of the redesign, showcasing how collaborative problem-solving and innovative design can transform a digital platform to serve its mission effectively.
My Role
As the Lead UX/UI Designer, I guided the redesign to create a modern, user-centered platform that aligned with government accessibility standards while meeting the diverse needs of NIMHD’s audiences. The project sought to deliver an intuitive, mobile-first experience, streamline navigation, and enhance accessibility, all while maintaining the organization’s trusted brand identity.
PROJECT GOALS
-
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 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.
Problem Statement
Understanding the Problem
The NIMHD website’s usability, accessibility, and content management systems were outdated, limiting its ability to serve its multifaceted audience.
Key Challenges
1
Poor Usability: Users struggled with an overly complex information architecture (IA) and deep menu structures that made it hard to find resources like funding deadlines and research tools..
2
Accessibility Failures: Non-compliance with WCAG standards resulted in poor contrast ratios, missing alt text, and limited keyboard navigation, excluding users with disabilities
3
Outdated Technology: Built on WordPress, the website frequently encountered technical errors, scalability limitations, and inefficiencies in content updates.
Key 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.
Research
Competitor Research
To guide the redesign, I conducted an informal analysis of government websites from, ideally but not strictly 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.
cancer.gov
The National Cancer Institute adapted and followed USWDS closest of all redesigned sites found, but lacked simplified IA and navigation,
genome.gov
The National Human Genome Research Institute had wonderfully modern UI with enhanced accessibility features, including robust navigation and search, but no adopting/adapting of USWDS.
nhlbi.nih.gov
The National Heart, Lung, and Blood Institute (NHLBI) lacked good usage of USWDS and supported basic Navigation and Search
Research
Research Approach
We conducted a comprehensive audience analysis, leveraging input from NIMHD departments and stakeholders through surveys and an external analysis.
The research aimed to identify:
-
Key audiences (e.g., researchers, policymakers, community organizations, and public health professionals).
-
Primary needs (e.g., better funding opportunity visibility, simplified navigation, and targeted content for diverse subgroups like LGBTQ and rural populations).
-
Pain points such as:
-
Poor website navigation and content structure.
-
Lack of inclusivity for specific audience needs (e.g., accessibility for underserved populations).
-
Inconsistent and outdated content.
-
“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.”
Key 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.
Research
Research Approach
We conducted a comprehensive audience analysis, leveraging input from NIMHD departments and stakeholders through surveys and an external analysis.
The research aimed to identify:
-
Key audiences (e.g., researchers, policymakers, community organizations, and public health professionals).
-
Primary needs (e.g., better funding opportunity visibility, simplified navigation, and targeted content for diverse subgroups like LGBTQ and rural populations).
-
Pain points such as:
-
Poor website navigation and content structure.
-
Lack of inclusivity for specific audience needs (e.g., accessibility for underserved populations).
-
Inconsistent and outdated content.
-
Design Process
Information Architecture Redesign
Following the research phase, our focus shifted to simplifying the site structure and improving the information architecture (IA) to enhance content discoverability and user experience.
Reorganizing the Sitemap:
-
Recreated the sitemap in Miro to visualize the current structure
-
Iterated on simplified designs to reduce user clicks and streamline navigation paths.
-
Restructured subpages to clarify types of content and ensure updates were timely and relevant to audience needs.
Visual Sitemap Recreated in Miro
Design Process
Wireframes
Wireframes were created to reflect the restructured information architecture (IA) and provide a clear vision of the new navigation pathways, starting with the homepage and section landing pages. Special attention was given to the News and Events sections addressing confusion caused by inconsistent categorization, and to reduce the number of clicks to content.
Homepage Wireframes
Landing Page Wireframes
Simplified User Flow of News Section Wireframes
Design Process
Custom Design System Based on USWDS
Adapting USWDS to align with NIMHD’s branding required meticulous planning, testing, and documentation.
-
Initial testing ensured NIMHD’s brand colors and fonts met accessibility standards. System color matches from USWDS were selected to ensure compliance while maintaining brand recognition.
-
Component variations styled with palette options were presented to stakeholders for approval, with final selections implemented rapidly to meet deadlines.
-
Atomic design methodology was employed to build components systematically, ensuring consistency across the design system and simplifying updates if required later.
Simplified User Flow of News Section Wireframes
Branded Color Theme
Typography and Components
Design Process
Iterations Stakeholder Feedback
Stakeholders responded enthusiastically to the simplified user flows in the News section. The clear categorization and streamlined navigation made it easier for users to locate relevant content, addressing a major pain point.
This positive reception led stakeholders to reconsider their initial reluctance to restructure other parts of the site. They became more open to implementing similar changes in other sections, enabling a broader application of improved user flows and content organization.
At this stage, we had to focused on reviewing and final approvals on site maps and wireframes for the main pages. While stakeholders ultimately embraced our recommendations, the initial process was slow due to hesitancy and a lack of familiarity with wireframing as a concept.
To address this, we paused to educate them on the purpose and iterative nature of the wireframing process. This collaborative approach helped align expectations but delayed the transition to high-fidelity mockups.
Despite the setbacks, these discussions laid the groundwork for stakeholder confidence in the design direction and eventual project progress.
Typography and Components
OVERVIEW
Introduction
The National Institute on Minority Health and Health Disparities (NIMHD) plays a critical role in advancing health equity and addressing disparities that affect underserved populations. However, its outdated website had become a significant barrier to engagement and accessibility, limiting its ability to serve a diverse audience of researchers, policymakers, healthcare professionals, and the public.
This case study highlights the process, solutions, and outcomes of the redesign, showcasing how collaborative problem-solving and innovative design can transform a digital platform to serve its mission effectively.
My Role
As the Lead UX/UI Designer, I guided the redesign to create a modern, user-centered platform that aligned with government accessibility standards while meeting the diverse needs of NIMHD’s audiences. The project sought to deliver an intuitive, mobile-first experience, streamline navigation, and enhance accessibility, all while maintaining the organization’s trusted brand identity.
ROLE
UX/UI Designer
PROJECT TYPE
Government Website Redesign
TOOLS
Figma, Miro, Jira
TEAM
Josh Morales
Matt Werner Michael Bagnall
Tristan Wells Dustin Boeger
Disha Ghorpade Julia Dugas
TIMELINE
2022 - 2024
Problem Statement
The Problem
The NIMHD website’s usability, accessibility, and content management systems were outdated, limiting its ability to serve its multifaceted audience.
Key challenges included:
Poor Usability: Users struggled with an overly complex information architecture (IA) and deep menu structures that made it hard to find resources like funding deadlines and research tools.
Accessibility Failures: Non-compliance with WCAG standards resulted in poor contrast ratios, missing alt text, and limited keyboard navigation, excluding users with disabilities.
Outdated Technology: Built on WordPress, the website frequently encountered technical errors, scalability limitations, and inefficiencies in content updates.
This redesign sought to resolve these issues by delivering a modern, intuitive, and accessible platform aligned with NIMHD’s mission.
PROJECT GOALS
-
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 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.
My Role
As Lead UX/UI Designer, I managed research, wireframing, prototyping, and the creation of a scalable design system using the U.S. Web Design System (USWDS). I collaborated with developers, content strategists, and stakeholders to create a user-centered platform.
OVERVIEW
Introduction
The National Institute on Minority Health and Health Disparities (NIMHD) serves a critical role in advancing health equity for underserved communities. However, its outdated website hindered accessibility, usability, and engagement.
As Lead UX/UI Designer, I led the redesign with a focus on:
-
Simplifying navigation for better content discoverability.
-
Enhancing accessibility to meet WCAG 2.1 AA and Section 508 standards.
-
Implementing a responsive, mobile-first design.
By leveraging the U.S. Web Design System (USWDS) and engaging stakeholders throughout the process, we transformed the website into an accessible, user-friendly, and modern resource that aligns with NIMHD’s mission of promoting health equity.
ROLE
UX/UI Designer
PROJECT TYPE
Government Website Redesign
TOOLS
Figma, Miro, Jira
TEAM
Josh Morales
Matt Werner Michael Bagnall
Tristan Wells Dustin Boeger
Disha Ghorpade Julia Dugas
TIMELINE
2022 - 2024
OVERVIEW
Project Goals
The NIMHD website redesign aimed to address three primary objectives: enhancing accessibility, improving user engagement, and modernizing the platform's design and functionality. These goals were rooted in the need to align the site with WCAG 2.1 AA and Section 508 standards, streamline navigation, and deliver a responsive, mobile-first experience.
Background
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. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.
This is a great space to write a long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
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.
The site couldn’t keep up with modern expectations, and it wasn’t meeting the needs of the very people it aimed to support.
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.
The site couldn’t keep up with modern expectations, and it wasn’t meeting the needs of the very people it aimed to support.
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: enhancing accessibility, improving user engagement, and modernizing the platform's design and functionality. These goals were rooted in the need to align the site with WCAG 2.1 AA and Section 508 standards, streamline navigation, and deliver a responsive, mobile-first experience.
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.
My Role
I served as the Lead UX/UI Designer, guiding the project from ideation to delivery. My contributions included:
-
Revamping the information architecture (IA) to streamline navigation and consolidate content.
-
Developing wireframes and mock ups featuring advanced search functionality with filters and content type layouts.
-
Designing a responsive, mobile-first interface aligned with U.S. Web Design System (USWDS) guidelines, harnessing atomic design principles, retaining the agency's brand identity.
-
Collaborating with developers, content strategists, and NIMHD stakeholders to align on goals and priorities.
-
Leading stakeholder workshops and asynchronous feedback sessions via Figma.
My Role
I served as the Lead UX/UI Designer, guiding the project from ideation to delivery. My contributions included::
-
Revamping the information architecture (IA) to streamline navigation and consolidate content.
-
Developing wireframes and mock ups featuring advanced search functionality with filters and content type layouts.
-
Designing a responsive, mobile-first interface aligned with U.S. Web Design System (USWDS) guidelines, harnessing atomic design principles, retaining the agency's brand identity.
-
Collaborating with developers, content strategists, and NIMHD stakeholders to align on goals and priorities.
-
Leading stakeholder workshops and asynchronous feedback sessions via Figma.
My Role
-
Revamping the information architecture (IA) to streamline navigation and consolidate content.
-
Developing wireframes and mock ups featuring advanced search functionality with filters and content type layouts.
-
Designing a responsive, mobile-first interface aligned with U.S. Web Design System (USWDS) guidelines, harnessing atomic design principles, retaining the agency's brand identity.
-
Collaborating with developers, content strategists, and NIMHD stakeholders to align on goals and priorities.
-
Leading stakeholder workshops and asynchronous feedback sessions via Figma.
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.
1
Research & Analysis
We started by analyzing Google Analytics data and conducting user interviews to identify key pain points. Surveys and persona development helped us understand the diverse needs of audiences like researchers, community advocates, and policymakers.
1
Research & Analysis
We started by analyzing Google Analytics data and conducting user interviews to identify key pain points. Surveys and persona development helped us understand the diverse needs of audiences like researchers, community advocates, and policymakers.
1
Research & Analysis
We started by analyzing Google Analytics data and conducting user interviews to identify key pain points. Surveys and persona development helped us understand the diverse needs of audiences like researchers, community advocates, and policymakers.
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.
01
Research & Discovery
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.
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.
02
Design Conceptualization
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.
Audiences
The NIMHD website serves a wide-ranging audience, each bringing unique needs and challenges. While each group approaches the site with distinct needs, common challenges emerged, such as difficulties navigating the site, locating specific information, and understanding dense content.
COMMUNITY ADVOCATES
Engaging with events and tools for grassroots health initiatives.
THE APPROACH
Process
The project involved a comprehensive overhaul of NIMHD’s digital presence. This included migrating the website to Drupal 10, modernizing the design and user experience, and implementing robust accessibility measures.
I served as the Lead UX/UI Designer, guiding the project from ideation to delivery. My contributions included:
-
Conducting research and stakeholder interviews to uncover user pain points.
-
Redesigning the information architecture (IA) and creating wireframes.
-
Developing prototypes in Figma and iterating based on feedback.
-
Adapting the U.S. Web Design System (USWDS) to reflect NIMHD branding while ensuring accessibility compliance.
-
Collaborating closely with developers, project managers, and stakeholders to align on goals and deliverables.
Key Focus Areas
-
Revamping the information architecture (IA) to streamline navigation.
-
Introducing advanced search functionality with filters for content type, topics, and funding categories.
-
Designing a responsive, mobile-first interface aligned with U.S. Web Design System (USWDS) guidelines.
-
Developing a content management system (CMS) to support consistent updates.
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 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.
THE AUTONO DIGITAL PRODUCTS
The project included migrating to Drupal 10, developing a custom design system based on USWDS, and restructuring the IA to align content with audience needs. While time constraints required deprioritizing some features, the redesign focused on delivering high-impact improvements that addressed core usability and accessibility challenges.
