At a glance
2021 - 2022
1 to 2 years
CivicTheme, GovCMS, Drupal
Discovery & strategy, Design & user research, Build & migration
Whole of government, Open design, Open source, Web development, Content management systems, Drupal Planet
User needs, Multidisciplinary teams, Agile delivery, Tools & systems, Design, Open standards & common platforms, Open source, Accessibility
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.
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.
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
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:
Customer research and UX audit of existing GovCMS websites
Review of the former Australian Government Design System
Review of GovCMS (Gen 1) UI Kit 1.0
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
Office of National Intelligence (ONI): 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)
The result of some 1700+ hours of design and development work are:
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
Components library: CMS-agnostic UI component library for the dreamers and themers
Drupal theme: A Drupal implementation compatible with GovCMS D9
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.
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)