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.
A Defence
web estate
strategy
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.
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 Defence.gov.au 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 Defence.gov.au 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.
