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