Geoscience Australia’s Digital Design System

Geoscience Australia is a federal agency responsible for Australia’s earth and climate science. They offer vast resources, for everything from the data that powers Google Maps to charting sea level rise. But these resources have been hard to find, understand, and use. Today undertook a program of design research with government stakeholders, scientists, educators, and citizens to understand how people wanted and needed to access and use GA’s resources. We co-created a digital strategy to inform the design and build of a component-based design system that gives GA all the ingredients they need to deliver consistently great digital experiences.

The design solution required us to develop a brand strategy and digital strategy to give Geoscience Australia a stronger voice and tools to make resources consistently great and easy to access, understand, and use. Crucially, they needed a design system - a toolkit of robust, pre-composed and pre-tested digital design and code. We made a modular system of components that had best-practice UX baked in, integrated with older IT systems, and met high accessibility standards. We piloted the design system by bringing together components to build a complete website for Digital Earth Australia https://www.dea.ga.gov.au/

This project enables the ongoing democratisation of Australia’s climate and earth science and data. We’ve made it easier for scientists, businesses, and citizens to get to Geoscience Australia resources, understand how to use the data, and get on with the projects they’re invested in to make new and wonderful things. It’s also a sensible use of public money: Instead of reinventing the wheel for each new digital project, they now have a practical toolkit to piece together high-quality experiences themselves.

The design system was also documented through code using Storybook, which allows you to visualise and test each component in isolation. Additionally, a Playbook was created in Notion to complement the design system and show content editors when and how to use each of the components in the library. We used headless technology which means building a middle layer of technology that essentially untethers the front-end code (what users see in their browser) from any back-end system (where public servants enter data). This means we can use contemporary front-end code that’s fast and accessible for end-users, and are unrestricted by the older technologies of the government’s back-end systems.