Loading...

Loading...

Visualizing AGL's new design language system and information architecture

  • Posted on May 11, 2018
  • Estimated reading time 8 minutes
AGL_visual_Journey_header_compr

1_obuSVF8u6mjAJ8eI1vRINA

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 :-)

1_e_yfoJ4wfcNuNfG6nTjqSg

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

1_IYaxmUHZhxJiDwkLAidmSw

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.

1_O9qdI1ICiyDjv337OPlc6Q

We picked up the fine liner to rapidly understand how we might look to incorporate the curve into a page design.

1_obuSVF8u6mjAJ8eI1vRINA

1_ATqSLfMWtEH1VASjMQzj_A

Sprint 2 — Information Architecture

1_z_m0Yxi0MS0E_4vSHvUAzQ

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.


1_Jk_f9ptsF5mP0GLeoRg3DQ

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.

1_eF689UttZ4yZvYNh1rAPuw

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.

1_KrdDFa6VMAQ7x04C4Hyjlg

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.

1_DLm9W0EiXqXiunh2oVEadw

1_f6f7-rdhBhCHLarIBPdONg

Due to clear accessibility issues, we needed to find other ways to introduce the gradient into the future site.

1_pW5NgjPpMOB1FE_f20BA-A

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.

1_pujVkiWuicvI-Ffn09D3wg

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

1_PcZyvwiT15LlvMZhMbg9Pg

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.

1_bGM1AVNPM9OZVeq9gFi8LA

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.

1_1HVeSeuaz0twtVWl_JRFEg

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)

1_DIcSIgyfjPCoBREbRqwO-w

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.

1_utqQLt-99Y6cWTCBpy8RSw

At the same time we began planning the interactions and bursts of engagement we could look to introduce to the experience.

 

1_LLspOr__VMJaEPNmYo0gdQ

1_obuSVF8u6mjAJ8eI1vRINA

1_btve68yZt_JxWxx6DASH-w

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.

1_BcsUbSg4OEw_HN-_e8A3yw

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.


1_CunkL4Z4iiR7mcE_WSwcmA

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.

1_H7MdmjS8TwTHpYrZaYZkZw

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


1_IhstyZYcUaV4VN_9YVazfw

Component ‘dos’


1_cyQKm0TkUIN1F_UgTNGqAw

Component ‘don’ts’


1_w5WWrIuUQfMUiQwU9fQ7CQ

On page implementation


1_LT1JOMucGMALN1Qn9bAEUA

‘Do’s and don’ts’ for mobile execution


1_cyQKm0TkUIN1F_UgTNGqAw

1_zWDxB-PZY2fQXaedZo07Vw

All components were full responsive, with components designed to; 1400, 960, 720 and 320px


1_f9qHitF7nsIp4CeiIJw1GQ

1_-7mnRBXHy-p1JDl9mSwRFg

These rules covered implementation, all the way down to selecting the appropriate focal point of images to ensure consistent mobile and desktop experiences.

1_Z8sMhVRUBB30RurwmG19Nw

1_mAjxLXcmn6RxqacIlJKSuw

Together, the DLS components and guidelines deliver consistency, a researched and tested enhanced customer experience and honour the brand brief.

1_O9qdI1ICiyDjv337OPlc6Q

To view the work, visit agl.com.au.

Techs and Specs Newsletter

Stay up to date with our latest news.

Contact Avanade

Next steps

Talk to us about how we can bring the power of digital innovation to your business.

Share this page