Updated on December 7, 2021

The ongoing pandemic has underscored how important it is to have a clear communications strategy to deliver health information. This includes ensuring that the websites containing that information are intuitive, clear, and easy to navigate. Bad UX is a critical problem for healthcare sites—especially during a pandemic. 

Let’s start by taking a look at three of Canada's provinces’ official Covid-19 information hubs and discussing what they’ve done right and what could be improved.

Then, we’ll look at some UX best practices that can help everyone get the vital health information they’re looking for on your site quickly and easily.

Real-life Examples: Provincial Covid-19 Information Hubs

Quebec

Minimalist design, passive language

Visit page

Quebec covid page

✔️ Good

🛑 Room for improvement

  • Important update banner at the top of the page directs visitors to critical new information about pandemic-related restrictions
  • Good information hierarchy
  • Best mobile version (no need to scroll to get to the important calls to action)
  • CTA (call to action) labels are noun-based rather than verb-based, and the page’s language in general is quite passive
  • The main CTAs are a mix of scenario-based and topic-based needs
  • No main navigation menu to provide an overview of the available content

Ontario

Engaging and action-focused

Visit page

Ontario covid page

✔️ Good

🛑 Room for improvement

  • Designed as its own self-contained hub with a navigation menu that offers an at-a-glance look at what the page contains 
  • Good hierarchy of information
  • Calls to action are clearly scenario-based and quickly funnel visitors to the desired content
  • Language is clear, simple, and action-based. Calls to action are written in the third person.
  • Cases overview is simple to understand
  • The mobile version requires a lot of scrolling to access the main page content (menus/update banner could be resized proportionally)
  • The navigation menu might be overly complex for the content, as it leaves room for ambiguity (am I looking for financial services or business information? What do they mean by “tools”?).
    A possible alternative: organize content and navigation by audience: individual citizens, businesses, healthcare professionals.

British Columbia

Comprehensive but intimidating

Visit page

British Columbia covid page

✔️ Good

🛑 Room for improvement

  • Immediately segments healthcare professionals from other users
  • 24/7 hotline information is offered at the top of the page
  • All of the available content is clearly listed on the landing page, directory-style 
  • No content hierarchy, quick links, or emphasis means visitors must comb through long lists of content in order to find what’s relevant to them
  • Having all available content listed directory-style has its benefits, but it could also cause information overload —especially in visitors who are already ill and/or stressed

Now that we're warmed up and in UX critique mode, let's look at some actionable takeaways you can implement in your own sites.

5 Best Practices for Communicating Health Information

So how do you build a healthcare site with a good UX? Here are 5 best practices that’ll help you communicate vital information clearly and effectively.

  1. Start at the end
  2. Think mobile-friendly
  3. Follow the inverted pyramid
  4. Consider new consumption habits and accessibility
  5. Build for your team, too

1. Start at the end

What do your visitors need to accomplish when they visit your site? Find the location of a specific service within a hospital complex? Get information about services they’re eligible for? Find out whether they can get vaccinated? Write that down before anything else. 

Mock your website up the way you like and figure out key copy and graphics. Then, when you're finished, go back to what you put down as a goal. 

Does your site clearly direct people to that single goal from the instant the page loads? 

Is it confusing what you should do first? If so, start again. 

Especially in a pandemic, but in any health-related situation, people are stressed. They are not reading as carefully as they could. Odds are high something else is on their mind when they browse your website.

Make it easy for them. Show them the goal and nothing else.

2. Think mobile-friendly 

Your website must work on mobile devices and make the most important calls to action visible immediately—i.e. above the fold. 

Let’s see how our three provinces perform on this front.

BC covid page on mobile
Ontario covid page on mobile

Quebec covid page on mobile

British Columbia’s Covid-19 information hub has arguably the weakest mobile experience of the three. That doesn’t mean it gets everything wrong, though! While the large, nonfunctional image takes up too much valuable space when you land on the page, at least the important phone number information is still immediately visible. There’s also a practical “In this section” drop-down menu to help visitors find what they need on the page.

