In-store Nectar checkout

Nectar is the biggest loyalty scheme in the UK and many customers are collecting and spending points at Sainsbury’s and other retailers. Given its popularity, the business decided to support Nectar at Argos stores and online. The benefit would be to improve loyalty of customers and to understand their interests. We would use those insight to provide a better tailored experience with Argos.

• The ask: Define the Nectar spend and collect customers journeys on the Argos store self-service tills.

• My role: I was in charge of the UX and UI of the Argos store self-service tills.

• Teams I worked with: I worked with engineers, Nectar and Payment stakeholders.

• The impact: Nectar customers can collect and spend points in-store without the help of staff.

The problems

Customers couldn’t collect or spend Nectar points at the store self-service tills. The only way it could be done was to go to a staffed till, which made the shopping journey longer. Furthermore, many Argos customers weren’t even aware they could collect or spend Nectar points at Argos. The main problems to solve were:

• Improve awareness about how many points can be collected on each item or promotion in the top of funnel journey (journey before checkout).

• Introduce a way to spend the points customers have in their Nectar account in the checkout journey.

The KPIs

• Customers to be aware that Nectar is available at Argos.

• Make sure they understand how Nectar proposition and points collection works.

• Monitor how many people use the Nectar card on the self-service tills (monitor entries).

What I’ve done and why

Before diving into any UX research, I got in touch with the relevant Nectar stakeholders to learn more about the Nectar customers. The main information I found was:

• 7.87M customer have Nectar & Argos account (which may or may not be linked).

• The number of customers who have redeemed N. points for a purchase in-store at a staffed till is 1.6M.

• Consumers are most likely to redeem N. points on technology and homewares products.

• The N. team conducted some quantitative research (March 2019) which found that 45% of respondents were aware of redeeming N. points at Argos (increasing to 60% for high frequency Argos customers).

• The N. team conducted a quantitative research (May 2019) and they found that 70% of respondents felt that redeeming N. points at Argos (not in-store specifically) is appealing (85% for high frequency customers), with 48% stating they would be more likely to shop at Argos as a result (66% for high frequency). 

• Consumers respond well to collecting N. points at Argos, with just under half claiming the ability to collect Nectar points would make them more likely to consider shopping at Argos in the future.

Competitors research

My next step was to go to three competitor’s stores which have self-service checkout tills. I bought something at every store to see how they approached the checkout journeys when there is the desire to pay with a loyalty card. Collecting and spending points was approached slightly differently, some would consider the loyalty card as an actual payment method and list it among payment cards and gift cards while others would ask customers to scan the loyalty card before they would reach the payment methods.

Team workshop

It was now time to gather all the information I had and play them back to the Pay@browse team (the self-service tills team) and some representatives on the Nectar team (marketing and design). I facilitated the workshop and used a Lean Canvas to drive the conversation. Together, we talked about the business problem, business outcomes and known customers behaviours until we started discussing solutions. In the end, we were able to craft the main hypotheses and identify the riskiest assumptions to test:

• First hypothesis: We believe that improving awareness on Nectar points collection, by adding Nectar points comms on the right steps of the TOF journey, will increase conversion & Nectar account subscriptions.

• Second hypothesis: We believe that introducing a way to spend Nectar points, by adding Nectar among the other payment methods, will increase conversion & speed of self-serve checkout.

• Third hypothesis: We believe that introducing a way to spend Nectar points, by asking to swipe the Nectar card before checkout, will increase conversion & speed of self-serve checkout.

• First risky assumption: Before PDP page, customers wouldn't pay attention to any comms as they're focusing on finding the right item.

• Second risky assumption: Nectar is seen as a payment method.

• Third risky assumption: Adding an extra step to ask to swipe Nectar card will speed up the customer.

• Fourth risky assumption: Nectar number manual entry takes too long and customers won’t do it.

Bring the ideas to life

The competitors research and the team workshop helped me come up with a few ideas on how to show the Nectar promotions on the most relevant steps in the top of funnel journey, as well as, how to introduce the points spending at checkout.

For the first hypothesis (awareness messages before checkout), I created a couple of variants of how we could show a promotional points message. For the other two hypotheses (how to spend N. points at checkout), I came up with two different ideas about when in the journey customers would be asked to swipe their Nectar card.

