This article was originally written by Avanade alum Joel Beath.

In late 2017, as part of AGL’s three year digital transformation, our 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 :-)

Depth and bloat of pages on site before IA activities

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 recognize 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.

We were tasked with creating a mobile first DLS, and new website that clearly honored the new brand, while being familiar, easy to navigate, AA accessible, fast and delightful to use.

Our initial workshops highlighted the following four 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

We began a content audit of all pages with a view to placing them into four categories: Remove, Needs work, Merge, and (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.

A very small section of the audit

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, we focused 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.

White area shows full curve with red section highlighting section used in below execution.

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)

Highlighting the change in bloat and depth between old and new IA

Sprint 3 — DLS

We 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.

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.

Treejack testing results

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

This 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, we 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, pick up 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.