Integrating the Clubcard app into the Tesco Shop app
Embedded Files
The project aimed to integrate all Clubcard features into the Tesco Shop app, ultimately phasing out the standalone Clubcard app from app stores.
The primary objectives were to streamline the customer experience, enhance user engagement with the Tesco Shop app, and ultimately increase customer satisfaction.
Role
Senior Product Designer [2021-2022]
I joined the project a few months in to bring a fresh perspective and Clubcard knowledge to the table. My role as Product designer was to explore, design and deliver the UX and UI for all Clubcard features inside the shop app. The core team consisted of a design lead, a product designer (myself), a product manager, and developers. We collaborated with other designers and stakeholders from other areas of the app too.
Clubcard features in this case study: Digital Clubcard, Vouchers & Coupons, Points
Some key screens from the project (final designs)
Clubcard section
Scannable Clubcard QR code
Vouchers & coupons
What is Clubcard?
What is Clubcard?
Clubcard is Tesco’s Loyalty Scheme. Launched in 1995 it was the pioneer of Loyalty schemes in the Grocery retail industry.
There are 20+ million Clubcard holders today in UK and many more across the Ireland and Central European markets.
When the project was kicked off 5.9 million customers were using the stand-alone Clubcard app (of which 1.1 m also used the Tesco Shop app).
The Opportunities & Objectives
The Opportunities & Objectives
Clubcard has over 20 million users in the UK today. Over time the need to create a seamless omnichannel experience for shoppers has become more obvious, with customers expecting to use Clubcard across their online and in-store shopping journey simply and conveniently.
Until now the digital journeys have been full of friction points, making it difficult for customers to engage with the scheme online and in-store, and from a business point of view difficult to maintain.
Opportunities for the business
Increase loyalty | Grow customer base | Increase incremental spend | 1 app instead of 2
Opportunities for design
Reduce known friction points | Delight customers | Simplify journeys | Improve visual language
OKR's
Grow Clubcard awareness and engagement within shop app customer base
Increase % of app customers interacting with Clubcard features
Increase % of app customers using their Clubcard vouchers via the app (online or in-store)
The UX challenge
The UX challenge
Design and integrate all the necessary Clubcard features into the Tesco Shop app for a seamless experience that supports online and in-store customer missions.
Features to be designed
Features to be designed
Digital Clubcard
Clubcard vouchers for online and in-store use
Clubcard coupons for online and in-store use
Clubcard points
Subscribe and redeem Clubcard Plus benefits
Manage Clubcard in the app
A home for Clubcard in the Shop App A/B test
A home for Clubcard in the Shop App A/B test
We understood early on that a home for Clubcard in the shop app was necessary. This was due to the number of features and Clubcard driven journeys that we wanted to integrate in an app.
We understood early on that a home for Clubcard in the shop app was necessary. This was due to the number of features and Clubcard driven journeys that we wanted to integrate in an app.
The Orders tab in the main navigation bar was replaced with Clubcard, and Orders was placed in the Account section of the app.
Results of the A/B test:
Increase in Loyalty visits +120%
Shop app in-store scans 2.1%
Decrease in Order page interaction -20 %
Decrease in sales per qualified customer -1.6 %
Learning:
Removing Order entry point and replacing it with Clubcard was positive for this project's goals however negatively impacted the Order page and sales.
Solution:
We moved the Order entry point to the homescreen and interactions and sales went back to normal.
The Digital Clubcard
The Digital Clubcard
Giving customers the ability to scan their Clubcard at the till from the Shop app was one of the most important customer needs. This project was an opportunity to rethink and redesign the scanning journey.
Giving customers the ability to scan their Clubcard at the till from the Shop app was one of the most important customer needs. This project was an opportunity to rethink and redesign the scanning journey.
Objectives
Improve scannability of QR code
Increase Clubcard scans in-store
Create a relationship between plastic and digital Clubcard
Challenges
Customers are seen struggling to scan their card in the Clubcard app
Data tells us 9.2% of customers are interacting with the 'it did not scan' button in the app
I went to the store with the Product Manager and Engineer to understand firsthand the scannability issues and to test 16 iterations of the QR code with variables (changing QR code size, border width and QR code error correction).
It was evident that brightness was key to improving the QR code's scannability.
The solution
The solution
"Isolate the QR code from the main Clubcard section and trigger a screen brightness increase of 100% only on the QR code screen."
"Isolate the QR code from the main Clubcard section and trigger a screen brightness increase of 100% only on the QR code screen."
The UI solution was a digital card that mimicked the physical one and would remind customers of how they scan their physical card at the till. Upon tapping the card the QR code would be revealed with 100% screen brightness, thus resolving the scanning at the till issue.
Designs were tested in-store with customers and usability improvements were made to the feature such as increasing the affordance of the digital card and increasing the legibility of text considering the in-store context.
New Digital Clubcard
Clubcard Vouchers and Coupons
Clubcard Vouchers and Coupons
Vouchers and coupons are an essential part of the scheme. Until now they had been optimized for the in-store experience while the online use of vouchers/coupons involved manually inputting codes.
Vouchers and coupons are an essential part of the scheme. Until now they had been optimized for the in-store experience while the online use of vouchers/coupons involved manually inputting codes.
Objectives
Objectives
Make it easy for customers to understand how many vouchers/coupons they have
Make it easy for customers to apply them to their preferred shopping experience
Give quick access to vouchers and coupons
Provide clear information about their value, utility, and status
Design an accessible and reusable component
App store comment prior to the redesign
“Argh! One HOUR to input an order, unable to find my club card points at ALL through the app, have to cancel everything, SCREENSHOT all the vouchers, and MANUALLY input them at checkout.
App store comment prior to the redesign
“Argh! One HOUR to input an order, unable to find my club card points at ALL through the app, have to cancel everything, SCREENSHOT all the vouchers, and MANUALLY input them at checkout.
Designing the UI
Designing the UI
Vouchers & Coupons specific requirements
Vouchers & Coupons specific requirements
Differentiate between vouchers and coupon components
Mandatory elements of components: value, expiry, status
Ability to add/remove them from online basket
Educate customers on how to redeem them
Quick access to vouchers for under pressure moments (like when one is at the till and about to pay)
Ideas I explored
Ideas I explored
Use of colour for status
Highlighting value through typography and colour
Use of icons to identify avouchers and coupons
Iconography to signify status
Use of roundel buttons to add + or remove - voucher
Educational areas
Carousel for quick display
Using shapes as a differentiator of vouchers and coupons
Exploring ideas
The design had to be flexible to allow components to scale with different devices and sizes, and accommodate any accessibility features a customer may apply, as well as consider future improvements of the features such as motion and image inclusion.
The exploration involved a feedback loop with other designers, product managers and development teams. This was to ensure the progress was visible to all and allowed me to capture any feedback early on.
The Solution
The Solution
Vouchers and coupons are carousel for quick access from Clubcard section
Vouchers and coupons have a page of their own where they are listed to aid comprehension.
They are also colour coded based on expiry and use criteria.
They are also colour coded based on expiry and use criteria.
When a voucher or coupon is applied to the online basket an animated success message appears to give feedback to the customers action.
The final design offers a new and clearer way to interact with vouchers and coupons. Starting in the main Clubcard section: vouchers and coupons each have a card with small carouseled vouchers/coupons for quick access, and a top tip area explaining how to make the best of the scheme.
The individual vouchers and coupons are differentiated by their card shape but follow the same interaction pattern- upon tapping they offer the options to scan at the till with a QR code or apply to basket/order via a simple tap.
These new designs also introduce a differentiated and improved visual language (rounded corners, drop shadows to create depth, use of colour to communicate status) which we aim to bring into bring into the Tesco digital design system and update across the apps.
Vouchers are coupons each have a distinct card shape
and information criteria.
and information criteria.
Clubcard Points
Clubcard Points
Research has shown that the current points feature in the Clubcard app is not clear to customers and few customers are converting their points to vouchers when they are available to them.
Objectives
Objectives
Design a points feature that clearly communicates points total.
Helps customers understand the relationship between points collection and vouchers worth.
Drive customers to convert points to vouchers when they are available to them.
Delight customers and make them want to engage with the loyalty section more often.
Ideation
Ideation
To kick off the ideation phase I mapped out all the different states of the points feature existing in the Clubcard app. This was key in making sure all states were considered and identifying areas of improvement that could be shared and discussed with stakeholders.
To kick off the ideation phase I mapped out all the different states of the points feature existing in the Clubcard app. This was key in making sure all states were considered and identifying areas of improvement that could be shared and discussed with stakeholders.
UI design ideas that were explored
During this phase I worked closely with developers to understand the back-end logic and API calls. Not all design solution I put forward could be executed due to technological constraints. This meant working harder from an interface POV to make sure we could deliver an optimal and clear experience for the customer.
Stakeholders were updated on ideas and explorations on a bi-weekly basis. This important feedback loop allowed me to work at pace and make sure I was capturing technical, propositional and brand feedback from across the business.
Concepts that were explored
Concepts that were explored
Notion of “unlocking” vouchers when X points have been collected
Gestures to perform conversion of points to vouchers
Typography to differentiate points summary vs how many vouchers a customer could get for those points
Celebration moments when a customer collects points
Separating interactive vs static point areas
A points collection feed
The ideation resulted in 2 final design concepts: a 'safe' solution for the MVP
and a solution to be put through research and testing
The ideation resulted in 2 final design concepts: a 'safe' solution for the MVP
and a solution to be put through research and testing
The solution for MVP
The solution for MVP
The points feature is placed just below the Clubcard as it is the second most important feature and uses the card pattern designed for vouchers and coupons (icon, a link to a points listing page and a tooltip area).
Points total and worth in vouchers sit side by side in a grey panel that changes as the customer collects enough points to turn them into vouchers.
I wanted to aid understanding of points and vouchers availability by bringing the feature to life through changing states:
An animated points roll up every time the app is accessed.
An inactive/ active voucher worth total
Contextual ‘turn points to vouchers’ CTA
Tooltip text area
Different Points states, including the animated Points roll-up
The 'Other' solution: The Swipe Concept
The 'Other' solution: The Swipe Concept
This design was deemed too risky for live release but it sparked stakeholder interest and so we decided to test it.
This concept makes use of the swipe gesture to trigger ‘turn points to vouchers’ journey. It brings together points and voucher value into a single actionable button that reinforces the relationship of the two through proximity, micro animation, and gestures.
Previous research I was involved in revealed swiping is more pleasing for customers than tapping. Swiping is fast, intuitive, and often associated with the revelation of a reward of some sort.
Points roll-up when accessing the section in an app session.
Swipable button to trigger point to vouchers.
Button background text confirms the action.
How the swipe concept works
How the swipe concept works
Once there are enough points to turn into a voucher, the area becomes a swippable button. The button is animated and pulses at intervals catching the user’s attention. When swiped it reveals a message confirming the action that is about to happen and triggers the points to voucher journey.
Research
Research
8x 30 min moderated usability interviews with grocery and Clubcard app users, using an Invision studio animated prototype.
Users were asked to complete several tasks, includings scanning the Clubcard at till and converting points to vouchers.
Findings
Findings
The pulsing swipe button clearly indicated to customers that those points could be converted into a voucher.
Majority liked the animation of points rolling up: it gave them reassurance their points were updating in real time.
Majority expected the swipe to immediately convert points to vouchers.
Desirability was high: there was strong appeal for the animation.
If you have any questions about the project get in touch 😀 vera@veramarin.com
Page updated
Google Sites
Report abuse