The Problem
The CDC is a highly-trusted medical information website with over 12M organic monthly visitors. However, with so many organizations underneath the CDC umbrella adding content to the website, there are inconsistencies with the information architecture, navigation, and page layouts. This makes it difficult for users to find the information they are looking for.
[How might we redesign the CDC website so that users across the United States can quickly find solutions to their health problems?]
The Solution
To redesign the CDC website focusing on building a simple navigation and consistent structure of information. This would help users quickly find important information that influences their decisions related to their health and the health of people close to them.
Contributors
Melanie Perry — UX/UI Designer
Emery Wach — UX/UI Designer
Tae Yun Koo — UX/UI Designer
My Roles
Researcher
User Interface Design
User Testing
Information Architecture
Scope & Constraints
3 weeks
No budget
Focus on the information architecture of 5 main website pages
The User
For the sake of time, this project did not require a user persona. Our proto persona showed the goals and pain points of David that would lead him to finding information from the CDC website. David is well-educated and trusts the CDC website to provide answers to his questions that affect his family and students.
Major Insights of CDC Users
- These are users who seek the facts. They need real, reliable information they can count on to help them make vital decisions about their health.
- Users would be willing to spend extra time digging through the CDC website because they trust its information.
The Process
[Site Audit]
We used the Neil Patel site analyzer to learn that the CDC website is highly trusted with 12M annual organic website visitors and a domain score of 94. Even though website usability is poor, users still rely on government-provided content.
The most visited webpages in the United States through search engines were related to diseases and infections like Lyme Disease, Obesity, and the flu.
This part of the research was really important because it heavily influenced our decision to focus on disease-related searches and make that the forefront of our homepage and navigation.
Heuristic Evaluation
Together, we completed a heuristic evaluation for each of the 5 pages selected. We learned that although the information is poorly organized, the communication style was very fairly simple and direct. The heuristic evaluation revealed which areas we needed to focus on most — hierarchy of information, navigation, breadcrumbs, and developing a consistent look and feel across the website.
Accessibility
Accessibility is extremely important for government websites to ensure all users are able to access information.
My project partner, Emery, tested the CDC website’s color accessibility and it passed all but one test — link font color against the white background.
User Testing
Users tested the current website. We found that if navigation was missing, they immediately went to the search bar. In fact, they stopped relying on navigation entirely because the search results were so reliable — even though their initial instinct was to use primary navigation.
We also found that it was very difficult for users to find general information about the CDC. Some important pieces of data and information is buried under layers of pages.
Card Sorting
Card sorting taught us how users would like to see information organized on the website. We learned that users would prefer to have more categories with less menu depth, rather than having fewer menu items with an overwhelming amount of categories.
[Redesign]
Sitemap & Navigation
The updated sitemap represented our findings from card sorting — more menu categories that carry more specific sub-pages. This would make it easier for users to follow a desired path.
Sketches
I sketched the A-Z disease index with intention of including it on almost any page of the CDC website. Since diseases were the primary search of those living the United States, it was important to make navigating to disease pages as simple as possible.
Style Guide
I chose colors that represented the United States to hone in on the fact that this is a trusted, government website. The font family, Verdana, was selected for clear, easy reading.
Wireframes + Testing
The wireframes reflect a redeveloped navigation, a full-width hero carousel, and the A-Z diseases index. Since the homepage was very text heavy, cards with images were added to the news and outbreaks sections to add more visual elements. I moved the Diseases A-Z index right underneath the hero for even easier access.
For mobile, the A-Z diseases index is in the static navigation which can be accessed on any page.
Users enjoyed clicking on cards as navigation versus text. The CDC website utilized both, so I converted all secondary navigation to card or tab navigation.
For content/landing pages, each was designed with consistency. Tabs were developed to contain large chunks of content eliminating clutter and improving scanability [made up word]. The Genetics + Mental Health landing page would be the equivalent to the ADHD or Heart Disease landing page shown toward the beginning of this case study.
Prototype (testing)
Testing & Iteration
The Results
By implementing the A-Z index across the website, users were able to find diseases and health-related information from any page. This gave them quicker access to finding solutions to their health concerns.
