Clubcard Points

Customers collect points every time they shop and scan their Clubcard at Tesco. Aware of issues on how we display points in the Clubcard app our goal was to re-design how we display points inside the Shop app.

The challenge

Research has shown that the current points feature in the Clubcard app is not clear to all customers and few customers are converting their points to vouchers when they are available to them.

In the shop app we want give customers a ‘points’ feature that is clearly understood and will drive points to voucher conversion.

Feature goals

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.

The different states of the Points feature mapped out

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.

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

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

UI design ideas that were explored

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 MVP design solution

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

Swipe Concept for Research and Testing

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

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

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

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.

Page updated

Google Sites

Report abuse