Australian Antarctic Program website

Australian Antarctic Program responsive website displayed on three devices: a laptop, a tablet and a mobile phone.

In 2019-20 the Australian Antarctic Division web team undertook to migrate the Division's primary website from Squiz Matrix to ProcessWire. As part of this process it was completely redesigned and the structure reviewed.

https://www.antarctica.gov.au/

Project details

Having tested the ProcessWire (PW) CMS with some smaller sites, it became time to move the Division's primary website into the new system. Prior to this occurring the AAD web team worked together to establish the majority of the information architecture. I then proceeded to work on a design in Moqups, firstly by building wireframes and then full-colour concepts using colours and fonts outlined in the Division's style guide. At each stage a selection of these were tested using Optimal Workshop and then a shortlist was sent to various decision makers. The designs were well-received and once one was chosen later in 2019, I began the implementation by writing the SCSS, building the page templates in PW and writing a significant proportion of the required PHP functions (a task divided between myself and the Web Manager).

Australian Antarctic Division website - concept design displayed on three devices: a laptop, a tablet and a mobile phone. — My design for the Australian Antarctic Program website.

By early 2020 we were ready to release the beta version of the site to staff but it was at this point, in the midst of the pandemic lockdown, a high-level decision was made to change direction and employ an external agency to provide a new design. With a strictly imposed deadline there was no time to test the design in Optimal Workshop, so the Web Manager asked me to assess the mock-ups and document any accessibility issues. He appreciated my thorough feedback which was then passed to the agency. Once these concerns were addressed the agency acknowledged that our expertise was such that they could entrust us to make some adjustments ourselves. At this point I took the three layouts (mobile / tablet / desktop) provided by the agency and implemented the responsive design. When they did a final check of my implementation they only requested minor changes such as letter spacing and font sizes. The project was delivered on time in mid-2020.

Australian Antarctic Division website - final design displayed on three devices: a laptop, a tablet and a mobile phone. — The final design for the Australian Antarctic Program website, provided by The20.

https://www.antarctica.gov.au/

Technologies used

HTML5, SCSS, PHP, native JavaScript, ProcessWire CMS, Pushy off-canvas navigation menu, Plyr media player, Fancybox lightbox library, Modernizr feature detection, BrowserStack, Moqups, Optimal Workshop, PuTTY and UltraEdit.