A high % of Clubcard Plus subscribers don’t scan their digital Clubcard in the Clubcard app, therefore, missing out on points and 10% off selected brands.
6 months prior to this project I had designed and tested Clubcard Plus solutions in the Clubcard app to resolve the above problem. This redesign tested very well however it was deprioritised immediately after due to changing priorities.
The integration of Clubcard Plus in the shop app was an opportunity to delve into previous research and adapt the design solution that had proven successful in testing.
Role
Senior Product Designer [2021]
Original design in the Clubcard app
Integrate Clubcard Plus in a recognizable way to facilitate existing Clubcard Plus customers to migrate to the shop app.
Solve known Clubcard Plus scanning issue
Be mindful of the of change on existing users
With 33% of Clubcard Plus customers not scanning their digital Clubcard we noticed an increase in calls to the service centre and visits to the customers service desk in store.
"Customer’s don’t realise they need to scan their digital Clubcard followed by their 10% off in-store discount to redeem all benefits and collect points."
Testing 2 concepts
With the propositions team we brainstormed possible solutions to this problem. Our ideal solution would have been to have a single QR code to redeem the discount and collect points, however due to old technology this was not possible. I moved forward by exploring different design concepts which were shared with customers in-store while piggy backing on another research project. I wanted to sense check these concepts before further testing would take place.
Based on the positive in store customer feedback I proceeded with testing the initial concept. With a researcher, we tested the below 2 concepts in the app via remote moderated testing (due to Covid-19) and unmoderated (usertesting.com).
Concept 1
Placing discounts in the Scan Clubcard journey to subconsciously drive them to scan first their Clubcard and then their discount.
Concept 2
A guided 2-stop journey for redeeming Clubcard Plus discounts: step 1 the scan Clubcard qr code, step 2 scan 10% off qr code.
Customers preferred concept 1 as the linearity of the actions required made more sense to them.
In concept 1 they were not distracted by the discounts on the app home screen and as a first action tapped on the blue Clubcard.
The blue background on the QR code brought focus to the code and clearly separated it from the Clubcard Plus discount section
Concept 2 confused customers as they were unsure why they were scanning so many different QR codes and struggled to differentiate between them.
Some areas did need more thinking: 10% off in-store discounts and the branding of Clubcard Plus.
The discounts as a concept fitted in with vouchers and coupons and therefore needed to take on the same design pattern (but with a differentiator). The result was a full width discount card with a blue status bar labelled ‘Clubcard Plus discount’ and large bold 10% off text.
The placement of the Clubcard Plus logo proved to be tricky. Ideas around branding the Clubcard with the logo were immediately scrapped as they went against the proposition.
The blue digital Clubcard is a very dominant feature in the section, and I wanted to enhance it with Clubcard Plus branding, not to compete with it.
The result was the logo placed below the blue card as an add-on ‘brand’ with information on where to find the discount codes.
UI Explorations
The Clubcard Plus experience lives inside the Clubcard section of the app. Customers who are not subscribed are made aware of it by a promotional banner on the section that links them through to the Clubcard Plus website where they can trigger the subscribe journey.
Post subscription they are presented with an onboarding journey that communicates where to find the discounts and how to benefit from them. At this point their shop app interface also changes to include the new features
Clubcard Plus on the home screen
The Clubcard Plus logo sits just under the Clubcard and is paired with information to aid the customer in redeeming their discounts.
Clubcard Plus discounts on the QR screen
Discounts are displayed as stacked cards with “Use by” and “Used on” date. They carry the same UI principles as Vouchers and Coupons.
Other Clubcard Plus featires in the Shop app
If you have any questions about the project get in touch 😀 vera@veramarin.com