Checkout Optimisation
Role
Product Designer
Collaborators
Product Manager
Business Analyst
Frontend Engineer
Copywriter
Duration
12 weeks
Responsibilities
Research + Analysis
Information Architecture
Visual Design
Prototyping
Documentation
The checkout process underwent simplification through UX and UI optimisation to improve conversion rates. The goal was to streamline the user experience and enhance the interface to making it more user-friendly and intuitive for customers. Clear and concise instructions were implemented to optimise the checkout process, facilitating a smoother and more efficient conversion journey.
As a result of this redesign, conversion rates increased by 11%, equivalent to an estimated additional 0.6K weekly subscriptions. Additionally, there was a 3% increase in the utilisation of the ApplePay payment method, further validating the effectiveness in encouraging more users to complete their purchases.
Process
Background
In March 2023 The Telegraph has launched a 2-step version of the checkout across all journeys that had two aims:
1) To make payment the single purpose
2) To bring the designs inline with the new visual language
Objectives
The roll out of the new checkout and alignement of the visual language in spring 2023 was a success. However, the business wanted to improve conversion further.
In this iteration, our aim was to enhance the initial checkout experience in a way that is more compelling to users and improves performance metrics.
Requirements
Through the data we had collected since launch, we were able to identify barriers to conversion.
No option to pay via 'Express Checkout' (Apple Pay/Paypal)
→ User has to enter their email address first to get to the second step, where they can then pay via Express Checkout
No subscription details are displayed, as this is the first screen a user sees after clicking on 'Claim this offer' from an on-site activity or via email
→ Could be confusing to potential subscribers, as they don't see what they are paying for, which would lead in worse case scenario to indecision or drop-offs
Subscription details are taking half of the viewport on mobile
→User has to scroll to be able to pay by card
No visual hierarchy between Express Checkout and Pay by Card or Direct Debit
→There is no guidance on which payment option is better or what difference it would make
Design
To prioritise Express Checkout, we made it the primary payment method on the first screen, this eliminates the need for users to enter their email address. Transparency was given by displaying the subscription details on the first step, which allows the user to confirm and validate their decision.
Multiple payment options are presented, so a greater emphasis on the differences was required to allow users to scan their choices. We put the options into containers and added a progress bar to each of them to show all steps.
The Express Checkout CTAs are dominating the page in their distinct colours, whereas the CTA for the email path is secondary (by default grey and turns black after entering an email address)
On mobile: only the subscription type and it's price are displayed by default, if the user wishes to see more details, they can click on the arrow which opens the accordion
Step 2 is only for users, who have chosen the email address on the first screen (users who have selected Express Payment skip this screen in the journey)
Handover
The journey needed to be remapped due to changes in the information architecture. To facilitate the developer in making the necessary amendments, a comparison chart has proven helpful, especially since this project is an iteration of an existing one.
The developed project successfully surpassed the control in the A/B test, demonstrating superior performance and is live since December 2023.
DRAG image to see the complete journey
