Clubcard Vouchers and Coupons
Clubcard Vouchers and Coupons
Embedded Files
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 or selecting them from an unidentifiable list.
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 or selecting them from an unidentifiable list.
Goals
Goals
Offer customers a seamless in-store and online vouchers/coupons experience through the shop app.
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.
Allow easy access to individual vouchers/coupons from the main Clubcard section
Provide clear information about their value, utility and status
Excite, Educate, Promote
Design an accessible component
Design a recognisable pattern for all money off features
What we know from past research
What we know from past research
Customers don’t understands/ notice current vouchers on the checkout screen
Customers are not clear on how they work
Customer must have paper or Clubcard app vouchers to compare voucher/coupon codes in the shop app
Customers aren’t notified when vouchers or coupons are expiring
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.
“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.
Vouchers and coupons in existing Clubcard app
Only view of vouchers and coupons in the Shop app pre-redesign (at online checkout screen)
Mapping the journey for Vouchers and Coupons
Mapping the journey for Vouchers and Coupons
When I started this part of the project an MVP of improved online vouchers/coupons was being run. The results showed there was clear interest for the improved feature. Use of vouchers/coupons online increased by 3.5% for basket builders and 6% for shoppers with an existing order. While interaction with loyalty was up 24% IOS and 84% android.
Considering these positive results, I proceeded to expanding the journey to include the in-store scanning of vouchers and coupons and set out the goals and feature requirements to guide the ideation phase that would follow.
Vouchers and coupons journey
Defining the component UI
Defining the component UI
Together with another product designer we explored a multitude of ideas across the different touchpoints and considered how the new design could expand to support Clubcard Plus discounts and reward partners in the future.
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.
Vouchers, Coupons Specific requirements
Vouchers, Coupons Specific requirements
Identify between vouchers and coupons
Educational information
Total available
Voucher / coupon value £
Expiry date
QR code
Actions: scan/ add to basket/ order
Status: Availability / expiring soon / applied to basket / applied to order
Gathering ideas to explore
Gathering ideas to explore
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 UI patterns for vouchers, coupons and any future discount or reward features.
The Final Design Solution
The Final Design Solution
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.
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.
Page updated
Google Sites
Report abuse