Helping Graham & Brown to drive revenue, with conversion up 10.23% and a return on investment of 1.8 weeks.
- 11.6% increase in mobile conversion
- 10.2% increase in desktop conversion
- 1.8 weeks return on investment
Graham & Brown are an iconic British, home-furnishings brand. They have been making homes beautiful since selling their first roll of wallpaper in 1946.
Head of e-commerce, Mark Leach, had an ambitious growth strategy; to increase conversion, grow revenue and expand further into international markets. His goal was to increase sales by 40% year-on-year.
With a new ecommerce strategy in place, and following a successful website relaunch, we turned our attention to ecommerce conversion rate. A critical improvement that was a new checkout flow.
After examining how real users experience the checkout, we created a more streamlined checkout that increased mobile conversion by 11.61% and desktop conversion by 10.23%, which has led to a significant increase in monthly revenue.
The improved checkout has significantly improved the customer experience and helped Graham & Brown to increase conversion and revenue. With a return on investment of 1.8 weeks, the new checkout offers a smooth and seamless shopping experience in any country, language and currency around the world.
“I'd like to thank you all for the work you have put in. You have made something that is going to serve our business profitably for years to come.”
Mark Leach - Head of eCommerce, Graham & Brown
We have been working on several conversion projects with Graham & Brown for a few years. One of the most important was to capture lost revenue from their ecommerce checkout.
We suspected that the inherited design of the checkout was a significant factor in lost revenue, as there were several points of friction that would harm conversion.
Our research found that the initial checkout screen acted as a barrier to customers. As the customer started the checkout, they first had to decide whether to sign in, create an account, or checkout as a guest.
Another issue was that the checkout had been implemented as separate physical pages. Worse, these pages did not validate any form input until after the page was submitted.
Users had to wait for each page to reload before progressing through to the next checkout step. As a result, we saw a considerable drop off throughout the checkout, as the process was unnecessarily cumbersome.
Proving our theory
To prove our theory, we implemented Google Analytics Enhanced Ecommerce analytics across the existing checkout. This gave us a clear understanding of how the current checkout was performing. We reviewed product impressions, promotions, and sales data, along with progress and dropout rates across each step of the checkout.
With customers able to take several different routes through the checkout (sign in, create an account or use a guest checkout), we mapped our findings against the customer journey.
We found that only 75% of users were making it through from the ‘select checkout’ step to the ‘enter your billing address’ step. We had anticipated a high dropout rate, and we immediately knew there would be a huge opportunity to recover this lost revenue.
We then used the HotJar session capture tools to look deeper at how actual customers were experiencing the checkout. By capturing mouse movements, page scrolling, keystrokes and clicks, this showed us precisely what users were doing, and where there was hesitation.
We started to build a picture of exactly how customers were using the checkout and where there were points of friction. We identified where users were struggling, from a poor layout and signposting, issues with form validation, and frustration from waiting for pages to reload at each checkout step.
We took our evidence to make the business case that a redesign of the checkout was needed and that there was a huge opportunity to increase conversion and increase revenue through this one change alone.
What we made
Our vision was to create a streamlined checkout flow that would be highly responsive and provide users with a superior customer journey, a clean layout, and on-page validation.
With the business case approved, we then used a series of design sprints to develop and test ideas along with wireframes and prototypes. We structured this as a series of design challenges, with each having a clear sprint objective and success metrics. We tested each iteration with users and explored reasons for hesitation. We eliminated every page element that was not essential and simplified the header and footer layouts to remove as many distractions as possible. We allowed the user to effortless move between steps and edit any information.
React.js Single page application
We developed the new checkout flow as a single page application using React.js. Users would now experience a highly responsive user interface, that allowed them to enter data and move smoothly between the different steps quickly and without the need for any page reloads
Client-side validation and positive confirmation
We used client-side validation to validate user input immediately. We provided users with positive confirmation of their form input, displaying green tick for valid information and a red cross, explanation and example for invalid data.
One of the simplest ways to frustrate a customer is to force them to register. We made the guest checkout as the default flow, with a ‘been here before’ option given on the sidebar to provide a login flow for registered accounts. The use of React.js meant that the page layout could simply adapt, without taking the user to a different page.
Address lookup function
To support a global customer base, we implemented a global address finder, making it quicker for customers to complete the delivery and billing address sections.
Address book access
To support frequent users, we provided a simple address book function, to allow registered users to select from previously entered addresses, further streamlining the user journey.
To support a global customer base, we provided a real-time order summary in the sidebar. Any changes to the order basket, delivery options or preferred currency takes immediate effect.
To help users enter card details quickly and accurately, we implemented a modern design pattern for card entry, providing auto-detection of the card and
The improved checkout flow has significantly improved the customer journey and helped Graham & Brown drive revenue growth through increased conversion and reduced checkout abandonment.
The checkout redesign delivered a return on investment of 1.8 weeks and provided customers with a smooth and seamless shopping experience in any country, language and currency around the world.