Setting up users for success with content design

Zak Kain, Content Designer

As you might have already read, CDS is working with Immigration, Refugees and Citizenship Canada (IRCC) to make the process of rescheduling a citizenship appointment as convenient and stress-free as possible for applicants, while empowering office staff.

Here are two insights from our research and usability testing that can be used to improve all kinds of digital services using content design principles.

What’s content design?

At CDS, content designers share responsibility for UX decisions with designers and researchers. While visual designers are working on layout and other details of an interface, content designers are working on the information architecture, messaging, and microcopy in that interface. For more about content design, check out this short interview with Sarah Richards.

1. Provide the right information at the right time

A common design pattern in digital products is “just-in-time” information or instructions. To guide users through a certain process (say, a cart checkout or signup flow), the interface gives them the information they need to succeed right when they need it.

When designing an IRCC tool to facilitate rescheduling a test appointment, we tried a similar approach:

Caption: Version 5 of the Alpha “Calendar” page wireframes

In this design, there are clear instructions provided at the top of the page. Under the calendar, there is an important reminder about availability. Both elements are critical for citizenship applicants to successfully reschedule an appointment.

When we tested this page with applicants, we noticed that while the content on the page was clear, it wasn’t being understood — or even fully read. Information at the bottom of the page was being skipped by users who had prior experience and familiarity with online calendars — they wanted to go right to the next step.

Insight: critical information should be delivered when users aren’t focused on another task.
Even if important information is delivered “just in time,” users may not digest that information if they are focusing on something more relevant to their goals.

To address the issue with “just-in-time” instructions, we reduced how much text needed to be read. We also moved that critical text to an earlier step in the user flow, where it can be the primary focus of the page so it isn’t forgotten while users interact with the calendar itself.

We added an introductory page to the service, that prepares users for what they should expect:

We also revised the calendar page:

Takeaways:

• Reduce the amount of descriptive copy on pages where there is an important task for users to complete.
• Separate critical information from elements that demand more attention from the user.
• “Just-in-time” delivery of important information isn’t always the best way to design a service — even if it’s more “efficient”.

2. Use “spoilers”

Similar to the notion of “just-in-time” information is the concept of “affordances.” Design affordances are interaction clues that are baked into an interface — like a knob on a stereo that you intuitively know should be turned to raise or lower the volume. In digital interfaces, design elements like form fields, buttons, and links serve the same purpose as that volume knob.

For the IRCC “Reschedule a citizenship test” service, we designed a page that asked applicants for their identification details and the reason they need to reschedule their test. In effect, this page is asking them “why are you using this service?” An early version that went through usability testing looked like this:

We knew from discovery research that applicants experience a lot of anxiety when waiting to hear back about their new appointment. After testing two versions of an early prototype, it was clear that applicants wanted to provide dates of availability. Doing so made them feel more in control, both in terms of the process and their own schedules.

Through more testing we found that people didn’t know the calendar page was coming after the first page where they are asked to explain why they can’t attend their appointment. They used the open text field to include availability information, not knowing that they would be asked to do so on the next page. This made the output of that field less usable for office staff, who need to filter through that information.

Insight: When users aren’t made aware of all the affordances in a process, they will use what they have immediately available to achieve their goals.
When users don’t know what comes next in a multi-step process, they may assume the step they’re currently on is their last opportunity to provide input. This leads to users “mis-using” — through no fault of their own — input fields for purposes the service isn’t intended to accommodate.

To fix this issue, we added a big “spoiler” for users: an introductory page that explains the entire process before it begins. We also refined the copy on the form labels and descriptions, so that it was clearer to users what information they should input into the form.

Revised introductory page:

Revised form page:

This addressed user anxieties around scheduling, and helped them complete the form in a way that was more usable for office staff. Sometimes, spoilers are a good thing!

Takeaways:

• Set expectations for user tasks before they start the process.
• Provide clear messaging around what input is required, and why.

What’s next?

When a service is designed iteratively and with a “research-first” approach, designers gain insight into the mental model of the people they’re designing for, and how they think about the problems they encounter in a service.

Being mindful of high-level content design principles like “set expectations up front” and “allowing critical information room to breathe” is helping the CDS design team build more accessible and effective services and products.

Originally published at digital.canada.ca on June 12, 2018.

La version française de ce billet de blogue se trouve sur Medium ici.