2021

VRed - header.png

Creating scalable modules for brand communication

Virgin loyalty programme homepage

Virgin Red is a loyalty programme for Virgin. When I joined, the product team has only been set up for a year. The long-term vision is to gather members from all brands within the Virgin family, to provide a more linear and comprehensive experience for them.

Once I joined the team, I was asked to redesign both the logged out and logged in homepage, for different devices from desktop to tablet and mobile, in two months.

Under such time and support constraints, I tried to reinforce a more collaborative culture by quickly diving into teams outside the product team. By doing so, I was able to propose solutions that improve users’ browsing experience. I also considered the challenges from the content team, to reduce friction when executing my design.
 

Most importantly, I reacted quickly to the user research on the new design. I presented and demonstrated how research could help me make informed design decisions, tackle customers’ needs, identify opportunities for business, and to provide missing links of the thinking process of different teams (branding, content, marketing team) 

I was asked to follow the wireframe under the time given. The request was to get the module built as soon as possible so we could launch a website. The objective is just to show more content. 

So if we are showing more content on the page…How could I help customers to look for information they need?

I started with optimising the inventory cards design. The card design is crucial as they are the key elements to let customers understand quickly the benefit of joining this loyalty programme by learning how to earn points and what rewards we are offering.

VRed - inventory card compare.png

Old card

New card

If we are surfacing more cards on the screen, from showing three cards a row to four cards a row, We need to tighten the card width. I clarify the information hierarchy to help customers scan the information:

 

  • More dominant logo and title to draw the focus
    Customers might want to see right away what brands or partners this loyalty programme offers. I made the logo and title more dominant, and be the first focus point on the card.
     

  • Shorten the description to allow more precise wordings
    People scan instead of reading a website, the contents aren't written from a digital experience perspective. The description has to be as precise as possible. If we can shorten the wordings, we can even introduce a bigger font size to enhance the readability in a small card. 
     

  • Subtle style change on image’s mask and logo shadow to facilitate the reading flow

    To introduce a better reading flow when people's eyes land on the card. I slightly adjusted the swoosh shape that masked the image to draw the focus point towards to logo. I also lowered the shadow spread to reduce visual noise in this tight space.

VRed - inventory card mask.png

Adjusting the swoosh shape to draw focus point towards to logo.

Introducing a colour system to distinguish between cards about earning points and cards about redeeming rewards.

This lets customers get relevant information more quickly by just indicating the colour. Potentially, we could even introduce more image style and colours if there are more types of cards in the future. For example, a card that contains more rewards as a collection from the same partner or category. 

VRed - inventory card colour system.png

Introducing colour to differentiate earn and rewards card

VRed - HP - intro.png
However, in reality, the flexibility on changing or shortening the content is much lower than I imagined.
  • Impossible to make changes within limited time  
    The amounts of inventories are enormous and the content team has limited spared resources to make these immediate changes for the launch within two months.

     

  • It involves external parties to make decisions
    Some of the inventory content was made and agreed upon with certain partners, especially those from the financial sector that involve legal terms. Changing content will involve more conversation. 

After understanding the restriction, I would still like to test how far I could push the design I want to promote, I tried to dive into the content team world to better understand their constraints and see how I can be flexible on my design. 

Using the existing content with extreme length to know the boundary of pushing my design which supposedly has a clearer information hierarchy.
VRed - text with real content 1.png
VRed - text with real content 2.png

I adjusted the spacing and font size so it could fit even with the longest title and description. Then compare to those with shortest content or content mixed with short and long title versus description.

By working on this exercise, I was able to show myself and also other teams the inconsistency if we are to put more cards on the homepage, with the existing content. 

It demonstrates the consequences by compromising to not change the content length. It is not visually appealing but it won't break what the content team will be uploading for the launch of the new homepage.​

I also need to consider how it may look in the future if we are to introduce continuous carousel rows on the logged in homepage (imagine like deliveroo or Netflix). I came up with the following rules on the card carousel:
 
  • Carousel height will be adjusted based on the card content. The longer the content is, the higher the card will be. This approach is taken due to the limited knowledge on how often we will have a row with lots of content. If we use the fixed height approach, we may end up having three continuous rows with short content with a lot of empty space on the card.
     

  • The minimum card height is set. If we are to put more carousel rows on the page, the responsive carousel height may result in a weird browsing experience with too many different carousel heights.

VRed - responsive carousel height.png

Carousel height changes according to card content

VRed - fixed carousel height.png

Carousel height fixed, which leaves enormous space if the card content is short.

Testing card design on mobile screen

Testing the site with prototype before the developers build the homepage, so we can react quickly and suggest what the actions are for the next iteration.

Prototype with the new card design and adapted UI on suggested wireframe

“The rewards seem very ‘Virgin’ - very ‘playful’.”

“There are so many familiar brands I can earn points and rewards”

