A path toward a unified design system for the Government of Canada

What does it mean for public services to meet people’s needs and expectations in a digital age? Across government, teams are working to develop and deliver services and information that are accessible, seamless, secure, and predictable.

Making online information about government services easy to find and understand is critical to improving service delivery. In this blog, find out how public servants are developing a GC Design System, with the aim of establishing it as the central design system for the Government of Canada (GC).

Canada.ca – the Government of Canada’s website

If you’ve ever needed to access an online service or information from the federal government, then you’ve likely visited Canada.ca, the official website of the Government of Canada. Canada.ca provides visitors with access to information and services from all federal departments in one place.

To allow departments to maintain control over their communications, many organizations publish their own web content. This means that although Canada.ca looks like one cohesive website, it actually consists of many pieces in the backend. The use of a central design on all pages helps to ensure a consistent user experience for Canada.ca visitors.

One design system for the Government of Canada

One way to contribute to consistency in service delivery is through the use of a cohesive design system. In the Government of Canada, we’re working to develop an updated design system to meet the evolving needs of service delivery teams and the public in a digital age.

The work towards a unified design system has been underway for a few months, but it all started with the merging of two teams last summer- the Canadian Digital Service (CDS) and the Digital Transformation Office (DTO).

We’d like to share what the two teams have been up to since that merger, and where we’re headed with design systems in the GC.

Building blocks for digital services: Design system 101

Before we dive in – let’s take a step back and explain what a design system is. It’s a set of reusable ‘building blocks’ (patterns, styles, and components) that standardize the design and development of websites and applications. It helps ensure that information and services are presented in a user-friendly, consistent, and trustworthy way.

Web teams across the GC can use these building blocks (buttons, headers, footers, navigation patterns, etc.) to organize their online content and services in a way that’s predictable and trusted by people accessing public information and services.

Current design systems across the Government of Canada

Currently, web teams across the GC are relying on multiple systems and templates to build web sites and applications for public services. These include:

Canada.ca design system

The Canada.ca design system identifies the mandatory design elements for Government of Canada web content. It also provides user-tested templates, patterns, and documentation for other reusable components. The system helps departments create a more user-friendly, consistent, and trustworthy online experience for people who access Government of Canada digital services.

While the Canada.ca Design System focuses largely on defining and documenting the design of components, it doesn’t create the code for them. Currently GCWeb and the Web Experience Toolkit (WET) serve this purpose.

Web Experience Toolkit (WET)

WET is a framework that provides reusable components, templates, and design patterns for building accessible and consistent web experiences. It:

leverages Bootstrap 3.3.7 for responsive design, ensuring that websites are visually and functionally consistent across all devices. It also uses a modified version of jQuery 2.2.4 to enhance interactive elements and improve user interactions
conforms to the Web Content Accessibility Guidelines (WCAG 2.0) AA and leverages HTML5 and Accessible Rich Internet Applications (WAI-ARIA) to enhance accessibility
simplifies compliance with standards such as the Standard on Web Accessibility, the Standard on Web Usability, and the Standard on Web Interoperability.

Government of Canada Web Theme (GCWeb)

GCWeb is built on top of the Web Experience Toolkit (WET). It provides a set of components, page templates and design patterns that align with the Canada.ca design system. It:

allows GC departments and agencies to contribute additional patterns, templates and experiments via the GCWeb GitHub repository
inherits the accessibility features and best practices from WET
actively supports the technical front-end needs for the Managed Web Services (MWS) to publish content on the Canada.ca website
serves as the official theme for Canada.ca, ensuring consistency and a unified user experience across Government of Canada websites

WET is the broader framework, while GCWeb is a specific implementation tailored for the Canadian government’s web presence. While both systems provide the mandatory elements to ensure accessibility and consistency across GC websites, they are limited in their ability to support new technologies and a lack of dedicated resources to enable digital service delivery at scale.

GC Design System

To address the need for a more modern way to fulfill the Canada.ca design requirements, CDS has been developing GC Design System. This product will provide a more predictable and accessible design system that can be used across a multitude of platforms. It provides code, design, and guidance in a single place. It will eventually replace the Canada.ca Design System as well as GCWeb, serving as the starting point for GC teams building web experiences and applications.

Starting from a strong foundation: CDS and GC Design System

Last year, the Platform Product team at CDS started developing GC Design System to support web and IT teams in building recognizable, predictable, and inclusive user interfaces across digital public services. Working closely with the Canada.ca design system team in DTO and Principal Publisher (the technical authority responsible for the infrastructure underpinning Canada.ca), we’re creating a unified source for code, design, and documentation to help teams build GC web sites and applications.

GC Design System is a self-serve product that builds on years of previous work from the GC web community. With DTO becoming a part of CDS, this new system is being built and supported by a multi-disciplinary product team and content experts committed to improving how services in the GC are designed and delivered.

By using GC Design System, web and application teams across government will be able to leverage modern features to scale delivery. These features include a prototyping tool (Figma), code builder, web components, design tokens, and the flexibility to work in the programming language of their choice. GC Design System will also help teams meet GC standards for digital service delivery and communication, by embedding these requirements in the code and design, and offering guidance.

The team from the Canada.ca Design System is supporting this work by:

ensuring all mandatory Canada.ca style elements are in place to increase trust and consistency
conducting an audit on current design patterns to confirm they meet the design requirements for Canada.ca
continuing to provide guidance and support to teams to ensure online information and service are easy to find and use
aligning on content and documentation

It’s important to note, that while GC Design System is currently in development and testing with teams across the GC, there may be some minor inconsistencies between WET/GCWeb and the new GC Design System. This is okay, and a normal part of an iterative development process! The teams are focusing efforts on working together towards a primary design system, and will address any significant differences between the two systems as they occur.

Both GCWeb and GC Design System are available for use. We encourage departments to consider if GC Design System may meet their needs when designing new web experiences or applications or updating existing ones. Regardless of how the design is implemented (using GC Design System, GC Web, etc.), GC departments must still adhere to the mandatory elements set out in the Canada.ca design system.

Creating better digital services, together

Like all products we build at CDS, we’re taking an iterative approach. By testing and learning as we go, we’re committed to working in the open and building with the people who will be using the product. To learn more about GC Design System, check out its current iteration and consider joining the mailing list.

We’ll also be sharing regular updates on progress, lessons learned, and announcements of new features and components. The future face of public service delivery is in our hands – let’s work together to make it better.

If you have questions about adopting or complying with the Canada.ca design, contact the Digital Transformation Office.