AGL, Australia’s largest energy provider, recently launched a rebrand to reflect the major changes to the organisations sustainable decarbonised energy agenda.
The rebrand was to be rolled out over one weekend. Leading up to the reveal, a plethora of external agencies (including L&C) and internal teams worked against the clock across multiple digital platforms and touchpoints to implement a brand that was still in development.
The problem to solve was, how to apply a brand that was still in development to all digital components, across all platforms, for all stakeholders, while offering complete flexibility to cover the immediate risk of slowing anyone down.
We needed a live single source of truth for the look and feel of the redesigned brand, and for all stakeholders to embrace the uncertainty of change.
To solve this challenging task, we came up with the AGL Digital Living Style Guide.
The first step in the AGL Digital Living Style Guide design process was studying Silicon valley best practice. The startup space has a proven ability to simultaneously ship features and incremental value very quickly. We combined our findings with our in depth knowledge of atomic design—which is the ability to think about user interfaces as a cohesive whole, a collection of parts and of Sitecore helix—, and the official Sitecore architecture conventions that future proof technical design by architecting as modules, making it easy to build, test, extend, and maintain Sitecore implementations.
We then began working with a truly agile methodology. Embedded at AGL’s Docklands office, we had Experience/ Visual Designers and Front End Developers working together with AGL stakeholders in short sprints. This meant we could design, build and customer test components very quickly, delivering the critical time savings required by the project as well as cost savings on AGL customer and QA testing.
The AGL Digital Live Style Guide is the essence of the AGL rebrand built into a complete suite of live components. Each component is required to build interfaces for Sitecore and WordPress websites, mobile apps and online and offline digital advertising. The nature of the globally available live components, such as navigation bars, promo tiles, menus and buttons, made light work of seemingly significant changes to the brand right up to launch, including changing the AGL blue, changing the typefaces and changing the Call To Action rules. Each of these could have compromised the ability for agencies and other stakeholder groups to deliver by the ambitious deadline.
The live environment also allows stakeholders to author and test components and content before deployment, allowing for ongoing timesavings.
Some testable components include:
- Live browser resizing to test content across all breakpoints.
- Live editing of component text and variables, like images, or colours.
- Multiple teams to pull from the same source with code views for HTML, Angular, Net.
Finally, The Living Style Guide is a truly open platform, allowing many agencies and AGL teams to push up into it.
Due to the success of Phase 1, Phase 2 is currently underway. Plans include extending the Living Style Guide to Above The Line elements and animation styles, and making the style guide dynamic—so when the globally available components are updated, the changes automatically flow out to all websites and other digital assets that feature the component.