The previous Currys checkout was difficulty to use, it was slow and customers dropped-off at different stages of the checkout process. Form fields were hard to fill in and it did not optimise well on a mobile device.
Checkout Redesign
Overview
My role
To create a new checkout experience that reduces friction, drop-offs and allows the customer to quickly add information to complete the order on all breakpoints.
Result
I created a single page checkout where all customer data is added on a single page. This increased progression to the checkout by 1.88%, which means an additional £10m YOY.
Discovery
Working with BAs and Solution Architects, I mapped out all the different systems and touchpoints that the current checkout was linked to. I did this exercise so when I redesigned the checkout, nothing would be missed.
Research
Looking at other competitors I saw that alot of customer data was pre-filled and saved from previous sessions such as addresses, bank and store details.
Analytics
Using analytical data, I created these graphs and I could see immediately where customers were dropping off during the checkout funnel.
Ideation
I create this flow workshop where I invited developers, BAs and Solution Architects to understand the current flow by using post-it notes. Using the knowledge from the team and the research I had gathered from analytics, I started to re-order the checkout flow.
New checkout flow
In these two diagrams, you can see what the current checkout flow used to look like (A) and (B) of what I had changed:
- Allow the customer to choose delivery slots without sign-in
- Choose stores just by entering location
- Push guest upgrade at the end of the checkout process
- Consolidate 5 pages of the checkout into a single page application
Page goals and reducing clicks
I created a checkout goals page to show stakeholders where each feature would sit on which page. The step journey on the right shows the more data I can save about the customer, the more quicker a customer can complete the order.
Design
The old checkout had many components which were hard to use. Below, you can see an example of how I redesigned each one to make them useable and fit in a single page checkout.
Final UI Design
Below, you can see the final UI design of the single page checkout. It shows how you can choose delivery slots or a store collection without signing in and as you complete data that section collapses and moves you to the next section, giving the perception of speed. This design works well for single orders or a mix basket.
Usability lab testing
I created a prototype of the new checkout using a tool called Axure and hired an external testing company to validate the experience. The feedback was iterated back into the design before launch. Here is a summary of the feedback:
Positive:
- Single page checkout is well put together to assist customers through the journey
- Form usability is generally good
- The design is clean and clutter free
Negative:
- Seek permission from customers for marketing opt-in for GDPR compliance
- Copy needs improvement across the board
- Mandatory fields are not always indicated
Implement
The new checkout was a large scale project and could not be launched into market in one go. I broke the project down into increments, journeys and features sets. In the diagram on the right, you can see how I broke down the project into releases (blue square are new checkout pieces):
- New Basket page
- New basket page + product insurance
- End to end download journey
- End to end small/items journey
During the release process, 2 checkouts were running in parallel, both needed to coexist. When I had released all the journeys into the new checkout, the old checkout was finally switched off.
Evaluation
When a increment, journey or a feature of the checkout was released to market, I evaluated its performance to make sure the release was a success:
- Monitor data on the day of the release
- UAT the journey before and after release
- Find out how much incremental benefit has increased
- Walk-thru with stakeholders on what was released
- Prepare designs for the next increment of the checkout
Result
By doing alot of research, testing, designing and prototyping, I managed to map out the entire experience of the single page checkout then break it into increments until the new checkout was live.
1%
Checkout progression
After consolidating the 5 page checkout into a single page, I created progression to the checkout by 1.88%. This indicates less people are dropping off the checkout process and more customers are completing the order.
£0m
Checkout revenue
1.88% in revenue means an additional £10m YOY. I had removed friction, drop-offs and barriers which had allowed customers to complete orders.
0%
Small items mobile conversion
I redesigned the delivery slots and store selection to be optimised for mobile site which had improved customers ordering on a mobile device.
0%
Large items mobile conversion
The current checkout was not optimised well enough for a mobile experience. Buttons were hard to click, options were hard to select and it was hard to navigate to different sections. Improving all of this has increased mobile conversion for large products to 5%.
0.0%
Basket insurance increase
I improved the basket insurance options by highlighting the benefits of each option by firstly doing an A/B test. My new design won the test and increased conversion of insurance by 4.2% bringing in revenue of £1.3m YOY.
