Back in college as a public health student, the Centers for Disease Control and Prevention (CDC) site was my best friend for writing research papers.
Or…more like a frenemy.
Navigating the site was my least favorite thing to do. I would spend hours hunting for information that should be easy to find.
Instead of spending 80% of my time writing my paper and 20% hunting down resources, it was the opposite.
Main navigation tabs were useless, often leading me to unrelated pages or even broken links.
To save myself the time, I ditched the tabs and searched for the information I needed using the search field (but that had its own issues too).
The CDC site isn’t the only one with poor navigation—many government sites suffer from the same problem.
And unfortunately the state of government websites—with its outdated content, look and feel—are due to factors beyond my control like
🚩 overly bureaucratic processes
🚩 lack of resources for website maintenance and
🚩 poor usability and accessibility standards.
But today, just for fun, I want to tackle the very problem of navigation and show what government sites could be (in this case the CDC) if given the opportunity to set those factors aside.
🌟 The results are ultimately a better user experience and a major, positive impact on the public’s perception of their government.
Why do people visit the CDC site anyway?
Before I could touch the CDC’s navigation, I had to get a better idea of why people visit the CDC site in the first place.
❓ What types of people visit the site?
❓ Are they students? Professors? Normal regular people?
❓ What kind of information are they looking for?
So I sent out a survey to get some answers. The results were interesting (and amazing).
Condensing survey responses to figure out which navigation features really matter.
From the data collected, here’s what I can infer:
About 61% of those surveyed are not students. This implies that other demographics visit the CDC site. These could be regular persons or people from non-health related fields (not just scholars who need resources for their research papers.)
Most people either visited the CDC site because they already had a specific topic in mind, wanted to learn about a health topic (which is still coming onto the site with a specific topic in mind), and/or find information on outbreaks. So people aren’t coming to the site to browse through.
They have a goal. “I have a topic in mind and I want my clicks to take me there.”
Out of all the six primary navigation tabs, most people said that “Outbreaks” was the most important header followed by “Travelers’ Health”.
People are also more likely to click on the “Outbreaks” tab (followed by “Health Topics” and then “Travelers’ Health”).
Outbreaks is what the CDC is known for. Especially with past major catastrophical events like COVID-19, the CDC serves as a primary source for outbreak related news.
🌟 Because of global events like COVID, people are more health-conscious and public-conscious today.
If there are other outbreaks out there (and it doesn’t have to be COVID), people want to know. So they go to the CDC.
Here’s what I hypothesize:
💡 01
Because people are coming to the site with a specific topic in mind already, they will navigate by using the search field more.
💡02
Most people will only frequent three out of the six tabs on the current primary navigation site: “Outbreaks”, “Travelers’ Health” and “Health Topics”.
Conducting usability tests on the primary navigation.
Let’s put our hypothesis to the test.
I conducted three user tests.
I gave them one simple task: Take me to the Air Quality page.
And all I did was observe one thing:
what they clicked on first.
🧑🏽 User 1 clicked on the search field.
👩🏾 User 2 hovered above the primary navigation (but got too overwhelmed), so they clicked on the search field.
👨🏻 User 3 clicked on the Health Topics tab.
Just from this action alone, I’ve figured out which navigation features truly matter to users:
💡 01
The search field and
💡02
The “Health Topics” tab in the primary navigation.
Between the two, the search field is simple, but the primary navigation is a real challenge.
It’s time to tackle this issue head on.
Diving deep into the CDC’s primary navigation (a horror story)
Card Sorting
Card sorting was the first step of the process. I wrote down each of the six primary navigation tabs on a notecard and then all of their respective topics that popped up underneath (the secondary navigation tabs).
Here’s where I failed my card sorting process (and it might not even be my fault).
Instead of taking down what the content was for the pages, I wrote down the page titles (a me problem). The issue is that most of the page titles didn’t accurately represent the content (a CDC problem).
It’s like clicking on the Air Quality page (title) but then it starts talking about The Red Panda Network (content).
Might be related to some degree but overall, pretty unrelated.
So I had to start all over. This time, going beyond the title of the page and creating new labels to describe the content instead (and also through Miro!).
Graphics blurry (please don’t hate me for this). If you want to view in more detail click here.
I sorted through the stickies, found common themes, reorganized and grouped similar and related content together.
What I Noticed
This is what I noticed. When I moved topics around, I realized a lot of topics were in either hard-to-find places or in unrelated pages and/or tabs. Users would have to click non-stop through the entire website to get to what they’re looking for.
This is bad because
More work = More likely to leave the site.
This makes for a bad user experience overall.
Our proposed solution is a more condensed navigation, with tabs speaking to the actual content of the page.
Creating a new site map
Here is the original sitemap of the current CDC site. I tried my best to condense but there is just so much content.
Graphic blurry sorry! (please don’t hate me for this). If you want to view in more detail click here.
And here is the sitemap as a result of the card-sorting I have done.
Graphic blurry (please don’t hate me for this). If you want to view in more detail click here.
This isn’t the best site map. What can we do to make it better?
Now that I think about it, I had hypothesized in the beginning that most people would only frequent two out of the six tabs on the current primary navigation site. The “Health Topics” and “Outbreaks” tabs.
However, the new site map I’d created still kept six tabs in the primary navigation.
So what about the “Data & Stats” and “Publications” tabs? Do they still matter?
If we follow my hypothesis, then a few tweaks to the site map would be needed.
Graphic blurry (please don’t hate me for this. If you want to view in more detail click here.
If we take these tabs out altogether, we would have condensed the primary navigation from six to three tabs in total. Which leaves me to ask more questions:
☝🏼 Would a more concise primary navigation invite people to utilize this feature rather than the search field?
☝🏼 Are we making it less accessible for populations that actually utilize these tabs specifically?
☝🏼 Is there a way to accommodate for these populations without jeopardizing the accessibility of the navigation?
This is a gap I’d love to dive into more (for another time).
Wireframing Time!
Low Fidelity Wireframes
Here is a lo-fi wireframe of the homepage with the primary navigation. I’ve also provided lo-fi wireframes for the secondary navigation for each primary nav tab. Super simple, nothing crazy.
One thing to note is that I have substituted the “More Resources” tab for COVID-19 in this version. This was the first draft. At the time of this project, a “COVID-19” tab in the primary navigation made the most sense as it was a most relevant event.
However, I would not make that same choice today (more on this in the last section).
The primary navigation follows the most recent version of the sitemap I’ve created. Six primary tabs:
➡️ Health Topics
➡️ Travelers’ Health
➡️ Outbreaks
➡️ Data & Publications
➡️ COVID-19
➡️ About CDC
Mid-fidelity Wireframes
My mid-fi wireframes have also transformed a bit from my lo-fi wireframes (I had multiple versions of the lo-fi).
Let me remind you of our hypothesis:
✴️ Visitors are more likely to use the search field more than the nav bar.
✴️ Most will frequent three out of the six tabs on the current primary navigation site: “Health Topics” and “Outbreaks”.
So in this mid-fi wireframe, the most notable change is that the homepage now has the search field front and center (as opposed to the search field being in the utilities bar).
Right below the search field are three buttons:
☝🏼 Travel Notices
☝🏼 Recent Outbreaks
☝🏼 Featured Topics
You will notice that “Recent Outbreaks” is included amongst the three. (Travel notices and Featured Topics follow as these are the next two options that visitors are most likely to search for on the site)
High-fidelity Wireframes
And here is the hi-fi wireframe!
Any Accessibility Issues?
The style tile I created follows a more modern look and feel than the current brand of the CDC (which is more government-y). I mentioned very early on that one of the greatest pushback for government website maintenance and updates is strict security and accessibility standards.
First, I checked for any contrast issues with our primary navigation.
I did the same with the buttons on our hero image:
Even though it would fail WCAG AAA for normal text, it would pass for large text (which is fortunately the format of the current text so we’re good here).
Overall, WCAG AA is a pass. Take that bureaucratic processes!
Style Tile. How about that modern look and feel?
I was going for a more modern and updated look and feel.
If I had more time, here’s what I’d do differently.
🔴 Is COVID still a relevant topic? Does it belong as its own tab in the primary navigation?
🔴 What about the “Data & Stats” and “Publications” tabs? Do they really matter?
I had mentioned this briefly, but I originally had “COVID-19” as a new tab for the primary navigation. This is because at the time of the project, I had seen local and state government sites have COVID-19 as its own tab. This would have all COVID-19 related information (like news, updates and resources). For a site like the CDC, I thought that this would be most fitting.
However, COVID-19 is an issue that has become the “norm”.
Although still relevant (and definitely still occurring), it would benefit the primary navigation to take this tab out and incorporate it in other ways - whether that be a COVID tab in the utilities section, in the footer, or a section on the homepage.
Another thing I’d love to dive into is who uses the “Data & Stats” and “Publications” tabs.
Do they matter?
Is there a way to incorporate the content under these tabs in the primary tabs for “Health Topics”, ‘Travelers’ Health”, and “Outbreaks”?
This gap is a wonderful challenge to tackle. It comments upon the government website’s main mission which is to disseminate information to the population first, not to be slick and snazzy.
The CDC site today (it got revamped?!)
The CDC website was updated since the time I began this project (November 2023).
Looking at the revamped primary navigation, my idea was not too far off.
For reference, this was the “old” CDC I was most familiar with:
and this is the current CDC site today (as of June 2024):
The primary navigation now has just four tabs:
🔷 Health Topics
🔷 Outbreaks
🔷 About CDC
🔷 Search
Changes to the nav the CDC made that I got right
✅ Including “Health Topics” and “Outbreaks” as main tabs for the primary nav.
In my proposed change to the navigation, I had included the “Health Topics” and “Outbreaks” tabs as most important (as this what I had found from the survey and user tests).
They do not have the “Travelers’ Health” tab any longer however and they’ve also omitted the “Data and Publications” and “More Resources” tab.
But the most shocking and interesting change that the CDC implemented was maintaining the search feature but incorporating it as its own tab in the primary navigation.
This tells me three things:
💡 01
The search field feature is just as important as all other tabs in the primary navigation.
💡02
Users are just as likely to use this feature as they would click on other tabs like “Health Topics” or “Outbreaks”.
💡03
The search field used to be on its own in the utilities section but is now part of the primary nav. This gets rid of the utilities section altogether saving space and directs the user’s attention straight to the primary nav.
I like this choice and I wish I had thought of that!
You have reached the end.
I’ll try and condense everything I have learned into bullets for an easy read.
Ask the right questions in your surveys. Don’t just collect data to have data.
Observe behavior. Actions speak louder than words.
Be proud of making a mistake.
Ask more questions.
Less is more.