Case study / 03
Our retailers sold subscriptions, and nothing let a customer try one before paying for it. I designed the way in.
Summary
In today's competitive ecommerce landscape, enhancing customer experience and satisfaction is paramount. This project aimed to integrate a Free Trial functionality into our ecommerce platform, specifically tailored for subscription models based on order shipments. Not only does it attract new customers, it also fosters loyalty by allowing users to experience products before committing to a subscription.
01
Since our solution was an ecommerce platform focused on grocery shopping, many of the retailers we worked with offered, among their options, several Subscription models in which, by paying a specific amount, their customers wouldn't need to worry about delivery fees for their purchases.
As a retention option, we explored adding a Free Trial feature, so users could try the service before committing to the subscription. Our solution didn't have such a feature, so it was our task to include it.
How other platforms handled their Free Trial?
Benchmarking
Users' behaviours around such a feature
Survey
What existing UX knowledge could help me ensure we deliver the right thing?
Desk Research
02
Identify common patterns in other platforms and products to adjust to our users' expectations: take what's good, discard what's not.
Not many grocery retailers included subscription models in their solutions, so I picked some of the most subscribed platforms out there. And the chosen ones were:
The way to go in most cases is a 30-day Free Trial. Most of our users did their purchases twice per month, so following this pattern would ensure they get to at least try the service.
Transparency ensures trust. All the information users may require is at hand and visible before trying out even a Free Trial. Any perceived hiding or misinformation could cause rejection.
Users can't subscribe right away, before trying out the Free Trial first. If they were able to subscribe first and only then realise a Free Trial existed, it could read as a treacherous move, hurting their trust and making them more reluctant to subscribe in the future.
Auto-renewing after the Free Trial is the way to go in most cases: convenient for the business, but also for users who feel confident in the product. It probably simplifies the payments process too.
Allowing us to send notifications to the user on Free Trial expiration date will be useful in reducing cancellations and complaints, while also increasing push notification opt-in.
03
In order to understand the expectations and needs of our users, I ran quantitative research first, sending a survey to 100 participants, UK residents, who had to be online shoppers.
Quantitative, run before any design
Residents only
Were already subscribed to a service
Expected a 30-day trial
Had never tried our subscription model
Said trying the service is the reason to give the trial a chance
Liking the service is what would make them stick to the subscription
Competitive fees are another plus
Forgetting to cancel is the biggest reason not to try the Free Trial
Users fear that if they don't like the service, they'll forget to cancel it and be charged at the end of the free trial. The problem is, that fear is exactly what's preventing them from trying in the first place.
So now we got a problem to solve!
04
Good for checking good practices, design principles and cognitive biases I could apply for delivering the best solution, while I awaited the survey's results. For this I consulted existing knowledge that exists online.
The clearest fit was the Goal Gradient effect: motivation increases as users get closer to their goal. Getting users to understand the process will help them reach the end, which is exactly what a Free Trial asks of them. I also looked into reminder and progress patterns around free trial expiration, to see how other products build trust and increase conversion through clear, well-timed communication.
01 / 07
Motivation increases as users get closer to their goal
Getting users to understand the process will help them reach the end
02 / 07
Users cancel subscriptions right after they start the Free Trial
The #1 user fear is forgetting to cancel a subscription. Dark patterns on selling products only increase it
03 / 07
The only way you can exceed your business goals sustainably is by focusing on delighting your customers first
Users will reject a product if they feel malicious patterns. Taking away a person's freedom leads to churn
One of our design principles is literally TRUST
04 / 07
The pain of losing something is always bigger than the happiness of winning something
Users don't want to lose what they won and like. Helping them overcome their fears will convince them to act
05 / 07
The time taken to make a decision increases as the number of options increases as well
The more time a user spends trying to make a decision, the more chances of leaving, giving up or not buying
06 / 07
An emotional bias that causes people to value something they own higher, often irrationally, than its market value
Explains why the Free Trial feature is a good idea
Designing the feature in a proper and also ethical way
07 / 07
When users have to make an important decision
Subscribing to a product implies a long-term relationship with it. Reducing friction and insecurity leads to better conversion
Making the process easier for users increases subscriptions
05
With all this information gathered, I organised a workshop to kick off the project, where everyone who was going to take part in it was invited.
Icebreaker
Presentation of the research
Ideation
Wrap-up and next steps
The brief I gave the room was one question and one instruction: from the things we went through, and the insights from the research, what opportunities can come out of them? Write down a main insight and a corresponding opportunity.
Insight
Faster subscription
Opportunity
Auto-renewal will increase convenience
We’re not thinking of solutions yet, we’re just looking for gaps between the user expectations and what the product is giving them today.
Users try the service and compare prices before they commit. The opportunity sits after the trial: benefits, extra plans and discounts for people who have already used one.
Make the free trial stand out on the selection screen, recommend the best value plan, and introduce trials at first log-in for new customers.
Say at sign-up that a reminder is coming, then send it a few days before the trial ends. Forgetting to cancel is what gets people charged.
A clear summary of the Delivery Pass, a cancellation process that is not hidden, and copy short enough to read. Plus a toggle to turn the subscription off.
At the end, everyone drew, based on what they learned, what they thought was the best approach
Drawn in the room
A screen headed FREE TRIAL listing three subscription plans with a Try it now button — and, on another board, Try Delivery pass for 1 month free sitting on the plans page itself.
Where it landed
The Passes Page shows every plan, and the 1-month one carries the primary call to action that starts the trial. Every other plan stayed secondary.
Drawn in the room
A notification centre reading Your free trial will expire in 5 days above a Review plan button, and a note asking for push notifications 5 to 3 days before the trial ends.
Where it landed
The dialog tells users they will be reminded before the charge happens, and the active Subscription Page carries how many days of trial are left.
Drawn in the room
An arrow pointing into an empty account screen, captioned use this empty screen to explain how the feature works.
Where it landed
The Subscription Page with no plan became exactly that: free deliveries for 30 days, cancel anytime, and a Find out more that opens the dialog.
06
With everyone's input and vision, knowing what could be done and what couldn't, it was time to get to work and start the actual design of the feature.
This page originally was empty, and a lot could have been done. But I kept it as simple as possible.
Annotation 1. The messaging is clear and simple: free deliveries for 30 days, and you are able to cancel anytime.
Annotation 2. “Find out more” opens a dialog where the process is explained in full.
Annotation 3. Why an address is needed is stated right above the button, so nobody meets the requirement for the first time at the button itself.
Annotation 4. The CTA is named “Add an address”, not “Start trial”: users without one stored had to provide it before they could qualify.
This dialog explains the process a bit more, ensuring transparency as much as possible.
Annotation 1. The offer is stated before anything is asked for: the unlimited service, and what it saves over a year.
Annotation 2. Three numbered steps, following the Goal-gradient effect — a process shown as a run the user is already partway along reads as shorter than the same process described.
Annotation 3. The #1 user fear was proven to be forgetting to cancel. So step two says it out loud: they will be reminded before the charge happens.
Other explorations of the same dialog, which were discarded
All the plans are shown here, so users can choose whichever is more convenient for them.
Annotation 1. Every plan sits under one offer and is priced per month, so the durations can be compared against each other rather than against nothing.
Annotation 2. The usual duration of a free trial is one month, so the 1-month plan is the one that carries it. Its CTA is Primary: it draws the most attention, and it prevents the wrong plan being started by mistake.
Annotation 3. Every other plan has no trial and stays Secondary, with the copy the buttons already used — “Buy this plan”.
This is the same Subscription page as before, carrying the information that only exists once a trial is running.
Annotation 1. How much trial is left is the first thing on the card — Loss Aversion and Transparency, in the one place the user is already looking.
Annotation 2. Auto-renewal is ON by default, for implementation and business reasons, and the date it happens is stated rather than implied.
Annotation 3. The whole arrangement is repeated in plain words where the user can act on it, not only at the moment of signing up.
Annotation 4. And turning it off is a plain button on the same screen. Users can cancel whenever they want.
Annotation 5. And the dialog stays reachable: “Find out more” moved to the foot of the screen, under everything it might be needed to explain.
07
With the help of UX Research, I built the prototype that we would be testing with real users. Given that the feature was originally requested by our United Kingdom (Ocado) and Canada (Sobeys) retailers, we decided to perform the testing with users from there.
I set 3 tasks for the users to go through:
This flow covers the user's journey from Homepage, until the subscription is done successfully.
Interesting bits to mention here
This flow covers the user's journey from Homepage, until the cancellation is done successfully.
Interesting bits to mention here
This flow's purpose is to let users choose the plan they wanted to be subscribed to, if the trial convinced them about the service. Since the Trial can only be chosen from the 1-month plan, if they wanted the yearly subscription instead, they can switch while still enjoying the Free Trial.
Interesting bits to mention here
08
With all the prototypes shiny and set, it was time to make them shine even more! For this, I prepared a testing round with the following criteria of users:
Potential users
13
Markets
3 Tasks
Results were really good overall
| Participant | Task 1: Subscribe to plan | Task 2: Cancel renewal | Task 3: Switch plan |
|---|---|---|---|
| UK | |||
| Participant 1 | Passed | Passed | Passed |
| Participant 2 | Failed | Passed | Passed |
| Participant 3 | Passed | Passed | Passed |
| Participant 4 | Passed | Passed | Passed |
| Participant 5 | Failed | Passed | Passed |
| Participant 6 | Passed | Passed | Passed |
| Canada | |||
| Participant 1 | Failed | Passed | Passed |
| Participant 2 | Failed | Failed | Failed |
| Participant 3 | Passed | Passed | Passed |
| Participant 4 | Passed | Passed | Passed |
| Participant 5 | Passed | Passed | Passed |
| Participant 6 | Passed | Passed | Passed |
| Participant 7 | Failed | Passed | Passed |
Most tasks were completed successfully. The few who failed the first task mostly expected the entry point to the flow to be somewhere else.
How they behaved when facing the task:
0/13
Users questioned why they needed a payment method to qualify for a free trial
9/13
Understood their Subscription status once active
12/13
Identified which Plans had Free Trial available (the one missing didn't even arrive to the Plans page)
40%
Average of users who noticed the dialogs during testing
Valuable, pretty actionable pieces of information, quite repeated and requested during testing.
Users wanted easy access to complete the action in the Home screen.
Users want to know how many days of trial they have left, before cancelling the auto-renewal.
09
With all the gathered and valuable feedback, I made the last adjustments to the designs, granting us the Final Flow ready for handover after many, many, many reviews with our colleagues!
Web Desktop
Web Mobile
App Mobile (Android & iOS)
Baptism of fire
Free Trial was the first proper, big, and important project handed to me when I joined Ocado Technology. As you could see (if you reached this point) it was of considerable magnitude. To wrap things up now…
I designed it against user feedback and business goals at the same time, rather than choosing between them. Not one of thirteen testers questioned the payment step. It shipped, across several retailers.
Until the next project
Keep reading
