In this video case study, we’re diving deep into the remarkable transformation of Gourmet Basket, a luxury gift hamper retailer. Gourmet Basket’s journey from a sluggish WooCommerce store to an instant pageload powerhouse is a testament to the revolutionary impact of Blaze Commerce.
Watch the video:
Transcript:
Hey, it’s Campbell from Blaze Commerce here. Today we’re taking a look at Gourmet Basket, a high-end luxury retailer of gift hampers.
But before we get into the case study, let’s remember one thing – speed matters. A slow website can cost you customers and revenue. In a recent study by Deloitte, a mere 0.1-second improvement in site speed led to a nearly 10% increase in retail consumer spending. Speed is the name of the game, and Blaze Commerce knows it. More at The Fastest WooCommerce Store in the World?
Instant Pageloads with WooCommerce
Let’s take a quick look at their site. Now, I’m going to open their site in a new browser session.
And as I load the page, just notice how quickly it appears. The site loads instantly. If I navigate around the site, I click on a category.
Bang. It’s there. If I navigate to a product, it loads instantly. And this is a site that is very image heavy.
All right. This is a luxury brand. And the images really play a massive role. A massive factor in this user experience.
Now, keep in mind that this is a WordPress site. This is a WooCommerce store. All of their products are maintained in WooCommerce.
All of their orders are managed in WooCommerce.
The Importance of On-site Search in Ecommece
Now, I’m going to just show you store search quickly. Search is so important on an online store.
We know that people who use, well, around 30 to 40% of people who land on an online store go straight to search to find what they’re looking for.
We also know from that research that they are three to four times more likely to complete a purchase than the average visitor to a site.
So people who use search have higher intent. The other thing is that they are two to three times more likely to spend more.
Their checkout value is two to three times more than the average visitor to your site. So anything you can do to help with search on an online store.
Those go straight to your conversion rate and your bottom line. Alright in this case let me do a search on products with gin in them.
Alright, my father’s a gin drinker. So as I’m typing those results just show instantly. There is zero lag. I click on a product.
Again, bang. That page just loads. It’s just there. Now let’s say I’m interested in looking at all of the gin hampers.
Alright, so I click on the breadcrumb. Up comes the page. There are 20 results showing there. I can see that just here on the page.
And I want to filter these. I’m interested in hampers that are in a particular price range. Alright, 100 to 150 dollars.
So that page up to, It’s instantly to show eight products. And if I want to remove, Bang. Results are back to 20.
Alright, so instant filtering. And if I click through to a product page. This site has a lot of customization around how people can choose different options for their gifts.
How they can choose a date, a delivery date on checkout. We’re even adding video messages to their orders in the next couple of weeks.
But if I click on add something, a little something extra. I can now choose additional items to add to the cart.
Alright, so my father has a sweet tooth. I want to, add some chocolate. Alright great. Done. Those items are already added to the cart.
Alright, so this is a very fast site. This is very user-friendly. And I’m going to give you a bit of information on how we achieve that.
Gourmet Basket WooCommerce Challenges
Okay, so there were a number of challenges that we set out to solve for Gourmet Basket.
First off, they are heavily invested in WooCommerce.
They’ve been running this store for about 8 to 9 years. And in that time, they’ve customized it heavily for their particular industry, for their segment, for their business.
It’s also tightly integrated with a host of backend systems, inventory, finance, marketing, shipping, and so forth. But they also were having UX issues that were impacting their conversion rate, particularly for the mobile visitors to their site.
And of course, they were having speed and performance issues. The more and more we customized their site, the more code that was running on their site, and in peak seasons, particularly around Christmas and so forth, the site was really struggling with the traffic.
And from time to time, we also had stability issues where we would make updates to plugins to WordPress core to WooCommerce and so forth.
And we’d carry out significant testing before we apply these to their live site, but still occasionally there would be issues on the front end that we’d miss or that would come up.
Just unexpectedly. So, so there were these stability issues. Now, re-platforming away from WooCommerce was not a viable option for them.
With the amount that they’d invested in WooCommerce up to this point, they didn’t want to have to move to a different platform.
And they didn’t need to. The solution we put in place solved all of these problems.
Ecommerce UX Usability and Conversion Rates
I just want to mention usability and how important it is to e-commerce sites.
Here are some stats for you. All right, study after study confirms that usability on e-commerce stores is critical. And we’ve looked, I’ve personally looked at hundreds of online stores and I have not seen one yet that doesn’t have some sort of major usability issue.
- Just one percent of people say that ecommerce sites meet their expectations. (Forbes)
- 90% of users won’t return to a site solely due to bad UX. (Toptal)
- 70% of online sales fall through because of bad UX. (Uxeria)
- Mobile users are 5 times more likely to abandon their cart if it’s not optimized for mobile. (Toptal)
- A 1-second delay in page load time can lead to a 7% reduction in conversion rates. (Google)
Even the top online stores that spend millions. So the upshot of that is that you can be pretty much assured that your WooCommerce store is losing sales like a leaky bucket.
UX Impact on Ecommerce Conversion Rates
Now, if you solve those usability issues. Let me show you the impact of that. Here’s an example of a client where we went through their site, identified the usability issues, resolved all of the major ones.
Immediately increased their conversion rate by 132 almost 133%. Their revenue went up by 142%. It’s not unusual for us to see that the revenue goes up more than the conversion rate.
And here’s another good example. This is a client that has 73% of their traffic coming from a mobile device. But their site was, had very, very poor UX for the mobile.
So we redesigned their site. Increase their conversion rate immediately by 119%. But look at how much we increased their revenue.
So not only did we double the number of people that were purchasing on their site, but we doubled how much they were spending as well.
We made it so much easier for them to browse the site, and add additional products to the cart. So that’s the kind of impact you get when you focus on solving usability issues.
Ecommerce UX Research
And this is all backed by research. This isn’t us sort of taking our best guess at what good usability is.
This is e-commerce specific. And that research is used by the big players.
Limitations of WordPress & WooCommerce
Let’s just take a quick look at WordPress and why it’s hard to scale its performance.
WordPress is built on what’s called a monolithic architecture. It’s much like that iceberg behind me there. The part above the surface are the pages that visitors to your site see as they’re browsing.
But below the surface, there is so much code. There are database lookups, there are plugins, there’s custom code, there are themes, there’s CSS, HTML, JavaScript that is being generated on every page load.
And it’s for this reason that there’s a ceiling that you start to hit in terms of the kind of performance you can achieve with WordPress and with commerce.
In addition, it also makes it hard to see the hard or challenging in terms of resolving usability issues. Seemingly simple things, small changes are not easy to make when you have to factor in all of that additional code that comes with a monolithic architecture.
What is Headless WooCommerce?
So the solution here that we went for with Gourmet Basket was adopting a headless approach. So what is WooCommerce Headless? It’s one of those words that another term that is often used is decoupling, decoupling.
Basically on the left here, you have the standard WordPress setup. You’ve got a server that you’re solving. It’s hosted on.
You’ve got a database there. You’ve got a web server that shows those pages. And then you’ve got a backend for administering the site.
You’ve got all of your plugins. You’ve got code. You’ve got theme and, and then the front end, right? It’s all there in one big stack.
All right. If you go headless, you still maintain. Your site in the backend. All right. You still maintain your orders, maintain your product, blog posts, all that sort of stuff.
But we have high-performance code that generates those pages on your site in advance. And you’re using all of the data from your store.
And those pages are hosted on servers all around the world. So no matter where you are in the world, when you type in Gourmet Basket, for example, those pages are going to be delivered to you from the nearest server.
And those pages are really lightweight in terms of code. So they load so fast and the images come from the nearest server.
So they load so fast. That’s the benefit of, of headless is basically taking all of the code that deals with all the pages, the front end basically of your site.
It makes very low-code versions of those that are hosted in the cloud. You still do everything else you’d normally do in WordPress.
Now, transitioning your WooCommerce store to a headless approach might seem daunting, especially when considering combinations like Headless WooCommerce with Next.js. However, platforms like Blaze Commerce simplify this process. We specialize in efficiently aiding WooCommerce stores in adopting a headless approach using a complete headless solution for WooCommerce.
This not only makes the transition smooth but also resolves many UX issues that e-commerce sites often encounter.
The Benefits of Headless WooCommerce
And the benefits? Why take WooCommerce headless? Well, you’ve already seen some of those massive improvements in page load, page speed, and significant improvements in conversion rates as a result.
And high-performance pages that are infinitely scalable. You can throw so much traffic at this site and it won’t miss a beat.
You also get benefits in terms of SEO. We know that the search engines out there use the speed of your site, particularly on a mobile device for, ranking your site.
And you get, through faster page loads, better rankings organically. You also get much greater flexibility in how you can lay out the pages on your site, make changes to them very quickly.
And it enables WooCommerce store owners to build on the investment that they’ve made in, WordPress and WooCommerce without sacrificing their flexibility or the growth of the business.
One of the key reasons many online stores are moving towards a headless approach is the platforms available that simplify this transition. Blaze Commerce, for instance, provides a platform that not only helps WooCommerce stores go headless but does so in an efficient and cost-effective manner.
It’s particularly designed for developers, agencies, and store owners who want to leverage the advantages of headless without the complexities.
The Result
And the result for Gourmet Basket. So, this was not a rebuild. This was taking their existing site, adding a few plugins to it and leveraging their investment in WooCommerce.
As a result, you saw instant page loads, instant search, and instant filtering. We also made 100 plus usability improvements to the site as part of taking it headless, particularly for the mobile users of the site.
And since that site went live some months ago, we’ve also been able to make rapid changes and improvements to the site in a way that we just couldn’t do before.
The benefit that the client loves most is that it has absolutely blown away their competitors in terms of the speed, functionality, and feel of the site.
