Pay Now, Collect Later

Creating a new journey that allows customers to purchase products that aren't currently in stock, and collect them at a later date

The brief

Design a Minimal Viable Feature (MVF) that enables users to be able to purchase items that are currently out-of-stock and collect them at a later date on Argos in-store search, pay and browse screens.

The problem

There are several issues that must be understood:

Availability Understanding:

Some of the current product availability labels cause confusion for customers and do not help give guidance amongst next steps.
The colour of availability labels is not always intuitive. Customers are becoming confused with the differences between green and orange colour backgrounds and asking colleagues for assistance.

Purchase Functionality:

Customers did not know how to use or scan QR codes shown on the in-store screen in order to order out-of-stock products on their mobile phone.
A 1% increase in Pay Now, Collect Later (PNCL) product conversion rates would potentially see a significant revenue increase.

The outcome

Significant growth of sales of PNCL products by £5.4 million from deployment (December 2023) to January 2024

Background

Through research via interviews, surveys and in-store analysis, I have understood that the majority of in-store Argos customers fall under the categories of "ready to purchase" and "deciding between products."
Number 1 customer pain point is product availability
When browsing on Pay@Browse customers can only purchase products which are stocked in stores
Research across 6 Argos stores also showed that 22% of product pages viewed by customers are for products which aren't available in-store, but could be ordered and collected later

*Context: Majority of Argos Pay@Browse customers fall within the ready to purchase + deciding between products shopping behaviour

QR Code issues

I observed that customers did not know that they were able to scan the QR code on the screen shown on PDP with their own device
Some customers also had trouble scanning the QR codes on PDP due to technological issues.
The majority of customers expressed unfamiliarity with QR codes, often questioning the level of security surrounding it, thus creating unnecessary friction, as well as create an uncomfortable in-store experience.
Wifi in stores is often not great and would often result in customers being physically unable to load up the webpage via the QR code.

*Context: QR codes create unncessary friction and uncomfortableness for the majority of in-store customers

Hypotheses

Hypothesis 1
"More positive sounding messaging as well as a different background on the labels on the Product Lister Page (PLP) will lead to more customer engagement with the product’s Product Detail Page (PDP)"

Hypothesis 2
"Providing clarity on the PDP that a customer can pay for an item and collect it at a later specified date/time will encourage the user to purchase products that they previously would have thought are not available for purchase."

Ideation

The project was then split into 4 phases in order to reach an MVF and a plan to optimise it incrementally through further iterations:

Phase 1: Improve availability labelling on PLP to improve clarity for customers as well as drive an increase in clicks into the PDP
Phase 2: Offer an MVF where customers are able to make purchases for out-of-stock products and collect them at a later time or date at the same store
Phase 3: Allow customers to collect PNCL products from any store of their choice, allowing for more control and self-serve autonomy + completely revamp the PLP and product tile experience
Phase 4: Align with new evolving technology and screen sizes + resolutions

Phase 1 - Availability Labelling Optimisation

I conducted thorough analysis on how customers respond to different labelling copy, as well as its accompanying background colours in order to understand how best to provide clarity of product inventory, and increase clicks onto the PDP.

I split the test in 3 sections:

Show the current PLP and understand whether they could distinguish the difference between products that were in stock and that had to be ordered online
Showed the current PDP for products that have to be ordered online and understand if the customers knew what they had to do
Conduct an A/B test of proposed new labelling on the PLP with different UI colours to understand impact, understanding and navigation.

Parameters:

Participants: 100
Age: 18-55
Gender: Male 49% Female 51%
Household income: Ranging from less than 15K to over 80K

*Context: A/B Testt: Left side: Analysing labelling background colour. Right side: Analysing copy suggestions

Results:

Availability Labelling Background Colours:

Yellow pastel (73%) and blue pastel (82%) backgrounds score the best CSAT scores for differentiating by colours. Blue pastel has more positive connotations, whilst yellow and green suggest the item is out of stock/in stock now, so expectations are managed better.
Blue pastel passes accessibility checks, with contrast score of 91 and being
Green makes it harder to distinguish different fulfillment options from each other
Darker yellow is too complex on the eye

Availability Labelling Copy:

Explicit labelling (option 2b) makes users more inclined to click onto the product that is listed under PNCL as their expectations are managed explicitly.
Explicit messaging also allows users to not feel misled into clicking onto PDP, which makes them more likely to continue purchase journey than abandon the journey.

*Context: Explicit labelling with blue pastel background manages expectations better, allowing customers to be more likely to continue with purchase journey. 15% increase in clicks onto PDP within 4 weeks of deployment

Roll Out:

