June 13, 2023 - Design systems

Back to Federal Provincial Territorial web management working group

Agenda

• Updates

• Design systems
  • Do you have internal tools or resources to help designers and developers follow a common look and feel?
  • Are there “spin off” products that help support the use and evolution of your design system?
  • What are you doing for prototyping?
  • Do you have lessons learned and how have you adjusted over time to improve your approach and/or your product?

Participants

• Janice Oliver, joining as the new Executive Director for Canada.ca and Principal Publisher.
• Victoria Dam, joining from the BC Government at Government Digital Experience (gov.bc.ca)
• Daniel Lam, Cabinet Office Digital in Ontario and Ontario Design Systems team
• Marcus Kernohan, joining from Government Digital Experience (Ministry of Citizens' Services) in B.C.
• Richard Elvidge, Cabinet Office Digital in Ontario
• Sarah Dunn from Government of Alberta, Alberta.ca
• Kayte McLaughlin, Digital Transformation team at Government of New Brunswick
• Annie Crombie, Canada Revenue Agency, Digital Design and Production Directorate
• Kate McDonald from Indigenous Services Canada
• Mary Beth Baker from the Federal Privy Council Office's Digital Communications coordination unit
• Jennifer Kowton, Government of Alberta, Edmonton
• Noha Abdelrahman, ESDC, Service Canada, PP
• Michèle-Renée Charbonneau, Digital Transformation Office
• Peter Smith, Digital Transformation Office
• Laura Piper, Digital Transformation Office
• Chelsey Donohue, Digital Transformation Office

Digital Transformation Office (DTO) Updates

This is the last meeting that we are chairing but we have a couple of volunteers who have come forward and asked for more information so they can take this group in a different direction. We do hope it continues. We’ll still participate but it will be exciting to see where this may go with new leadership.

Wildfires

Want to acknowledge all the wildfires across the country. We know there’s been a lot of work done on that throughout the country. Federally the communications are managed by the emergency response team. The top task on the federal wildfire page is getting to the provincial and territorial pages. If you notice something missing on the federal pages let us know and we will connect you.

• Federal wildfires page

Design systems

• Any internal tools created to help designers and developers in provincial/territorial organizations follow the common look and feel
• Looking for what others are doing
• Are there spin off products you’re using to help support the use/evolution of your design system
• What are you doing for prototyping
• Lessons learned

Government of New Brunswick (NB)

Digital strategy

We’ve been working for the last year to build a design system for the Government of New Brunswick.

• Started by trying to use Bootstrap but then we realized it wasn’t ideal for Government
• Instead we created a website as we have a very diverse audience of developers - some are very advanced and some need things simplified
• We’ve been testing this with early adopters

For components:

• stuck to the basics of what people really need for government
• noticed people reusing patterns to highlight things so we came up with some specific components that allow people to highlight things
• created do’s and don’ts
• included code for everything we’ve created.
• created a basic account form to support the many different ways we have for people to sign into things with different looks and criteria
• have a public backlog for requests so we have a public-facing way to show what we’re working on
• using the issue board in GitLab to manage the backlog, and we manually input these so we can vet them first

We think community building is important so we want to make sure we’re forming those relationships so we can ensure what we build is useful.  

New Brunswick uses Adobe Experience Manager. We have partnerships with Communications and Service NB and there have been great relationships between the two so we don’t have multiple design systems.

Alternatives to alerts:

• We have a callout and a call to action where we can add a button or link as another way to highlight something
• Needs identified based on looking at what’s being done currently (that may not work very well) and providing design patterns to better address the need in a more consistent way

The team:

• only 2-3 people working on the design system full time
• just hired a UX analyst
• pulled in members of our team to do testing and QA

The Digital Transformation Team is 10 people total.

Digital Transformation Office: Canada.ca Design System

A lot of the work we’re doing right now is taking what is a decent base design system and making everything more consistent and integrated.

The various pieces include:

• Canada.ca design system: templates and patterns, guidance
• Canada.ca Content Style Guide: writing standards
• Canada.ca design blog: articles that explain how to use components in the most effective way
• Web Experience Toolkit (WET): code

We’re trying to refine what we offer:

• Developing a content model to define how to approach writing guidance so other teams will be able to contribute to documentation
• Including rationale and research within documentation instead of just saying ‘these are the rules’
• Working toward a model where developers, designers, content creators, etc. can all come to a central place and get the information they need

We are learning how to define the core design system while letting other departments create their own design systems that complement that.

For example, CRA has been doing a lot of work on their own design manual while working carefully to ensure that what they produce complements the core Canada.ca design system.

Canada Revenue Agency (CRA) design system

We are working on a design system for people working on CRA content:

• Where relevant link out to the patterns and templates in the Canada.ca design system and in the Web Experience Toolkit (for code)
• Create other patterns and templates specifically for CRA
  • some may eventually get contributed to the core design system for others to use
  • some are very specific to CRA

As we think about designing a pattern, we are trying to do forward thinking about if and how we might contribute it back to the Canada.ca design system.

We realize that some people can code and some can’t so we’ve created a widget where people can select what options they want within a certain pattern and the widget offers up the customized code.

Collaboration is key to complementary design systems.

The team:

• people doing it off the side of their desk
• looking at getting some stable resources so there’s people dedicated to it but we also find it useful to have people working on other projects working on this so they can bring different things to the table as well
• would always want a balance between stable resources and engaging with people who are doing the day-to-day work and using the design system

Government of British Columbia (BC)

We are experiencing all the same challenges.

BC has a legacy design system that was developed about five years ago. My team is in the process of rebooting that and going back to the first principles. We are deep in discovery mode at the moment.

Government of Ontario

Ontario's Design System

This is a shared responsibility between Cabinet Office Digital and the Ontario Digital Service. Everything used to be under Cabinet but we created a content team, so there’s the Ontario.ca team and the ODS and they work collaboratively together.  

Government of Alberta

Digital experience standard

We created a "digital experience standard" to better communicate the standard to third-party contractors.

Also have a design system that’s available internally. The Design System is one of our priorities, so we have the luxury of having dedicated time for it.

Government of Yukon

At the Government of Yukon we have a Digital Service Delivery Guide available for vendors.

Most work has been on Forms. We are working on digitizing/automating a lot of internal processes. This will help with resource problems as we move away from paper/pdf-based forms to web forms.

Northwest Territories (NWT)

Web area is 5 people total including the manager and that includes everything web. Currently weighing the benefits of creating a design system if it’s only for that small team.

Doing theming work as we move onto a new version of Drupal, and we’re building components and then using all the thought processes from Canada.ca because it’s well thought out.

It’s a big challenge because there’s so many players with so many different ideas. We need something that works for departmental content and marketing content, etc..

Roundtable

NWT: How do you manage changes to the design system? Do you give people a timeline, do you enforce the design system?

Answer from DTO: This is our perpetual challenge in the federal government because as much as possible we are trying to promote consistency for users but behind the scenes the infrastructure is very fractured. Rolling out changes is difficult. Rolling out the footer took several months. We had to get the documentation straight, then communicate it, then roll it out, etc. The most high-traffic, visible departments are all on the same platform so that makes things easier, but then there’s departments that are on their own infrastructure so we give them timelines and then we have to monitor and follow up. Follow up happens off the side of our desk. There’s a big change management piece we have to do when we change things. We do have meetings twice a week with the Government of Canada web community to communicate changes and allow people to ask questions. They understand the importance of consistency for users.

Indigenous Services Canada: we are one of the federal departments that have our own infrastructure so we struggle with when we should be an early adopter of new patterns/components and when we should wait until DTO  has worked out all the kinks. Trying to figure out that balance is important for us.