CivicTheme — designing and growing a government design system

Government’s 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 — fast and cost-effective site builds

Salsa created CivicTheme, a new component-based design system with an included Drupal 9/10 visual theme, to provide a solution for government websites. 

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

Salsa’s 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 (AEIC): Adopted designs during site assessment and discovery
• Federal Government agency: User-researched designs that were contributed back and theme build ‘battle-tested’ and hardened to inform refinements for initial CivicTheme MVP

CivicTheme deliverables

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

• Design templates: Desktop and mobile publicly available in Figma
• Design system: Structures, grids, components, etc, all publicly available in storybook
• Usage and adoption guidelines: Public instructions on how to adopt
• Contribution and giveback guidelines: Public instructions on how to give back
• Getting started pack: Info pack on all things CivicTheme
• Component library: CMS-agnostic UI component library for the dreamers and themers
• Drupal theme: A Drupal implementation compatible with GovCMS D9 and D10
• 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. More about Launchpad

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 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, IA and UX