Case study

AA Smartfuel
Website design and build

A brand new website for New Zealand's largest loyalty program, built on Storyblok's API-driven Headless CMS.


AA Smartfuel


Financial Services

Type of work

  • Websites

What we did

  • Strategy
  • Information architecture
  • Design
  • Technology and development
  • Accessibility
  • Testing and assurance
  • User insight


  • Storyblok Headless CMS
Screenshots of the AA Smartfuel website homepage on desktop and mobile.

The challenge
A new CMS

AA Smartfuel is New Zealand’s premier fuel discount loyalty programme - helping close to 1 million Kiwis save at the pump each month by allowing them to accumulate cents per litre (CPL) fuel discounts every time they make a purchase and scan their loyalty card at over 1200 retail partners around the country.

AA Smartfuel's challenge was to ensure it remained agile and built upon tools that empowered its internal teams. For example, it was built on a modern CMS that its non-digital natives could easily drive and would showcase their brand with a modern design system to showcase its proposition and brand better.

Screenshot of the new AA Smartfuel web-based value calculator.

The solution

Storyblok was the obvious solution. Headless Architecture allowed Catch Design to integrate with AA Smartfuel's legacy back end with lightning speed. The Visual Editor is the content team's favourite feature. The Composable Content Blocks and Digital Asset Manager offer flexibility and efficiency AA Smartfuel hadn’t seen before—a world apart from the CMS they were used to.

We made Smarty Pants—AA Smartfuel’s brand ambassador—the central focus of the design to create better integration and cohesiveness between their marketing activity and digital footprint. 

Smarty Pants helped us bring clarity and simplicity to the proposition, guiding the user as they navigated the website to learn how the programme works. 

Analytics clearly showed that the main audience for the website was members—existing and potential new ones. So we created a site architecture and flow that focused squarely on showing them how to get the most value out of the programme.

This ranged from hints and tips on gaming the system to an intuitive value calculator and different ways to earn and redeem discounts. 

We used illustrations and iconography to communicate the proposition at a glance. We used animation (delicately and sparingly) to explain how to earn. We minimised copy and maximised clear space to convey programme simplicity. And we made the design bright, colourful and engaging to encourage action (sign up or sign in).

It’s a massive step forward for AA Smartfuel’s digital experience and brings the fun and positivity of the brand and proposition to life for everyone who engages with it.