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 was an opportunity to solve existing frictions we knew were present in the Clubcard app:

• Customers have been observed attempting to scan their Clubcard app at the till unsuccessfully multiple times

in-store colleagues have reported having to assist customers in scanning by increasing the smartphone brightness

• Data tells us 9.2% of customers are interacting with the secondary ‘increased brightness’ screen to scan the QR code

We identified that one of the main issues with scannability was screen brightness (other issues being till hardware). Most smartphone users do not keep their screens at 100% brightness and this can cause problems when the till tries to read the code.

Another friction point I wanted to tackle was the lack of customers scanning their digital Clubcard vs their physical one (33% of Clubcard app customers do not scan their digital card).

With two developers and the Clubcard app product manager we went into store and tested the app at the till to gain understanding of the scannability issue and see if we could resolve it without having to force a certain screen brightness on the customer.

We tested and tweaked 16 iterations of the QR code with variables (changing QR code size, border width and QR code error correction) it was clear that brightness was the culprit as scanning was immediately improved as soon as we increased it to 100%.

Now that we had understood how to solve the scanning issue, the UI of the card was explored both in static and animated form. I wanted the card to feel alive, to feel tactile and plastic like the physical one.

Through prototyping and animation I explored how the card could come to life in the app, bridging the physical and digital world. I played with the idea of the card spinning to reveal the QR code and using the motion also as a way to onboard customers on how to use it at the till. 

After exploring and stress testing different versions of an animated card I had to revert to designing a static one. This was due to minimum QR code size, accessibility features and content needed within the card.