Redesigning the NIMHD Website
Enhancing Accessibility, Engagement, and Modernization for Diverse Audiences
01
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.
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.
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.
01
Research
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.
ROLE
UX/UI DESIGNER
TOOLS
FIGMA
MIRO
JIRA
TIMELINE
2023 - Ongoing
TEAM
JOSH MORALES
MATT WERNER
MICHAEL BAGNALL
TRISTAN WELLS
DUSTIN BOEGER
DISHA GHORPADE
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 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.
At Wix we’re passionate about making templates that allow you to build fabulous websites and it’s all thanks to the support and feedback from users like you! Keep up to date with New Releases and what’s Coming Soon in Wix ellaneous in Support. Feel free to tell us what you think and give us feedback in the Wix Forum. If you’d like to benefit from a professional designer’s touch, head to the Wix Arena and connect with one of our Wix Pro designers. Or if you need more help you can simply type your questions into the Support Forum and get instant answers. To keep up to date with everything Wix, including tips and things we think are cool, just head to the Wix Blog!
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.
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.
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.
ROLE
UX/UI DESIGNER
TEAM
JOSH MORALES
MATT WERNER
MICHAEL BAGNALL
TRISTAN WELLS
DUSTIN BOEGER
DISHA GHORPADE
TOOLS
FIGMA
MIRO
JIRA
TIMELINE
2023 - Ongoing
Project 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.
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.
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..
PROBLEM STATEMENT
Problems
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.
RESEARCH
Competitor Research
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 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.
-
Key Findings
-
The current website organization reflects internal structures rather than audience priorities, making information hard to find.
-
Users desire a balance of simplified navigation with robust content, targeted to their research and professional goals.
-
Accessibility and inclusivity emerged as top concerns, particularly in addressing diverse communities’ needs.
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..
Wireframing & Prototyping
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.
Wireframing & Prototyping
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, reducing the number of clicks to content and inconsistent updates.
Homepage Wireframes
Landing Page Wireframes
News & Events Section Wireframes
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.
Branded Design System Colors
Mobile-First, Responsive Design
A mobile-first approach ensured seamless usability across devices, addressing limitations in the previous design. The responsive framework allowed audiences, such as researchers and community advocates, to interact with the site conveniently from any platform..
Project 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.
The redesign’s success was measured through improved user engagement, lower bounce rates, resolved accessibility issues, and seamless adoption of modernized technical infrastructure.
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.
Project 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.
OVERVIEW
Project Goals
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
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.
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.
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.
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.
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.
03
Refinement & Delivery
Iteratively refining designs to perfection and delivering high-quality visual assets tailored to your needs.
04
Client Collaboration
Engaging clients throughout the design journey to ensure satisfaction and success.
Success Stories
Explore how my design solutions have transformed businesses and delighted users.
“Working with jm yes has been a game-changer for our brand. Their designs are not only visually stunning but also incredibly effective in driving user engagement. We highly recommend their services.”
Client Testimonial
“The level of creativity and attention to detail displayed by jm yes is truly commendable. Their designs have added tremendous value to our brand and elevated our market presence.”
Client Testimonial
“jm yes has a unique ability to understand the essence of a brand and translate it into captivating designs. Their professionalism and dedication are exceptional.”
Client Testimonial
Project Goals
-
Enhance accessibility with WCAG 2.1 AA and Section 508 compliance.
-
Modernize the platform with a migration to Drupal 10 and USWDS-based design.
-
Simplify content and navigation to better meet diverse audience needs.
-
Implement advanced search functionality and a robust CMS for dynamic updates.
-
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.
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.
Audiences
The NIMHD website serves a wide-ranging audience, each bringing unique needs and challenges:
RESEARCHERS & ACADEMICS
Seeking funding opportunities and research frameworks.
POLICY MAKERS
Using data and resources to inform public health strategies.
HEALTHCARE PROFESSIONALS
Accessing research findings and best practices for addressing health disparities.
GENERAL PUBLIC
Individuals from underserved communities seeking health resources and equity information.
COMMUNITY ADVOCATES
Engaging with events and tools for grassroots health initiatives.
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.
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.
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.
THE PROJECT
Scope & Goals
The redesign had three primary objectives:
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.
PROCESS
My Approach
Mine and the team's approach was anchored in research, intentional collaboration with stakeholders and cross-functional teams, and iterative design to ensure every decision aligned with user needs, stakeholder goals, and met all government modernization requirements.
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.
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.
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.
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.
The Existing Problem
Despite its importance, the NIMHD website was underperforming. These challenges made it difficult for NIMHD to communicate effectively with its diverse audiences.
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.
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.