Center for Disease Control and Prevention Information Architecture Redesign Case Study

Image for post
Image for post
Redesigned CDC Website Homepage

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.

Image for post
Image for post
Inconsistent navigation on landing pages — Top: Heart Disease Landing Page; Bottom: ADHD Landing Page

[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.

Image for post
Image for post

Major Insights of CDC Users

  1. 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.
  2. Users would be willing to spend extra time digging through the CDC website because they trust its information.

The Process

[Site Audit]

The most visited webpages in the United States through search engines were related to diseases and infections like Lyme Disease, Obesity, and the flu.

Image for post
Image for post
Neil Patel Site Audit — Top Organic Traffic Pages through SERPs

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.

Image for post
Image for post

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.

Image for post
Image for post
Color Accessibility Test

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.

Image for post
Image for post
Current CDC website homepage

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.

Image for post
Image for post
Emery and Melanie set the table for card sorting.

[Redesign]

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.

Image for post
Image for post

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.

Image for post
Image for post
Sketch: top half of CDC homepage
Image for post
Image for post
Sketch: bottom half of CDC homepage with A-Z Disease Index

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.

Image for post
Image for post

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.

Image for post
Image for post
Desktop Wireframe
Image for post
Image for post
Mobile Wireframe

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.

Image for post
Image for post
Wireframe: Content Page

Prototype (testing)

View complete prototype in XD

Testing & Iteration

https://youtu.be/6L8UWcqb9KA

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.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store