CivicTheme — designing and growing a government design system

Overview

Governments’ challenge

When creating new government websites, departments often face the problem of high costs and long project timelines. This is particularly the case when building websites with bespoke visual designs.

Governments’ transformation

CivicTheme provides a quick, easy and cost-efficient solution for government agencies to build new websites. Out-of-the-box, CivicTheme delivers a high quality set of components and features that can be used immediately. Web publishers and administrators can create and manage pages and layout designs without any coding.

Salsa created CivicTheme focusing on both the site visitor and web administrator user experience. We followed project-led development, expanding CivicTheme by building and refining components based on our government clients' requirements and feedback.

The outcomes

• Significantly reduced costs and site build times (CivicTheme provides a user-focused theme and design system to start assembling sites immediately)

• Easy-to-use administrative interface to make building and managing sites quick and easy

• Rich library of standards-compliant components available

Full case study

Governments’ challenge — costly and time-consuming site builds

Many government departments design and build their websites in isolation. Agencies go through a custom design and theming process for every website to produce individual designs that solve common design patterns. This represents repeated effort and wasted money across government, with departments:

• Solving the same design patterns for each new website

• Conducting customised user research on base elements rather than overall user site experience

• Going through accessibility testing and remediation for every site

While these problems have been addressed before (e.g. by GovCMS’s UI Kit) the solution wasn’t comprehensive enough and didn’t allow agencies the flexibility they’d like.

Governments’ transformation — fast and cost-effective site builds

To solve the problems mentioned above, Salsa decided to create CivicTheme, a new component-based design system with a Drupal 9 visual theme.

We followed a four-step approach:

1. Customer research and UX audit of existing GovCMS websites

2. Review of the former Australian Government Design System

3. Review of GovCMS (Gen 1) UI Kit 1.0

4. UX expertise in modern design patterns

Our customer research involved talking to our clients and reviewing dozens of existing GovCMS websites with modern interfaces. We also looked at common design patterns and frequently used components.

From the former Australian Design System we reviewed key features such as:

• Use of accessible colour system (dark and light themes) and font guidelines

• Components including form styles, buttons, header, cards and breadcrumbs

Our UX designer’s expertise was also brought in as an input. Key areas for CivicTheme development included:

• Lessons learned from past user testing and customer feedback

• A focus on AA/AAA accessibility, leveraging Nielsen Norman Group research and Vision Australia validation

• Less focus on unused and/or unnecessary features, such as hero carousels and full-screen body copy

• A greater focus on mobile behaviour, including swiping, gestures and screen reachability

Project-led product development

CivicTheme was created using a standard product development approach, coupled with project-led development. This meant our government clients helped shape and test CivicTheme as we built it. For example:

• Civil Aviation Safety Authority (CASA): User-researched designs contributed back for design uplift

• Australian Energy Infrastructure Commissioner (ACLEI): Adopted designs during site assessment and discovery

• Federal government agency: User-researched designs that were contributed back and a theme build that was ‘battle-tested’ and hardened to inform refinements for initial CivicTheme minimal viable product (MVP)

CivicTheme deliverables

The result of some 1700+ hours of design and development work are:

1. Design templates: Desktop and mobile publicly available in Figma

2. Design system: Structures, grids, components, etc. all publicly available in storybook

3. Usage and adoption guidelines: Public instructions on how to adopt

4. Contribution and giveback guidelines: Public instructions on how to give back

5. Getting started pack: Info pack on all things CivicTheme

6. Components library: CMS-agnostic UI component library for the dreamers and themers

7. Drupal theme: A Drupal implementation compatible with GovCMS D9

8. Launchpad: An add-on that allows people to quickly and easily set up their own tailored sandbox Drupal website with CivicTheme pre-installed — no developer required. Launchpad is made up of 3 parts: a setup wizard, automated deployment and a hosting platform.

Storybook

Every site has a Storybook application that demonstrates branded CivicTheme and custom components.

The outcomes — a design system with many benefits

At a high level, CivicTheme delivers the following benefits to government:

• Higher quality, consistent and compliant designs

• Lower delivery costs for high quality design

• Quicker delivery times for high quality design

• Greater consistency and consolidation of user experience

• Lower gaps and costs for adaptations

• Greater adoption of default designs and reduced maintenance burden

The benefits can also be clearly seen for different groups within governments:

• Content managers: Greater capabilities to develop sophisticated pages without development

• Site builders: Simple and easy-to-assemble sites with a large library of ready-to-use components

• Agencies: Large reduction in the cost to build sites with higher quality and reduced reliance on vendors to manage or facilitate structural changes

• Designers: Less focus on customisations and more focus on user research, information architecture (IA) and user experience (UX)