Ontario’s hub checks most of the mobile-friendliness boxes, and I found the site easy to navigate on my smartphone. One potential improvement would be to adjust the size of the topmost elements (update banner, navigation menu) in order to make more room for the key call to action below.

Overall, if we’re just looking at the mobile experience, Quebec’s hub would probably be our winner. Its top elements are proportionally sized so that all four of the key CTAs are visible immediately upon entering the site, giving it an edge over Ontario’s version.

3. Follow the inverted pyramid 

Journalists are taught to write their articles in an inverted pyramid structure, which means putting key information in the first few lines to ensure readers can understand the gist of a story at a glance. In other words: the more important something is, the higher up it should be on the page.

inverted pyramid

Depending on your site’s purpose, highlight information that’s most relevant to users and make sure they can access it quickly. Health information can be complex and lengthy, but it’s important to surface key pieces of information without making users search through pages of content. 

Ontario’s and Quebec’s Covid-19 pages don’t highlight exactly the same information, but they both do a good job of emphasizing what they consider to be the most important or sought-after content. 

As for BC, while the bulk of the information on the page is organized by topic without any clear hierarchy, at least the province’s 24/7 Covid-19 hotline—ostensibly the most important information people are looking for—is clearly featured at the top. 

4. Consider new consumption habits and accessibility

Websites are no longer consumed only by humans with eyes. Siri, Cortana, Alexa, and other virtual assistants are tasked with reading out content for drivers or busy people at home. Search engines constantly crawl and update search listings based. Conversational UIs like chatbots (which you’ll find on two out of our three example sites) are proliferating. And, of course, many people have vision impairments and rely on assistive screen devices to navigate the web.

Good UX is about designing an experience that works for every possible user, which means following accessibility best practices and keeping information as simple as possible. 

Use plain language and shorter sentences, and always spell out acronyms and abbreviations. Label action items with verbs, not nouns.

For example, on Quebec’s page, instead of the passive “symptom self-assessment tool” and “Covid-19 testing”, clearer options might be “Assess your symptoms” and “Find out how to get tested” (or, even more simply, “Get tested”).

CTAs from the quebec covid page

Finally, mark up your site with structured data. People expect information to show up on Google maps, so make sure to tag location information correctly. Similarly, if someone asks their voice assistant what a clinic’s opening hours are, that information needs to be appropriately marked up in order for Google or Siri to read it back. 

5. Build for your team, too

The homepage is designed to serve your customer, but one of the best ways to help guide a customer through a complex problem is to make sure that the healthcare professionals who serve the public during a health crisis can find and use relevant snippets of information from the website. 

Of the three provincial Covid-19 hubs we’ve looked at in this article, British Columbia stands out by including a clear CTA targeted at healthcare professionals at the top of the page, which immediately segments audiences and lets visitors access the most relevant content to them.

Bc page cropped to show topmost content
BC's Covid-19 hub guides health professionals toward relevant resources right at the top of the page. The image above the CTA button could be omitted, as it doesn't add any new information and distracts from the important text.

Consider both how healthcare clients and how healthcare workers label the information they need and ensure that your content is tagged accordingly. In other words, aim to accommodate the different mental models of patients versus practitioners when it comes to seeking health-related info.

Make sure to keep your site up to date, and highlight information that was recently added or modified. Healthcare websites need to be reliable, trusted resources for all that use them.

Finally, when designing content types and taxonomies, consider how internal staff will search for clinics or health services. If staff have a website login, you could also design a more advanced search interface that’s customized to their needs.

Learn more about UX for health information

Good UX is a series of choices involving empathy for the user, an understanding of the complex changes that have occurred in how content is consumed over the last 5 years, and a relentless focus on simplifying and then adding lightness. 

Want more insight on user experience for online health information?