A visual journey into the development of AGL’s new Design Language System and Information Architecture
An 8 week, 4 sprint burst to create the new agl.com.au
In late 2017, As part of AGL’s three year digital transformation, Loud&Clear’s Experience Design team set out to redesign the public facing website, and existing Information Architecture (IA).
Sprint 1 — Information Architecture.
Our challenge was to remove the bloat of over 500 pages, and decrease the depth from L7 to at least L5 (we got to L4 :-)
We worked with AGL to define the following principles and ensure there was a north star, and stakeholder alignment.
Our current IA is bloated, too deep, and contains many overlapping items
Our current IA does not represent the full breadth of AGL’s digital offering, such as Solar, content and campaign hubs, and social offerings
This initiative seeks to deliver a significant step change to our IA, not an incremental improvement.
This initiative will challenge current norms such as Residential, Business, About AGL
We will use data to drive decisions for refining and retiring content
We recognise there are low volume areas of the site that are legally required
Sprint 1 — Design Language System
AGL’s Brand team had developed the logo, colour palette and curve as part of their total brand overhaul.
Loud&Clear were tasked with creating a mobile first DLS, and new website that clearly honoured the new brand, while being familiar, easy to navigate, AA accessible, fast and delightful to use.
Our initial workshops highlighted the following 4 elements as important in any future state designs.
We picked up the fine liner to rapidly understand how we might look to incorporate the curve into a page design
Sprint 2 — Information Architecture
Loud&Clear began a content audit of all pages with a view to placing them into four categories; Remove, Needs work, Merge, (Leave) As is
The comprehensive content audit was informed by data collected by our Data & Insights team, and complemented with a manual audit of all pages to arrive at an engagement score.
Stakeholder workshops with multiple business units allowed us to get an understanding of how the content had come into existence, what the opportunities for consolidation were, and the legal and compliance requirements for current and future state content.
The engagement score was a formula based on multiple metrics including (but not exclusive to), page age, visitation, bounce rate and washed against an expert review by an XD Content Specialist with the aim of arriving at the engagement score to help define how the content might be sorted in a future state IA.
Data, and expert reviews supported the following recommendations.
Sprint 2 — Design Language System
We began to define the colour pallet we could take into an AA website, looking to seek shades of the gradient and brand palette that would ‘pop’, but still be legible.
With a focus on AA accessibility, Loud&Clear focussed on how we might use the new brand gradient within the designs while ensuring the content could be read by visually impaired users.
Due to clear accessibility issues, we needed to find other ways to introduce the gradient into the future site.
At the same time, we began to explore how the curve might play a role in the designs, without imposing itself on the general usability of the site.
Our early exploration looked at how we might use all of the curve in our designs, however it quickly became clear that we were going to have to use a small section of it, rather than use it in its entirety.
This allowed us to balance the header a little better and ensure there was equal weighting at the top of the page.
We followed a similar principle for how a secondary curve might be dissected for mobile and the logo.
Sprint 3— Information Architecture
We ran multiple card sorting workshops with a series of AGL customers. The purpose of these workshops was to understand how AGL’s customers organised the content on the site, with findings washed against our content audit recommendations.
Against this, we prepared our draft IA and content recommendations. These documents were designed for the purpose of socialising the early findings and recommendations with internal stakeholders and receive alignment from Legal, Compliance, and business units before we took the IA into testing.
Through our activities to date, we had removed three levels of depth (from L7 to L4)and close to 400 pages. In doing so, we needed to ensure the business understood the benefits and supported the radical change to the IA.
In doing so, we’d also merged three entry points (Residential, Business & About) into a single entry point, L0)
Sprint 3— DLS
Loud&Clear work to an atomic design methodology. Sprint 3 focused on refining our design decisions into a usable language we’d be able to roll out as we moved into component design.
At the same time we began planning the interactions and bursts of engagement we could look to introduce to the experience.
Sprint 4 — Information Architecture
Sprint 4 focused on testing and validating the Information Architecture.
Task based Treejack testing indicated we had created a better than industry standard IA that users were finding easy to navigate.
Multiple rapid Treejack and refinements sessions lead to the delivery of a final customer centric Information Architecture in just 8 weeks.
The new IA had seen the structure go from 7 levels to 4, with the thoughtful, data led curation of 575 pages down to 119. Best of all, customers were finding the information they needed faster than they ever had before.
Sprint 4 — Design Language System
Sprint focussed on component design, working with developers to ensure components could be rapidly implemented and with content teams to visualise how the static and personalised components would be utilised when stacked to form templates.
By the completion of Sprint 4, Loud&Clear had redesigned all components from the header to products to form fields.
Rules and definitions followed for the DLS. We wanted to make sure anyone from a campaign creator, to a publisher, to another external agency could understand, pickup and run with the DLS and that there would be consistency across all AGL public facing digital assets.
For each component, the rules covered;
Image selection
Component ‘dos’
Component ‘don’ts’
On page implementation
‘Do’s and don’ts’ for mobile execution
All components were full responsive, with components designed to; 1400, 960, 720 and 320px
These rules covered implementation, all the way down to selecting the appropriate focal point of images to ensure consistent mobile and desktop experiences.
Together, the DLS components and guidelines deliver consistency, a researched and tested enhanced customer experience and honour the brand brief.
To view the work, visit agl.com.au
