Responsibilities

Product Design & Art Direction

Role

Senior Designer

Defence Jobs was looking to move their platform to a CMS. As part of this, a re-design of the entire site was needed to provide longevity and modernise their online presence.

The Australian Defence Force (ADF) has 3 services (Navy, Army & Air Force) and the Defence Reserves. They all required their own homepage that had to work from the design system.

Following Atomic Design Methodology, the entire Defence Jobs re-design was made from brand new components to form pages and templates.

Re-desiging the digital experience for Defence Jobs

As part of a digital transformation, we were tasked with re-designing the current digital experience for Defence Jobs.

The Australian Defence Force (ADF) consists of the Navy, Army & Air Force. In addition, there is also the Defence Reserves. 

Each area required their own website that had to work within the design system we would be building for them. Colour, imagery and tone of voice were the primary distinctors between the services and our system needed to allow that flexibility.

Logos of the indiividual services

The Tri-Service Homepage

The Tri-Service homepage is unique in that it encourages users to branch out to the Service homepages whilst giving them a taste of what the ADF has to offer them.

A background video is used in the hero panel featuring footage from recent brand campaigns of all 3 services.

The Tri-service homepage in full

Centered around search

The primary purpose of the site is to allow users to search for jobs in the ADF.

The search bar features prominently in the hero panel because of this.

Responsiveness & Component Based Design

A design rule that was established early was that the user would have the same experience on desktop and mobile.

This meant simplifying and reducing clutter wherever possible. Defence Jobs has a rich image library, with this in mind we designed each component to have a strong visual impact, no matter the screen size it was being viewed on.

Elements from our design system

The building blocks

Following Atomic Design Methodology, the entire Defence Jobs re-design was made from brand new components to form pages and templates.

Three services. One website

These components and page layouts then needed to work across all services. Brand colour combinations were particularly important to get right as the site required AA Compliance.

This proved to have its challenges, as some colours like the Army Yellow and Tri-Service Orange were not accessible on white backgrounds.

Re-useable components for the different services

Switching between services

Our service selector component on the Tri-service homepage helped users easily find the service they were looking for. It was important that this component had high visual impact and allowed the services to be represented beyond just their logo.

This look was re-used across other areas in the site, such as in the drop-down navigation.

Content pages

Re-usable components made up over 150 content pages across the Defence Jobs website.

A lot of the content being used was migrated from the old site. The mix of old and new meaned we needed flexible, scaleable components and this need helped shape what we designed.

Job pages

Defence Jobs offers over 150 jobs across the 3 services and reserves. The design and structure of the page itself needed to be flexible enough to handle the individual needs of each and every one of those jobs.

Copyright © 2020 Alex Dale