Canada Post Design System

A small corner of the gigantic UI pattern JPG

Systems set you free

Problem area

When I joined the UX team at Canada Post, deciding on visual and interactive elements for projects was a challenge. A colleague sent me a link to a giant JPG (above) on Dropbox. It was an overview of all possible UI design patterns with specs, but there were no guidelines for how to use them, including any rules that were in place, or what had been done recently. It was hard to get definitive information for questions like:

  • Why do different pages on the website have different typographic hierarchies?

  • When should I use a large button vs. a medium button?

  • What should I thing about when choosing images on Shutterstock to support blog content or banner images?

  • Is there a method or formula for drawing new icons as needed?

Without a well-defined system or central pattern library, designers would interpret the specs differently. The result was inconsistency between experiences throughout Canada Post’s digital space, which ultimately would cause confusion, frustration and a lack of confidence for our users.

Supported by our manager and director, two design colleagues and I started auditing design patterns and planning how to develop a design system.

Brad Frost’s famous Atomic Design model: the building blocks of a design system

Brad Frost’s famous Atomic Design model: the building blocks of a design system

The Process

Phase 1: interim design system

  • Heuristic evaluation/audit of primary components

  • Research best practices

  • Refine, redesign, remove components

  • Document and socialize to team, organization

  • Use components and reflect

Snapship — a product that enabled small business users to set up a shipping order, pay for it, and create a shipping label — was the design sandbox to accomplish PHASE 1 above.

Snapship_Step1.png

As the UI/UX designer on the project, I evaluated, eliminated, iterated, and redesigned patterns for:

Organisms

  • Forms

  • Modals

  • Tables

  • Notifications

  • Progress Tracker

  • Date Picker

  • Payment & Checkout

Atoms

  • Typography

  • Colour palette

  • Buttons

  • Inputs

  • Language

  • Iconography

  • Images

  • Illustration

  • Error messages

  • Help text

Phase 2: moving toward a new design system

A new agile team had formed to build a new website for Canada Post. Part of this project would be to refactor all of the components into the Foundation framework.

Over a few months and concurrent with other projects, I worked on iterating the interactive components. Those shown further below are what I personally worked on, but these are the different parts of the entire design system:

  • Interactive components for software tools on the website

  • Navigation for desktop, tablet and mobile views of the Canada Post website

  • Web page layouts

  • Photography: both custom photography and stock images

  • A consistent iconography and illustration style — including the method for any designer to be able to draw icons and illustrations from scratch as needed

  • The design system within the Canada Post native app — for both iOS and Android

A group of us pulled together all of the above into master Sketch files which are now public and available to download.

The agile team built Mercury, the Canada Post Design System, which was launched in May 2018.


Typography

There were too many header sizes in the old typographic scale, and consequently designers were using all the options like a menu, which created inconsistent hierarchy from one page to another on web pages and within tools. Furthermore, the base body copy font was 14 px, which didn’t meet accessibility requirements.  

The Canada Post digital font is the Roboto family. I experimented with it in different typographic scales and combinations. It’s a fine balance: we needed a clear and visible hierarchy with sufficient options to support the different content needs, without having too many options that can overwhelm and risk inconsistency of use. We chose the system below, based on the body copy size 16 px = 1 em. 

Key finding between Sketch and HTML

Before nailing your typographic system, be sure to test it in HTML and get feedback from different people (of different ages) to see how it is perceived by different eyes.  

Fonts look really different in Sketch than they do on the web, and we wound up changing our body copy font from Roboto Regular (400) to Roboto Light (300) because the regular weight is too heavy in HTML (whereas light is a little too light in Sketch). There are different ways to optimize how type looks, like adjusting line spacing and tracking. Lots of experimentation is needed!

Typographic specs for the new design system

Typographic specs for the new design system

Colour palette

I updated the CP colour palette to meet AA accessibility standards, because the previous palette was insufficient for AA accessibility. As well, the palette had to support all known use cases for different UI patterns (eg., text and buttons on white or grey backgrounds). The colours are now brighter and contribute to a cleaner look and feel than the previous palette afforded.