After coming up with these ideas, I mocked up two end-to-end prototypes that I used to show stakeholders and test with customers. Each prototype showcases one idea for how we show the Nectar promotion before checkout and one idea for how we could let customers spend their points at checkout:

Testing on UserZoom

After a discussion with the research team, we agreed that the quickest first step would have been to do a series of UserZoom time out tests, which consist in showing some selected designs to customers for a few seconds and then ask some questions about what they remember.

The aim of the first UserZoom time-out study was to see if customers noticed and understood the Nectar promotion (we recruited a mix of Nectar and non-Nectar customers). Variant 2 performed slightly better that variant 1 for Nectar customers. Even non-Nectar customers noticed it more. Nonetheless, non-Nectar customers tend to ignore the promotion regardless on how prominent it could be.

The second UserZoom time-out study aimed to tests if customers understood the task the design was prompting them to perform (we recruited a mix of Nectar and non-Nectar customers). Variant 1 won although not all participants understood that they could skip to payment without swiping a Nectar card, it should be clearer. On a more positive note, the test confirmed that most people associate “swiping the Nectar card” to “collect Nectar points”.

Guerilla & Usability tests

After analysing the results of the UserZoom tests, I fixed those design issues that came out from the UserZoom studies and then created an end-to-end prototype by merging the winning variants (Bolder banner before checkout + ask to swipe N. card before seeing payment methods). It was then time to see how customers would react to it. In order to do that, I ran a Guerrilla test in an Argos store, as well as, a Usability test in our Research Lab. I wanted to:

• Test the Nectar banners one more time

• See how Nectar customers would collect & spend points

• See if non-Nectar customers would skip the Nectar step

• Ask if they would also need to have an option to enter the Nectar number manually

During the Guerilla test, 7 customers were recruited in the store while 4 participants came to the office for the Lab test. They were a mixture of Nectar and non-Nectar customers. I used an iPad to load the prototype and record what they were saying and doing and I also took notes.

The test results

• The banners showing the Nectar promotion were missed by most customers from both segments and no one interacted with it to find out more. When asked why, all participants said that they weren’t paying attention to the promotion because they were focused browsing for the product.

• Furthermore, some said that there was a discrepancy between the Trolley page and the next step where people are asked to swipe their Nectar card. Some of the non-Nectar customers were expecting to see the payment options after the Trolley page because the copy on the CTA said “Pay now”.

• The “Swipe your card” page has proved to be clearly understood by customers that have a Nectar card. However, some customers mentioned that they might need to enter the code manually after checking their account on the Nectar app in case they haven’t the card with them (most participant would keep the Nectar card in their wallet and bring it with them everywhere).

• Even non-Nectar customers understand that they have to skip to payment if they need to buy. From the tests, it didn’t prove to be a point of friction.

• Furthermore, the column where we show total/subtotal/discounts applied proved to be very important when a discount was applied. as will help customers have a constant reminder of how much the have to pay.

• The Nectar spend component on Payment page was understood perfectly. All the participants that used it were able to select the amount they wanted to spend.

• After an amount was selected, the addition of the discounted amount from the total was very well received.

The final journey

After analysing the results of the Guerilla & usability tests, these are the final designs I came up with:

Add a Nectar banner on Home page (requirement from the Nectar team). 

Introduce Nectar messages from the Product pages. Here is where we give in-depth info about our products and where customers decide if they want that item. Nectar points will be an incentive to buy (it came out of the testing).

The copy on the Trolley button will be more generic. By changing it from “Pay now” to “Go to checkout”, we will smoothen the discrepancy between Trolley and Payment page and set more generic expectations. 

Add a step between the Trolley and the Payment page. This is to prompt customers who have a Nectar card to swipe it and collect points. By doing this, we’ll know their balance and how much they could spend. I’ve also added a button that would allow to add the Nectar number manually.

A Nectar option will be added to the payment methods. Whenever customers select an amount of points to spend, the discount applied will show in the right column and the total will change. We’ll also add a message that clarifies they will not be able to use those points against the current purchase.

Performance after launch

After the testing was completed and the new designs finalised, I moved to a different team and since then the new designer followed the launch of the addition to Nectar at checkout. Nonetheless, I found out that since the initial launch in September 2020 to September 2021, 686,572 of the total payments completed on the self-serve tills (a little over 2M) has used the Nectar card to collect and/or spend points and that the number of customers doing it is constantly increasing over time.