Redesigning the website checkout for Kingfisher Retail Group brands
Who are the Kingfisher Retail Group?
Kingfisher owns some of the largest DIY retail brands in Europe. I worked in a centralised international design team across the different brands.
My role
I was the Principal Product Designer leading this initiative across design squads among other projects. Managing a small team of mixed skills and experience
Challenge
Our brands offered a broad range of products, however our order quantities were low for a number of reasons, so we wanted to improve this.
In addition, the checkout had been unloved and there were opportunities to modernise the experience with updated interactions and design
Team
Principal Product Designer - Me
Senior Product Designers x2
Senior User Researcher supporting
Developer squads with a Product Owner x2
We sold a broad range of complex DIY and trade products online
Ranging from buying a paint sample to the all materials for a refurb, including the kitchen sink
A single decorative item
A new bathroom mirror as guests are coming round
A bulky purchase
A ton bag of gravel for a driveway refresh
Or a mix of all products!
Renovating a bathroom
… and this is where the challenge was
A restricted product
A craft knife
A 3rd party product
A personalised wallpaper from our marketplace 3rd party sellers
Example shopping baskets
A simple quick DIY fix
Repairing a dented wall with a couple of functional products
This meant many different delivery methods, timeframes and prices when ordering a mix of products
For example, redecorating a downstairs washroom
Heavy products. Eg Toilet, Sink
Two person lift via lorry delivery, stock kept at main distribution centre or local store, expensive deliveryNormal branded products. Eg Mirror, lights
Standard delivery by a courier company, stock from distribution centre, free or low cost deliverySupporting services Eg. Wallpaper samples
By post and freeRestricted products. Eg. Knives
Click and collect only with ID required3rd party marketplace items. Eg custom wall sticker
Any delivery, any timings, any cost set by 3rd party
Data analytics proved that complex orders weren’t handled well and frustrated our customers
The problem space was studied looking at page traffic, screen recordings and unmoderated feedback testing.
There was the lack of care put into the design of our mixed delivery order offering.
Recognising in some customer use cases it would be ideal to have the whole things arrive at once but sadly with so many delivery routes, warehouse locations and the complexities of an online marketplace this wasn’t possible in the short term.
Customer recordings analysis
Delivery and stock checks shown late in the journey
Creating real frustration with customers and basket abandonment
Analytics data and funnel
Extremely low completion rate for orders of multiple products
High drop off rate between basket and checkout
Low average order quantity
Analytics and user testing on the problem space informed “how might we” statements on what to improve
I led a series of user tests across the existing “As Is” checkout experiences in the groups brands
4x user testing rounds
Testing with UK, French and Polish customers
Validating pain points
Evaluating purchase journey feedback
Improve our average order quantities
Reduce drop outs between basket and checkout
Show our broad delivery proposition in a positive way - choice and flexibility
Design an experience that meets our customers expectations of online shopping
After our first rounds of user testing, it was clear the problem needed to be addressed in the Basket as well as the Checkout
Redesigning the basket
Previous basket design
Problem
Customers were pushed to choose click and collect or home delivery late in their shopping journey (second and third screen) on the previous thinking that this was best for the customer.
In some cases a customer could have both click and collect and home delivery but the process for this wasn’t intelligent or flexible, resulting in the high drop out rates.
New basket design
Outcome
After several user tested iterations, we moved the delivery choices to the basket stage of the journey. This would allow a customer to modify their order to have a mix of home delivery and click and collect more easily.
Condensed location and store info
Added simple radio selectors for delivery options - one of three variations tested
Estimated delivery included at basket wherever possible
Our checkout design needed modernising and would be rolled out as the new platform for all Kingfisher brands
The Kingfisher platform strategy involved creating white-label platforms that could be used across our different brands.
The aim was to reduce effort and increase consistency across the retail group and use reusable code bases.
A big part of this was designing consistency via an unbuilt design system so that everything we rolled out, would be built consistently built on the new platform.
Redesigning the checkout
Old checkout design
Problems
Unclear signposting and navigation through the Checkout stages
Card based UI design took up space and cramped the information being displayed
Poor visual and information hierarchy
Odd interactions / behaviour caused confusion with customers
Grey background created poor accessibility
Needed a freshen up
New checkout design
Outcome
Included the basket summary in the header for consistency, reducing the phone call customer services option to a lower priority CTA
Auto populated postcode with addresses whilst typing
Use full dates, days and times for better accessibility
Consideration for multiple languages
Addressed the use of primary, secondary and tertiary CTAs
Focussed on making delivery information more prominent
Click and collect store also included more supporting info such as opening times
A design that worked across all the Kingfisher brands and managing their respective stakeholders throughout
To get this project through involved a lot. of work with international Product stakeholders at B&Q, Castorama France and Poland and others.
There were some differences in payment methods as well as some politics to deal with where we were moving to one white labelled platform.
Each brand was very successful in their own right, so building a relationship with the various 10 or so senior stakeholders so we were part of their brand was really important.
An iterative release of the new features, validated in MVT and AB testing
Testing design variations
The tests were complex. We needed to test a combination of new basket and new checkout, with multiple basket order types to see if we improved multi orders.
Scenarios tested:
New basket with Old basket
New checkout with Old checkout
New basket with New checkout
Old basket with New checkout
Tracking different basket orders
A metric for the project was to increase Average Order Quantities. To check this was a success we needed good data for different basket types, across the MVT tests
Order types:
Basket orders
Home delivery multiple products
Click and collect multiple products
Home delivery with click and collect products
Impact and retrospective
Challenges
Creating a design that catered for 80% of common scenarios across the brands. Then tackling the final 20%
Balancing stakeholder expectations and requests
Losing our development team mid project
Leading user testing across 5 different languages