Film classification web application
Client
BBFC
Case study 1
Case study 2
UI design system
Client
ITV
Case study 3
Mobile app UI and brand visual
Client
Wonder City
2021
Create 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 Virgin brands, to provide a more linear and comprehensive experience for customers.
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 constraint, I tried to reinforce a more collaborative culture by quickly diving into teams inside and outside the product team. By doing so, I was able to propose feasible 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 to work on a 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)
New website - wireframe
Old website
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 with more content to be shown 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 what partners we have to earn points and to redeem rewards.
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:
-
Make logo and title proportionally bigger to draw 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 smaller 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.
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.
Introducing colour to differentiate earn and rewards card
However, in reality, the flexibility on changing or shortening the content is much lower than I imagined.
-
Challenge 1
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.
-
Challenge 2
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.
-
Challenge 3
Ways to fetch KPI are not in our control
Some of the KPI we get for the inventory cards are from third-party platforms. If we are to make any changes, we will need to understand their flexibility to change, so we need more investigation time.
After understanding the restrictions, I would still like to test how far I could push the design I want to promote, I asked to use their platform so as to have a better understand on 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.
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 carousel height 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 continuous rows with a lot of empty space on the card if their content is short.
-
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.
Recommended - Carousel height changes according to card content
Not recommended - Carousel height fixed, which leaves enormous space if the card content is short.
Prototype (using Figma) - testing card design on mobile screen
Testing the site with prototype while the developers building the homepage, so we can react quickly and suggest what the actions could be for the next iteration.
Prototype (using Adobe XD) - User testing with the new card design and homepage structure
“The rewards seem very ‘Virgin’ - very ‘playful’.”
“There are so many familiar brands I can earn points and rewards”
There are 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 as 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.
“Things interested me are so hidden”
[design] The brand logos attracted customers, hiding on the fourth card on the carousel.
[suggestion] Suggest to remove the carousel, with brand USP listed as bulletin points
For proposition carousel
Long term suggestions
-
Remove the brand proposition carousel so the brand USP can be shown more upfront
The brand team added 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.
Short term suggestion
-
Reduce carousel cards and list content in point form
On the original proposition card carousel, there is a lot of space provided for copy text. 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!”
[design] 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
[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
For ways to earn section
Long term suggestion
-
Make good use of the hero image
Give customers more context relevant to their benefits. If the logos collage 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?
Short term suggestion
-
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 start the conversation with researchers and data analysts, to learn the customers' preferences on shopping on this loyalty programme.
“Some rewards need a lot of points, that seems scary to me.”
[design] 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!
[Suggestion] 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!
For the rewards section
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, because of the following reasons:
-
Reward points is not important at this point
The points customers need to redeem rewards vary and the range is wide. Customers don't need to know that details.
-
Allow customers to understand the brand proposition
Providing them a bigger picture about the types of brands we partner with and creating a quick understanding of what our brand represents.
For example, Virgin Red always wants to promote themselves as an active supporter of protecting the earth and to local start-ups. It would be a good way to highlight the category, instead of pushing individual rewards at this stage.
The growing process & learning...
“Unless you are in an organization with ‘designer founders,’ where design is clearly fundamental to innovation, culture and growth, you will find you are always trying to establish the value that design can bring.”
Said by James Sommerville in an interview, which shared his experience when he joined The Coca-Cola Company to lead their global design team.
I can totally relate to that and I think it summarises my learning after joining Virgin Red. Although Virgin Red is a baby team that was set up for only a year when I joined, Virgin the mother brand is not. It has a lot of businesses that touch many different industries. As a loyalty programme that sits in the middle of it, with the ambition to quickly expand globally, the business goals and requirements are more complex than I expected.
As there are only two designers in the team, I was assigned to work on many other features since proposing these suggestions. Even so, I was able to work with many more teams. And by talking to more people, I understand better of how the homepage could evolve with the ambitious business vision.
The user journey below summarises my learning after the homepage launched for six months. It shows what potential scenarios are if we need to investigate the users' behaviour at different points across the user journey.
Just using one diagram, can tell how much more perspectives we need to consider for both logged in and out homepage. It may seem straightforward to designers, but how we help others see the same picture as us is also crucial.
Although the design outcome was not satisfied from a user experience perspective, I am also happy to see a healthier design culture is being established over time. It is an ongoing challenge to help visualise the abstract vision from the business, to create a better picture for the Product Manager and tech team to define vision and features. I am looking forward to see how I can contribute to such changes.
* * * * * *
