Building the Ontario Design System
Editor’s note: Robyn Walter is a product manager with the Ontario Digital Service, responsible for collaborating with Cabinet Office and ministries to create a new design system — a collection of reusable elements that are put together to build a digital application.
One of the things that I like about working in the Ontario Public Service (OPS) is that you can work on pretty much any subject.
Renewing your driver’s licence? Check. Supporting wildlife rehabilitation? Yep. Registering a business? We’re here to help.
Across the province, we have more than 60,000 people involved in providing a variety of services to people and businesses. And, even though our work spans sectors and subjects, we are all a part of the same government.
Our goal is to make all of our services look and feel like they come from the same government. For example, if different teams use different user interfaces, the service experience can feel different from one service to the next.
At the same time, we want you, the people who use our services, to know that you’re interacting with an official Ontario product. That’s one of the many reasons to why we’re building a design system.
So… what is a design system?
A design system is a collection of design elements that teams use to design and develop digital products.
Design elements include:
Principles — the foundation for our design system, helping users make decisions about styles, components and patterns.
Styles — the basic elements of a website, such as colours, fonts or heading sizes.
Components and guidance — a consistent set of interactive features, such as buttons or checkboxes.
Patterns — a repeated model of interaction, such as collecting an address (this task should look and feel the same online each time that a user is asked to provide information).
A design system enables diverse departments, across a large organization, like the Ontario Public Service, to deliver consistent products and services, creating a unified online experience.
Content can shift depending on topic, but the experience is always cohesive, seamless and predictable.
To paraphrase the UX collective, good design helps create a consistent and identifiable language. By using a design system, we hope that our users — you — have a similar experience when accessing an online service, no matter what that service is, each time you interact with our organization. This familiar experience helps build trust and reinforces that an interaction is legitimate, credible and valid.
A design system is like a bucket of LEGO
The other way to think about a design system is like a box of LEGO. It comes in different sizes, but each piece is a similar shape and style. These various pieces are all compatible and work together to produce a larger product. Even if three people build completely different things — a boat, a house and a robot — they all look similar because they’re made from the same material — LEGO pieces.
The provincial government’s websites and applications often serve different purposes, but when we use consistent design elements, each one feels like part of a bigger whole.
Plus, having a common language better supports design and development teams. Rather than creating customized, and inevitably inconsistent, elements from scratch, product teams can simply choose the features and patterns needed for a particular experience, depending on user needs. This standardization frees up a huge amount of their time to focus on a product’s bigger challenges.
Where we’re at with Ontario’s design system
The province’s design system is currently in the Alpha phase — the initial stage during which we test decisions we’ve made in real time, and gather user feedback in order to continuously inform and improve the product.
You can read more on how we went through a Digital First Assessment — a process that enables digital teams to get advice from other practitioners on their approach — to get to where we are today in an earlier blog post.
We are still testing our ideas, gathering feedback from our colleagues and iterating as we go.
We are also taking our time to make sure we get the elements, guidance and code right.
Forking good ideas, not reinventing the wheel
We are very fortunate to be able to draw on the great work of teams like Gov.uk, the Government of Australia and 18F.
Building on their best design and development practices, we are embedding high accessibility standards, aligning to the new Ontario logo and brand guide, and testing various elements with users.
We’ve been intentional with our process, so that it integrates new design principles, drawing from the province’s Digital Service Standard.
The goal of launching a new design system is to support, enable and empower teams across the public service to deliver consistently great online products and services for users.
Getting started: core principles
Put the user first.
Don’t let backend constraints dictate frontend design.
Only include elements that have a purpose.
Every element in a user’s experience should have a functional purpose.
Be consistent.
However, if you need to introduce a little inconsistency to give the user a smoother experience, that’s okay. For example, we wouldn’t want a team to use our standard progress bar if they find it creates usability issues in their specific case. We would want them to do something that works and let us know why our version didn’t work.
Design for everyone.
Think about accessibility, mobile-first designs, those with slow Internet connections, and people who may not have English or French as a first language.
Start simple.
Simple designs are easier to change than complex ones.
Continually test and improve — even after launch.
Keep your product relevant and useful. User behaviours can shift over time. Don’t rest on one version of a product. Keep gathering feedback and continuously improve it — in perpetuity.
Looking ahead to the Beta version
We plan to release the design system as a public Beta later in 2020. In the meantime, stay tuned for more updates on what we’re learning, and how we’re improving the Ontario Design System.
If you have questions about our unfolding work, email our team at design.system@ontario.ca.
