The outbreak of the COVID-19 pandemic in early 2020 meant dramatic changes to the day-to-day work and priorities of public servants. The uncertain and rapidly evolving situation meant that Canadians needed up-to-date information on a wide array of topics.
Some examples of the topics people were looking for on Canada.ca included:
- access to economic support
- vaccines
- PPE
- information about travel restrictions
Departments and agencies needed to coordinate and update information on a weekly basis. Making key tasks and information easy to find on Canada.ca suddenly became much more challenging, as there were many more tasks competing for attention and limited real estate on the COVID-19 landing page.
At the start of the pandemic, the landing page used a tile design pattern that highlighted a few key topics. This approach was standard at the time and worked well when there were 1-5 main topics to highlight. However, early usability testing showed that when the number of topics needing attention increased to 10 or more, it became very difficult for users to find what they were looking for, particularly on mobile phones.
Landing page for COVID-19 on March 15, 2020
The landing page used a tile design pattern that highlighted a few key topics.
For mobile phone users, who made up at least 57 % of people using the COVID-19 page on Canada.ca, tiles were arranged vertically to fit on a narrower screen. With 10 or more tiles, this meant that someone would need to scroll extensively, making it even more difficult to find certain topics.
We found that participants sought quickly to “seize a tile” that seemed to relate to their needs, without understanding what topics were behind the link.
Landing page for COVID-19 on mobile
The key topics were arranged vertically with the self-assessment quiz at the top of the page.
Further, there were indications early on that pages would need to be organized and re-organized frequently, as financial supports, purchases and specialized information were announced. For example, the World Health Organization (WHO) was signaling that various types of specialized content for health professionals would come to the spotlight as more was learned about the virus.
We would need a place for links to technical guidelines about topics such as:
- transmission
- infection control
- emergency medical services
- clinical care
- vaccine access
These pages would contain information that was more detailed and specific to a healthcare audience, and so needed to be distinguished from similar pages meant for the general public.
Developing a flexible solution with anticipatory design
After identifying the challenges with the existing tile design, the Digital Transformation Office (DTO) worked with Health Canada (HC) to develop a new banded landing page design in March 2020.
Desktop and mobile versions of the proposed COVID-19 landing page on April 1, 2020
The new landing page uses a banded page design with four bands of links: Self-assessment, Current situation, Your health, and Financial and economic support. On desktop the bands stretch horizontally across the screen and on mobile the bands stack vertically.
The banded design follows web conventions, grouping pages by task categories. The Centres for Disease Control and Prevention and WHO have opted for a similar approach to grouping links.
The initial banded design on Canada.ca had 4 bands of links:
- Current situation
- Your health
- Financial & economic support
- "Focus on"
The first three bands each contained groups of links to pages for top user tasks for those topics. This layout is effective for phone users because they can see more links without as much scrolling. The "Focus on" group of links led to topic pages for special demographic groups, such as health professionals.
In a rapidly evolving crisis situation, the banded design provides advantages for government web teams as well. This approach let teams easily add, remove and replace links in the groups as the pandemic progressed.
When using a tile design, grouping links under categories would mean creating a sub-page for each category. For example, a tile might link to a sub-page called “Public health” which would contain links to the existing pages “Testing for COVID-19,” “Spread, prevention, risk,” and “Personal protective equipment, medical supplies.”
Addition and removal of sub-pages or tile categories needed to be made weekly. Creating and reorganizing tile and category pages became a drag on making timely updates.
When pages from multiple departments needed to be linked, there was also the question of who took ownership of maintaining and updating the category sub-page, and coordination became increasingly difficult.
The flexibility allowed by the banded landing page design was critical to staying nimble and ensuring the public had access to the most up-to-date information relevant to their changing needs.
Testing showed that the banded design was effective for users: exploratory usability testing with 8 users produced a task success rate of 90%. Participants on phones were less confused and able to complete tasks successfully, even with a larger set of pages to choose from.
Continuous optimization
The DTO helps departments make data-informed decisions about what information to prioritize, remove, or re-label in order on their pages to better support users. In ordinary times, the DTO makes recommendations based on top-task data and research into how people think about evergreen tasks like applying for EI, passports, or getting a work permit.
However, the pandemic introduced a whole new set of mental models and tasks we needed to quickly understand in order to offer timely guidance. In May 2020, the DTO collaborated with Gerry McGovern, WHO, HC and the Public Health Agency of Canada to conduct a study to determine which COVID-19-related tasks people were trying to complete.
The study incorporated data from analytics, user interviews, and a dedicated survey. Findings formed the basis for what went into each band on the COVID-19 page- which tasks were prioritized and how they were grouped together for easier scanning.
Improving Canada.ca by focusing on COVID-19 top tasks
Regardless of what was included on the landing page at any given time, it wasn’t of much use unless people could find it. In order for users to find what they’re looking for, the grouping and link labels in the flexible navigation page design need to match how users think about the associated task. In June 2020, DTO and HC launched a follow-up labeling study to determine which groupings and link labels would best support users.
Labelling study: which words work best
Making the changes that emerged from these optimization studies was greatly simplified thanks to the flexible navigation page design implemented earlier. Even now, HC continues to make updates by reorganizing and removing categories to better reflect the current state of how COVID-19 impacts society, with the option to re-add categories and links if the situation changes.
Governments play a central role in providing ongoing support for citizens during a crisis. Designing for a crisis means understanding the changing tasks people need to complete in order to weather the turbulence of the situation, and making it easy to find associated guidance, tools, and supports.
During the entire COVID-19 pandemic, the flexible banded navigation page made it possible to present a wider variety of content managed by multiple departments, and make frequent changes. Since the pandemic, teams across the Government of Canada have used the flexible landing page design to quickly pull together content from across government to respond to a crisis. For example, teams came together to contribute to an initial flexible landing page for Canada’s response to the crisis in Ukraine in 2022.
Landing page for Canada’s response to the crisis in Ukraine
The page features a super task button for emergency contact information, an alert about new immigration measures and then a banded page design with 5 groupings of links.
It’s not possible to predict the next crisis your team will need to respond to. But every web team can consider preparing by prototyping a flexible landing page that can be quickly implemented when it’s needed.