In the winter of 2019, the Digital Transformation Office (DTO) worked with teams from Global Affairs Canada (GAC) and the Canada Revenue Agency (CRA) on two separate optimization projects: Travel advice and advisories and Contact the CRA. Both involved top tasks that millions of Canadians seek to complete on Canada.ca each year. Here are 4 content design lessons that helped increase user success for these projects.
1. Put answers in web content, not publications
Travelling abroad carries risks. Global Affairs has a great checklist of things you should do before you travel. It includes reminders to check for travel advisories, look into vaccinations, and research how to travel safely with medication. This checklist was originally developed as a small flyer to be handed out at travel agencies or the airport. The information is valuable, so they added it to their website. To increase awareness of this resource they advertised it in the top banner on the Travel and tourism page. They also listed it at the bottom of the page as a publication. We tested whether people could find this list of recommendations for Canadians travelling abroad.
All participants in the baseline round of testing navigated to the page where it was advertised. 89% failed the task. Why? Participants weren’t looking for a publication. They were on a website, so they were looking for web content.
In the prototype we made changes to the navigation layer pages and created a web page called Before you go. This web page provided the checklist content along with some links to other helpful online resources, like a printable emergency contact card for your wallet. We tested this task again using our prototype and a new set of participants. Clear link and doormat text (text that describes the link) led participants to the answer. This time, the task had a 100% success rate.
As our reality becomes increasingly digital, it’s important to remember to design for your medium. A great printed resource can’t simply be posted on your website. It needs to be reimagined and adapted to be truly effective for your online audience.
Detailed description
A screen capture shows the printed flyer entitled Traveller's checklist advertised in a banner ad at the top of the original Travel and tourism page. To the left, a series of 3 screen captures show excerpts of the 3 redesigned pages and the link text that led to the checklist content in the prototype. The first page has the link text "Planning your trip". A cut-away of the Planning your trip page has the link text, "Before you go." A cut-away of the Before you go page shows the checklist content.
2. Create a clear scent of information
One of the most important tasks for Canadians travelling abroad is to understand the safety risks affecting their intended destination. In our travel project, we looked at how people interacted with the design of destination-specific advice pages. The original design of these pages had information divided into tabbed sections. This kept the pages short and scannable. It seemed like a good, efficient design.
However, when we tested, we found that more than half of our participants only checked the first two tabs when looking for major safety warnings: Risk levels, and Safety and security. With nothing written in the first two tabs, they assumed a September wedding in the Caymans would be fine. They didn’t think to check the Natural disasters tab, where there was a warning about hurricane season. They also thought they could bring arthritis medication with codeine into Indonesia. They missed the warning in the Laws and cultures tab that “penalties for possession…of illegal drugs are very severe and include the death penalty.”
Missing these warnings could have serious consequences. The project team tackled redesigning these advice pages in our prototype. We used headings instead of tabs to break up the content. This way people could scroll through all the content at once if they were looking for something specific. We also added an Important points heading at the top of the page. This section called attention to any major risks and linked down to the pertinent sub-heading where users could get more details. We put the most important words furthest to the left in this section, to take advantage of natural scanning behaviour. For example, the warning about hurricane season was structured like this:
- Hurricanes usually occur from mid-May to the end of November and can pose serious safety risks - Hurricane season
“Hurricanes usually occur” is in the position most likely to attract attention. Success rates for these two tasks increased dramatically on the prototype.
Users don’t dig deeper if there is no clue that they need to. If they think they’ve found what they need, they stop. However, if you give them a nudge to let them know there is more, they will keep going. Gaining an understanding of when they need that nudge, and putting “nudge text” where it’s most likely to be noticed, can help you restructure a page to create the required “scent of information” that will lead to success.
Canada.ca content style guide - Start with the most important information
Detailed description
Screen captures from the original content and the prototype show how the design evolved. Both are displayed in a mobile view. The original shows each of the "tabs" as expand/collapse fields. The Natural Disasters "tab" is expanded showing the text with the warning about hurricane season. A cut-away shows the text that appeared in the first "tab" - the Risk levels tab. It indicates: Cayman Islands - take normal security precautions. To the left is an image of the redesigned page. The main heading is Cayman Islands - Overall, below which is the statement, "Exercise normal security precautions." Immediately below is the Important points heading. The first bullet says, "Hurricanes usually occur from mid-May to the end of November and can pose serious safety risks" with a link called Hurricane season.
3. Help users make choices
In many service tasks, Canadians make a choice about the channel they want to use: online self-service, phone or mail. Showing all of the details for each of those options on service pages can be overwhelming. Even worse, the phone and mail options may have further choices to make within that option. For example, there may be different phone numbers and addresses for different provinces.
As part of the Contact the CRA project, the team worked to simplify the layout of a contact page to make it easier to find and understand the options.
We used the expand/collapse pattern to highlight the channels (by phone, in person, by mail). This forced users to choose the channel first. Only then did they see the details for that choice. It meant that they didn’t have to look at details that didn’t pertain to their choice. For example, if they wanted a phone number they didn’t have to sift through mailing addresses to find it. Success rates increased by over 30 percentage points for several of the tasks we tested with this new design prototype.
The design simplifies the layout of the page and reduces cognitive load. It makes it clear that there are several, distinct ways to perform the task. It also encourages self-serve behaviour by listing the online option first.
CRA isn’t the only department with tasks that require users to find contact information. Looking at this project as a case study allowed us to create an effective pattern that others can use to solve the same issue. That saves time and effort for everyone. The next step will be to work toward adding the new pattern to the Template and pattern library in the Canada.ca design system.
Check out the alpha version of the Contact block pattern.
Detailed description
This is a screenshot of the prototyped Contact page pattern. The top section of the page lists the types of payments you can sign up to receive by direct deposit. The online channel is the featured method for setting up or changing direct deposit and bank details. A large green button labelled Sign in to My Account is the primary call-to-action button. Next are other options: a link to Register and a link to MyCRA mobile application. Then a heading indicates Other ways to set up direct deposit or change bank details. There are 3 options: By phone, In person, By mail. Each is an expand/collapse field that defaults to the closed position so that the user must select one method to open the field and display additional details.
4. Build on previous experiments and learning
CRA is responsible for web content related to several top tasks for Canadians. These include filing your taxes and accessing the Canada Child Benefit. Many of these tasks require you to contact the CRA or send them a form. CRA call centers receive millions of calls each year. Often people contact the call centres because they can’t figure out what office to call for their specific request or because they can’t find which address to send their form to when the address isn’t printed on the form. Imagine how much more quickly people could receive service for complex questions, if the answers to these simple questions were easy to find online.
In 2018, during the CRA business registration and account maintenance optimization project, the team built a simple wizard to help people find the right tax service office or tax centre. (Forms must be sent to different CRA addresses based on where the person or business is located.) The wizard helped 61% of test participants successfully complete their task. This year we looked at the wizard again as part of the Contact the CRA project. We realized that it was still complex and only covered some of the most popular forms. There was room to improve the design.
The team simplified the process further. Instead of using postal codes in the lookup, we used the form number and province. This way the lookup works for all forms. Success rates climbed to 94% when we tested the prototype of the new wizard.
Improving user success is an ongoing and iterative process. It’s a bit like peeling an onion. Improving the first layer of challenges, often reveals further layers you can tackle. Building on work you’ve done in the past can result in significant progress going forward.
Original content
18% success
1st design: wizard
61% success
2nd design: lookup
94% success
Detailed description
Screen captures of 3 versions of content supporting the task of finding a mailing address for a CRA form. The first is the original content. The label indicates that users were successful 18% of the time with this design. The second is an image of the simple wizard built in the Business registration project. Radio buttons allow you to select the type of form you want to mail. The label indicates a 61% success rate with this design. The final image shows the revised wizard from the most recent Contact the CRA project. Users can enter the form number in an open text field and can select the location of their home, business or property from a drop-down menu. The label indicates a 94% success rate with this design.Final word
In our optimization projects we seek to find and understand the pain points for Canadians using Canada.ca. We want to continuously improve the design of the site and our content. Continuous usability testing allows us to better understand where the gaps exist, and develop empathy for our users. We’re working every day to refine the site and make it more effective for all Canadians.
We want to hear from you
Let us know what you think. Email us at dto-btn@tbs-sct.gc.ca or tweet using the hashtag #Canadadotca.