Defence hero HR_1.mp4
Brand + Web design & UX for all departments of Defence

Department of Defence

An Atomic Design System for the Department of Defence

One Defence with
100s of departments
needs a design system

Partnering with the Department of Defence on a project of this scale was an exciting challenge.

In this case study we give you a quick overview of the project's scope, and importance of a consistent, centralised and adaptable 'Design system'.

Design systems are the driving force behind some of the world’s most complex digital products and services. They offer designers and developers a set of repeatable components and standards used to unify designs and drive development efficiencies.

Icon was tasked with delivering a new design system for the Australian Department of Defence web estate – a collection of over 100 disparate websites built over many years and on numerous platforms.

With Defence migrating their web estate to the GovCMS SaaS platform this was a perfect time to deploy a design system, simplify the information architecture, improve the user experience, and build a centrally-managed component library for use across their vast web estate.

XD screens
DoD Operations responsive webpages
DoD Operations BG

A Defence
web estate

Key to the success of this transformational project would be developing a strategy that aligned with the government's best-practice principles for designing and delivering government services.

Our approach to reviewing the Defence web estate was user-centred and evidence-based. We implemented both quantitative (content audits, stakeholder and user surveys, analytics and statistics); and qualitative methods (desktop review, stakeholder consultation, heat-maps and user videos) as part of our review process.

The strategy would act as a blueprint for future design and development stages.

Key deliverables for the content strategy included:

  • Facilitated stakeholder consultation sessions and audience surveys

  • Developing user personas

  • Reviewing site data and analytics for insights and trends

  • Conducting an extensive content audit

  • Undertaking best practice peer review

  • Refining the information architecture and conducting treejack testing

  • Developing a content lifecycle and governance processes

  • Producing a final content strategy report and implementation roadmap.

Department websites
BG pattern

Bringing the
strategy to life
using best-practice
UX principles

Icon’s digital team worked with the Defence web team to produce wireframe prototypes, a new Defence Design System using the ‘Atomic Design’ framework, and a front-end component library that was consistent, semantic and accessible.

An Adobe XD library was produced for designers, and detailed instructions were written for developers on how to use the new Vue.js component library.

Web teams are able to use the library when building fully compliant sub-sites within the website, or choose components best suited to their stand-alone site.

Front-end components are centrally managed, meaning updates can be made to a single code base that auto-updates sub-sites tied to the library. This approach ensures design consistency and reduces the risk of multiple code bases that fracture over time.

With the component library in place, Defence and Icon developers set about building the beta website in GovCMS – developing new components as the need arose.

Our content team oversaw content review and migration into the beta website, and conducted audits to ensure consistency and accuracy. This project is ongoing with numerous rounds of refinement expected for a web estate of this scale.

The Defence Design System is a living library that will evolve and expand as needs grow.

You can see it in action on the new Department of Defence website.

Reach out if you'd like a full demo.

DoD homepage