Woolworths: Designing a signup journey in checkout

Project context

OVERVIEW

What is this?

This project looks at my journey in designing a signup experience for Woolworths' Delivery Unlimited subscription service within the checkout area of the Woolworths e-commerce site.

DETAILS

My role:

User research, Interaction, Visual design, Prototyping

Impacts

1. Highest rate of signups across all subscription signup flows
2. 11% increase in subscribers per month
3. Reused in Everyday Extras design version

Constraints

‣ 2 month deadline
‣ Must align to Woolworths checkout design ethos

View Designs

Introduction

I'm proud of this project. It's hard to explain why and requires a bit of priming on my part, especially because it might not immediately seem evident on why it's something worth being proud of - it's not necessarily the most technically demanding subject in the way that my SD-WAN journey was for example.

To explain why I'm proud of it; imagine that you're told that you'll be signing up to a subscription service. Without knowing any more information about what the service is or why you'd want to sign up, you're probably thinking of a few different features it's likely to have. Maybe you're thinking of having to enter your credit card details, your email or physical address, your phone number and maybe more. And maybe you're also thinking about the decisions you'd have to make, be it literal in the sense of having to select a different plan type or just cognetive in the sense of needing to evaluate if this subscription service is 'worth it' to you.

Now imagine the checkout area of a website; it's the most critical stage of a journey by far, and users are in a high stress environment in which they're having to manage the delivery of potentially hundreds of dollars in groceries to their address. If something goes wrong or they fail to order, that might cost them more as well with late delivery fees or takeout, or in gas and time with needing to go to a physical store to get their groceries.

Now also finally imagine trying to motivate users to start a signup journey using a banner. Most users are already trained with years of experience to just ignore them, and Woolworths in particular had this problem really bad. Let's say you've got 8 to 10 words to try to convince them that this service will be of interest, in checkout, where they've also been trained to complete their orders in a specific routine way that makes it even more likely that your banner gets ignored. What words do you put on it? How much value do you need to call out to get them to signup?

This is why I am so proud of this project; despite all these obstacles and many, many more I was able to design around them effectively and deliver on the journey that had the highest rate of subscription signups in the entire Woolworths ecosystem.

Background data
The idea was drawn from data I personally gathered using adobe analytics earlier, showing that 20% of our landing page traffic originated from a banner in checkout, and 73% - 80% of customers exit the journey from the signup landing page.

Investigating further using Hotjar, I was able to uncover that a large amount of customers on arriving at our landing page from that journey didn't scroll or navigate to the prompt that would push them into the signup funnel - most barely made it past the landing page banner.

Hypothesis:
Given that…
‣ A noticable percentage of our customers are coming from this landing page
‣ This percentage of customers overwhelmingly immediately leaves on arriving at the landing page
‣ Checkout has a high degree of contextual relevance for our subscription service

We feel that…
‣ A contextually relevant signup journey, designed with speed and simplicity in mind, will enable these customers to signup faster without having to disrupt their checkout journey heavily.

We will know this to be true when…
‣ The rate of signups in the checkout journey is higher than the data we currently have for the segment of customers who head to our landing page from the checkout modal

Design barriers
In terms of early barriers that I was able to identify for this project, they were primarily:

‣ Risk of ecom profitability disruption - Checkout is the most critical part of Woolworth's online shopping journey. If it's heavily disrupted by my design in some way, that could impact our profitability.
‣ Technical disruption possibility - Due to the high degree of complexity within the checkout area (many different states that change depending on user input) there's additional risk of disruption if the user journey is designed without heavy collaboration with engineering experts in the checkout team.
‣ Customer perception of signup journey tasks - If customers percieve this to just be a regular signup journey, they're unlikely to want to exit the end of one journey (shopping) to start a new one.
‣ Cognitive bandwidth - Checkout is a high stress area and where possible taking steps to remove cognetive bandwith from users in the form of actions they need to take or information they need to process is key to providing a good experience.
‣ Banner blindness - Users don't engage with our banners in general, and this would be replacing a banner.
‣ Limited space for content - The banner had a max word count of 25 or so characters.

Desktop research

Competitor analysis
The competitor analysis I had organized uncovered the following key areas that formed the foundation for my design.

1. Personalization: Uber's $3.71 savings, that being such a specific figure that I'm prompted to investigate further.
2. Speed of signup: Uber & Doordash both have journeys that can be completed in two clicks.
3. User bias: Uber/Doordash use checkboxes instead of 'sign up here' buttons because they don't have the same cognitive associations with customers. Users likely already have a good idea of what a signup entails - lots of steps, picking a plan, entering card details, ect.

None of this would be present in the journey I was thinking of designing, but that won't matter if users still approach my journey as if it did have all the regular assumptions of a signup journey.

User Testing

Round 1: Hypothesis & Results
1. Users will expect this modal will take them outside of the journey regardless of which scenario they start on. ✔️
2. Banner blindness will prevent the user from noticing the journey initiator. ✔️
3. Users prefer prototype B because it avoids the additional layer of decision making of picking between monthly or annual plans.❌
4. On noticing the banner users will have a positive reaction to the personalization featured in it.✔️
5. $15 of value is enough to make the user temporarily exit this journey (completing an order) and start a new one.🤔

Abridged further research notes

A further two sessions of research were conducted. These were organzied with the goal of testing speocific areas of interest/hypothesis crowdsourced from other subscription designers and the checkout team, as well as primarily focusing on seeing the amount of value that would be required to make users engage with the banner, if users understood that the banner was personalized to them and if they understood / comprehended the signup journey correctly.

Research Prototype

Learnings

  1. Customer perceptions on what something does matter as much as what it actually does

  2. How long will someone look at this design for and what do I need to convey to them in that time

  3. How much value would motivate the customer to do this action?

Do you have any project idea you want to discuss about?