ColourPalette.png

Buttons

When making changes to a system, it’s important to do due diligence to understand why we’re doing this, and socialize the information to the team and stakeholders.

I did a heuristic evaluation of button use on the website and all apps and then wrote a case study including the audit, a survey of best practices and recommendations for how to improve our use of buttons. I presented the case study and plan to the UX team to build awareness and get their feedback.

A dog’s breakfast: clippings from the website and apps of all the different uses of buttons

A dog’s breakfast: clippings from the website and apps of all the different uses of buttons

Excerpt from the buttons case study

Applying order to buttons

I experimented with different button styles and colours in different layouts (eg., an app, and a web page) to explore how they worked with different elements and content. We pared down three button sizes to just one, and selected a solid accessible blue primary button, with outline buttons for secondary actions.

Since Canada Post is a government organization, we had to follow at minimum AA guidelines for accessibility. Some specs include:

  • Label 16px Roboto regular

  • Colour contrast optimized for AA accessibility, meets the needs of all use cases

  • Sentence case, concise labels with a limit of 22 characters

The “After” shot: Canada Post buttons UI gives provides order

The “After” shot: Canada Post buttons UI gives provides order

  Forms overhaul

“Fade toward invisibility.”

-Luke Wroblewski

Similar to the button problem, we had a forms consistency problem at Canada Post. To continue with due diligence, I did a heuristic evaluation, audit and researched best practices in a case study for forms.

Excerpt from forms case study

Once I learned more about forms design, I really got into it. Good forms design is important because forms present a lot of pain points for users. The flipside of this is they’re excellent meaty designs problems to solve!

Top 5 best practices for forms design

1. Organize your form into digestible chunks, design a clear, easy to scan visual hierarchy. 

2. Ask the right questions:

  • Have a conversation. Speak as if you’re speaking with a person—because you are.

  • Balance business needs with user needs. Use vocabulary people understand and use, not what your organization uses.

  • Only ask what is important right now. Wait until you really need to ask that.

  • Make sure the question offers a benefit to the user, especially if they won’t want to answer it.

3. Provide help, but not intrusively — to explain unfamiliar data or terms. 

4. Provide inline validation and feedback.

5. Use mobile specific patterns and interactions for mobile form experiences. Avoid unnecessary inputs. 

Forms components from the CP design system

Canada Post UI patterns for forms

Progress tracker

The progress tracker is an important element for complex multi-step experiences: it provides a visual concept for how the process is organized and represents where users are in the task they’re trying to accomplish. 

Excerpt from my progress tracker study

When I designed the progress tracker pattern for Snap Ship, I did a competitive analysis of the pattern, looking at different bank registration flows, Airbnb, Uber, Amazon and additional e-commerce checkout flows and gathered the information into a keynote deck for the team’s reference. 

Once we had our new colour palette and iconography system, I updated the progress pattern for the parcel pickup design concept. 

The tracker fills with colour as the user makes their way through the steps. In addition to colour, the current step label is bolded. Icons can be easily swapped out to match the meaning of any step label.

Notifications

I also designed the UI patterns for status or system messages (below left), and similarly, the interaction for inline messages to provide information, feedback or help as users complete tasks. 

Patterns for notifications

Personal reflections

Going forward, I will always use and advocate for developing any kind of design system and pattern library. It takes patience, time and effort to do it well, but it’s an essential tool for effective design organization, clear communication between designers and developers and using a system will help keep your product looking smart and consistent. 

I learned in my research that developing a design system is different for all companies, and never perfect anywhere. It depends on leadership support, people resources, the development culture, the technology and architecture of the product and an organization’s commitment to adopting the system.

The more, the merrier: when you have more people contributing, you have diversity of ideas that result in a better system, and it gets completed faster.

Finally, a design system is never done. It’s a living, breathing entity: there is always room for innovation and improvement.