Phase 1 rolled out to 20 stores initially
Initial feedback was majroity positive
15% increase in users clicking on PNCL items through to PDP

Issues:

Users complained about functionality issues on PLP, with it not being clear which product tile availability labels belong to. These are also exacerbated by screen size issues.

Proposed Solution (in phase 3):

Move availability labelling to the bottom of the product tile in order to create clarity on where product tiles begin and end. Remove availability labelling coloured backgrounds and utilise iconography that is consistent with Argos web components. Visual noise is overwhelming on the product tiles with a lot of information and colours, so more subtlety actually provides greater clarity with where customers will typically scan for availability information.

"Its obvious and straightforward what my options are, the writing and messaging is very clear”

“Each colour means availability - so that is easy to understand”

“On the"Available for collection"- I can understand the differences between the calendar and the clock icon”

Responses from in-store customers

Phase 2 - Pay Now, Collect Later

PNCL may impact a large portion of customers due to the fact that in-store shopping is comparable to online click-and-collect. By improving the in-store experience, we can see a larger conversion rate in sales as well as a significantly improved customer experience.

Lo-Fidelity Sketching

I conducted some sketches to understand the journey flow and improve the purchase journey.

*Context: Sketches for PNCL journey

The sketched flow indicates that users will now be able to enter the journey through a CTA on the Product Details Page, which is found in its own side panel to improve visibility and clear decision making. Signposting is improved to give users greater clarity on why we need personal information, and when exactly the product will be available for collection. Throughout the journey, there are modal prompts as soft friction to allow customers to make decisions based on nectar cards, as well as informing them of unhappy paths (multi-basket attempts) and printing of their receipt which would have their confirmation code and order number on it. The journey would also improve the confirmation part of the purchase journey by improving signposting on collection details.

End-to-End Journey

The next phase of the design process was to test the prototype I had built based on my sketches and journey flow. I conducted 30 moderated tests in 3 stores in order to understand the functionality, the cognitive understanding of labelling and colour coding, as well as understand appetite for the new proposed journey.

Engagement onto PNCL products increased by 15% since the deployment of the new CTA entry point.

The use of a secondary CTA style (white background, green border) proved to be beneficial for customers as they are more inclined to read the label as opposed to rush through and feel misled further on in the journey.

Customers are also reminded where and when they can collect the item from, which was beneficial as it managed their expectations better.

In-store customers are much more apprehensive about providing their personal details, due to mistrust on how Argos uses it. We need their details in order to complere their collection as a security measure.

Creating alert messaging that was abundantly clear why these details were needed was met with positive reception as customers felt more assured.

Unfortunately, over 18+ items such as cutlery are not part of the first MVP for PNCL. This will need to be solved in future iterations.

Customers are now reminded of where and when they can collect their item from once it is ready.

Insight from in-store colleagues detailed that the biggest pain point for customers is that they regularly forget their collection code and order number, so signposting this was pivotal to their purchase experience.

Adding in a step-tracker at the top of the page was proven to be extremely beneficial for customers as they now are aware of what steps they need to undertake in order to complete their purchase, which reduced mid-journey drop offs by 12%.

Customers are also apprehensive about their purchased products staying on screen after purchase, so I introduced a countdown timer and CTA to start a new journey which was met with positive reception. Customers now feel much more secure when making larger in-store purchases.

The unhappy path for MVP meant that users were only allowed to purchase one item that falls under PNCL. Signposting to continue with their current basket or pay for their PNCL item separately was added to manage expectations. Though this still proved to be a frustrating experience, it was found that customers would still proceed with their purchase instead of dropping off.

In phase 3 of the project, multi-basket purchases and collection from other stores will be added to enhance the user's control and self-serve ability.

Prototype

Summary

- Pay Now Collect Later has seen significant improvement to the in-store journey for customers.

- First week of deployment saw an increase in sales by £440,000 as well as a forecasted annual increase by 23 million.

- Between the period of December 2023 - January 2024, PNCL sales increased by £5.4 million.

- Top performing days: 22nd December (£546,000) and 23rd December (£596,000).

- In-store experience for colleagues had become significantly smoother and improved their efficiency when dealing with customers.

- The number of clicks and screens needed to progress through the journey had significantly reduced, thus making it a much more streamlined process and significantly improving CSAT scores.

- Some customers still had issues with understanding availability labels and which product they applied to, so work was undertaken to improve the content hierarchy within product tiles. Results TBC.

Next phase:

- Add multi-basket PNCL purchases

- Allow customers to collect PNCL products from other stores

- Improve product tile content hierarchy

- Interface size and resolution changes