Avios eStore
Avios

CMS Module Designs

I worked closely with the Content Squad to create a variety of modules for use on our new CMS. The goal was to create consistency across pages, optimise usability and simplify creating content with the use of scalable modules.

Six modules with content guidelines

Taking our complex product offering into consideration - each module was designed with flexibility in mind to accommodate all possible content scenarios (within reason).

To ensure they behaved just as intended, I created a content guidelines document for easy reference of character limits, asset sizes/formats, etc - for use by the Content Squad or external contributors.

View the content guidelines
Module guidelines
Carousel module

Carousel

The carousel module has been designed to showcase a number of Avios product offerings within a controlled space - avoiding excessive page height and vertical scrolling, particularly on mobile devices.

Usage ranges from redemption examples, partner offers, product comparison and more.

View on InVision

Partner header

The partner header module displays key partner information such as logo, name, lead earn rate and primary CTA.

After a few rounds of user feedback and AB testing we had a winning variant, which achieved an 8% uplift in users clicking out to direct partner channels.

View on InVision
Partner header module
Featured card module

Featured card

The featured card is a flexible and scalable module that can be composed using a selection of pre-built elements, including cover image, partner logo, offer label, heading, body copy and CTAs.

The CMS also allows the content creator to specify horizontal alignment and vertical position of the cover image across breakpoints.

View on InVision

Steps

Avios and its partners typically have between 1-3 methods in which you can collect or spend Avios with them. This module clearly outlines the method(s), steps and CTA to explore the proposition that best suits the user.

View on InVision
Steps module
CTA bar module

CTA bar

The CTA bar has a 'sticky' fixed position at the bottom of the screen - giving prominence to the primary call to action on any page.

View on InVision

Accordion

The accordion is the silent hero that takes care of all the nitty gritty content such as terms & conditions, which can easily add unwanted height and disrupt the flow of a page.

URL friendly IDs can be assigned to an accordion item to link to from the current or external page, as well as the option to trigger it open (great for instant access to Ts&Cs from an email).

View on InVision
Accordion module