There is some positive feedback from the customers. They think the rewards fit their interpretation of what Virgin is as a brand. They are particularly happy with the brands we partner with. They are happy if they don't need to change their daily shopping habits to earn rewards offered by Virgin!

But we are also seeing a lot of frustration from the customer. Our senior researcher interviewed our customers to learn what information they are looking for and understand what triggers them to register as a member.

The objectives of the homepage are to let customers know quickly what this loyalty programme is and know how the benefits are relevant to them instantly.

 

After studying the research insight provided by the researcher, I did some competitive analysis and quickly mock up a few suggestions so I can present them to the head of design and the researcher. The aim is to get an agreement with the potential improvement and decide what the quick solutions could be.

VRed - users problem 1A.png
“It took me a while to understand what this programme is and why it interested me”

The brand logos attracted customers, hiding on the fourth card on the carousel.

VRed - users problem 1B.png

Suggest to remove the carousel, with brand USP listed as bulletin points

Long term suggestions
 

  • Remove the brand proposition carousel so the brand USP can be shown more upfront
    We weren't expecting the brand team will add six cards on the carousel. The customers need to do a lot of clicks to finish reading all the content. To give them a quicker overview, we might want to introduce a three-column card view, with content listed as bulletin points, so people can scan everything at a glance.

Suggestions for the next iteration:
 

  • Reduce carousel cards and list content in point form
    On the original proposition card carousel, there is a lot of space provided for marketing copy. To reduce the number of carousel cards, it will be worth considering fitting more content with fewer cards. To enhance the readability, we could simply put them into bulletin points.

“I need to look and explore to see the familiar brands, I want to see more to learn how easy it is to earn points!”
VRed - users problem 2A.png

The logos on the proposition carousel (left) is what attract customers and are not highlighted on the earn section (right) They even start to leave the homepage to look for such information elsewhere

VRed - users problem 2B.png

Suggestion on the new hero image and providing category quick links for customers to have an overview of what types of brands we are partnering with

Long term suggestion
 

  • Make good use of the hero image
    Give customers more context relevant to their benefits. If the collage of logos group draws their attention, why not surface it more upfront instead of hiding it in the proposition carousel?

     

  • Provide overview of categories and quick links
    Customers started leaving the homepage to look for brands they could earn points from. They each have their preference, but all of them are looking for brands they like. So what if we provide a quick link to different categories for the users to quickly link to the types of brands they like?

Suggestions for the next iteration
 

  • Choose a more relevant hero image
    It will take time to understand what is the most efficient and beneficial way to categorise our partners' brands. But changing the hero image with more relevant context will be a big win.
     

  • Explore more presentation on how to earn points
    The categories shown above are just a concept. We still need to study more research and data, to learn the customers' preferences on shopping on this loyalty programme.

“Some rewards need a lot of points, that seems scary to me.”
VRed - users problem 3A.png
VRed - users problem 3B.png

Suggestion on providing a category quick link. Customers can get a quick and better concept of what kind of brands we partner with - like we support local startups and charity!

The suggestions for both the long term and the next iteration are similar to the earn section stated above, which is to improve the hero image with relevant context and to have categorised quick links.

 

Reward points is not important at this point
The points customers need to redeem rewards vary and the range is wide. More importantly, customers don't need to know the exact points for redeeming rewards at this point. So why not provide them a bigger picture about the types of brands we partner with and create a better emotional connection between us and the customers?

Allow customers to understand the brand proposition

Having the category highlighted also gives customers a good idea of what our brand stands for. For example, Virgin Red always wants to promote themselves as an active supporter of protecting the earth and also to local start-ups. It would be a good way to place marketing communication by highlighting the category, instead of pushing individual rewards at this stage.

A reward worth 215,000 points is placed next to one worth only 200 points. Customers started wondering how long will it takes to get to 215,000 points!

In the world where unicorn exists...

The product team only started a year when I joined. Both our team and other stakeholders are still figuring out what product design means to the business.

Launching a responsive logged out and logged in homepage in such a short time only let us ship the components soon, without much thought on the content design for customers' needs. ​

There were a few barriers to break since Virgin Red has a silo-working culture for product designers. I am grateful that people are willing to stop and listen. Being more transparent about my difficulties and design thinking process helps but there is still so much for everyone to learn blending in a product team to the business.

The user journey below summarises my learning after the homepage launched for six months. Out of my expectation, there is much more perspective we need to look into, to draw the pictures for us on how users behave at each point, and to ensure the content is relevant to customers in each scenario. 

VRed - users journey.png

As the product team grow stronger with more capacity (more data scientist, more research resources...etc)
It will be ideal with more information and ideas being shared more frequently so the design teams could make a more informed decision, instead of just shipping components for developers.
 

There is always so much you want to achieve but with limited resources. That also means there are huge opportunities and get innovation. I am looking forward to seeing how this grows with more data we learn!

ITV - header.png

Construct a solid base for progressive business

ITV internal tools design system
BBFC - header.png

Improve efficiency & effectiveness for films rating

Films classification tool for BBFC