Digital Transformation in Government Insight #65:
The Australian Government Design System

What is the Australian Government Design System?

The Digital Transformation Agency (DTA) released the Australian Government Design System in April this year. The System includes components developers can use to build agency websites. The goal is simple: to make it easier and faster for agencies to build sites, while also introducing increased consistency and usability.

Components

Currently there are 25 components available on the website. The core components include code for colour, typography and spacing (to align elements).

Other components include things like:

• Accordions— to expand and collapse menus

• Body styles— for headings, body text, lists etc.

• Breadcrumbs— to help with site navigation

• Buttons— to create visual links/action icons

• Footer sections and text

• Grid layouts

• Progress indicators— to show a user how they’re progressing through a process (e.g. a form)

• Side navigation— code to create side navigation items

• Text input fields— where user can enter in data

Benefits

The Design System has been set up to help government agencies at all levels build websites faster and more easily. These are two key benefits that the System delivers.

The Design System is also structured around building a community. Like all open source communities, this also delivers benefits such as:

• Knowledge sharing/collaboration across government departments

• Reduced costs through reusing components

• Improved functionality and usability through reusing approved components

• Improved designs

• Lowering the barrier to innovation (time and resources can be spent on innovation instead of reinventing the wheel

Who can use it?

The Australian Government Design System is officially designed for all government agencies - federal, state or local. However, anyone can download the design files (Sketch) and the code.

The design system and Salsa’s open design vision

Around the same time that the DTA released its Australian Government Design System, Salsa was putting the final touches on our own open design vision, OpenDesign2020. The underlying premise is the same — to reap the benefits of an open source design community for government. It’s great to see the saying ‘great minds think alike’ in action, in the government open source community. However, the Government Design System is more about the user interface (frontend development), whereas Salsa’s OpenDesign2020 is focused on citizen research, local needs and experiences, and the role of designer as a co-designer who gets to know a local community and its unique ‘operating environment’. This local knowledge helps that designer to use the right tools at the right time. Localised designers will then talk ‘globally’ to exchange the building blocks of open design.

Salsa Digital’s take

We've worked with this design system in the past, when it was known as the UI Kit. For example, we used version 1 as a base for our GovCMS theme back in 2016 (you can see it on https://www.anzacatt.org.au/ and https://www.staysmartonline.gov.au/). This newer version is a complete rewrite, including new React components, and is delivered as a split set of npm packages where components can be hand-picked as needed.

While this newer version strips out a lot of the extra components found in earlier versions, it does have a more thoughtful, structured code-base, which should make integrating it into your projects easier in the long run.

What this theme provides is an unobtrusive design with a high level of accessibility that’s built with users in mind. Often designs are considered bland if they don't have ‘pizzazz’ or don’t follow current trends, however site design is about more than just surface beauty; it’s about designing for clarity, and that's something a lot of sites overlook these days. This clear design style is particularly important for government websites, and a great way to lower the barrier to digital transformation in government.