Year

2024

Product

Virgin Red loyalty web and app

Designing tiles system for cross platforms product

Introducing new basic structure of tiles

The goal is to: • Show the information that are important to the users - so they can discover the ways to earn points and redeem rewards • Solve the problems of the existing tiles • Ensure flexibility and scalability for existing and future scenarios

Problems on the original tiles

Lack of scalability, legibility and consistency


Challenges

Adhere to rules and restrictions

We are partnering with more 3rd parties and there are rules to adhere to

Cater for growth of inventories and products

The solution needs to cater for the future iterations of the tiles design
E.g. Including tagging/signposting and easily scaling the tiles to future scenarios

Adapt for different use cases

Apart from main types of tiles allowing users to earn points and redeem rewards. There are other tiles including brand tiles, voucher tiles, events tiles, search tiles and favourite tiles

1. The image need to be clear and avoiding any obscurity

e.g There should be no/as little as possible for the obscure of the image. As our sources of inventories grow, there were requirement on no alterations of the images from 3rd party



2. Scalable with the amount of information

Flexibility with different levels of details



3. Cater for extended types of tiles

Extended types of tiles


A system of tiles for scalability


Tiles scalability

Aligning copy convention

Variations word patterns and languages for testing


Overall approach


Design System


Integrated into design system


Responsive tiles and reusable components for both web and app


Animation details for favouriting a tile

Accessibility

With 2x font size, the card can gracefully scale



Results

• Readability of tiles increases

• Better comprehension of new copy convention of the tiles

• Better automation of tiles

Accessibility

With 2x font size, the card can gracefully scale



Results

• Readability of tiles increases

• Better comprehension of new copy convention of the tiles

• Better automation of tiles

Accessibility

With 2x font size, the card can gracefully scale



Results

• Readability of tiles increases

• Better comprehension of new copy convention of the tiles

• Better automation of tiles