2020 - Salon Services
Basket & Checkout Redesign
Brief & Goals:
1. To improve conversion for UK Sally Europe sites (Salon Services - B2B / Sally Beauty B2C) through an evaluation and redesign of the checkout process on the website.
2. To improve the overall experience for a user within the basket whilst also adding in click and collect functionality.
Role & Team:
My role as Senior Digital Designer at Sally Europe was to analyse the current user behaviour on site, and create a new user flow that ironed out issues to decrease the dropout being experienced. This then needed to be presented back to the business with reasoning behind it, and all eventualities checked by development manager.
Developed by Astound Ecommerce.
Initial Pain Points:
- Users missing the 'Click and Collect' option entirely due to the UI.
- Customers only making it part way through the checkout before dropping out.
- Calls to customer service when promotional codes weren't working/being found.
Redesigning the Checkout:
Before
After
Fields
Customers had to enter less fields than were originally requested. The original checkout experience requested fields that were already filled in at account sign-up, removing these but giving them the option to amend with the touch of a button ensured they could proceed quicker.
Click & Collect
The click and collect functionality was redesigned to allow it to have almost equal weighting to the delivery option. This ensured that users were less likely to miss it when making their decision, as well as this the pricing options were added here too.
Autofill
Autofill functionality was added, tagging each field to ensure that the user could enter their details quicker rather than retyping out each time they made a purchase.
One-page
Delivery and Payment were brought onto one page to allow the user to move through the process quicker, and review their decisions in one place as opposed to clicking through.
Reworking the Basket
Outside of an overall refresh and review, the basket functionality now needed to incorporate click and collect. This involved making the service really clear for B2B customers picking up orders from their local store for their salon. This process involved mapping the journey from a PDP page all the way through to the basket and then checking out.
Before
After
Optimised
The solution was designed to be optimised for mobile, particularly for shoppers who add a large quantity to their basket. On desktop this was done by creating a static right column and on mobile a bottom panel sticky block, allowing them to compare click and collect and delivery quickly.
Space optimisation
The previous solution wasn't making use of the space available, so the solution was designed wider, with colour and typography being used to direct the users eye.
Messaging
Delivery threshold and security messaging was added to the basket header to allow a user to feel more confident in the decision they were making.
Promotional Box
Moving the promotion code box into the right static block allowed it not to be missed at this stage, a drop into customer complaints followed, as more users could find it. It was also turned into a visible field entry, rather than a hidden field behind a text link.
What I learnt:
This project taught me about the importance of speed for a user. On a large catalogue site like Sallys, the user will spend up to an hour filling their basket with supplies, often for their business weekly. Repeated activity like this means they want the actual checkout part of the process to be seamless. They want to be able to repeat purchase and be remembered. They don't want to have to re-enter details and spend time they don't have. I learnt the importance of providing this to a busy business owner through slimming down the experience for them.