Users wanted to browse for products from their phones. In 2016 we knew that, but in 2006, when we first built The Spice House’s website, the idea of mobile-first didn’t exist. Over the years we’d been able to make code improvements, SEO tweaks and design changes, but we hadn’t been able to give it the responsive overhaul it needed. That created particular pain for wholesale customers, since chefs were often ordering the next day’s spices from their phones at the end of a long night in the kitchen.
The Spice House originally came to us planning to create an ecommerce website just for wholesale customers. It quickly became clear, though, that the retail site needed a mobile-first overhaul as well. We realized a new retail site would do more for The Spice House’s business, and it could be used by wholesale customers as well.
Tom Erd, co-owner of The Spice House
Combining the sites allowed us to mine all those years of retail data to find out what other improvements we could make. We saw, for instance, that users who came in from search weren’t converting at the rates we wanted to see. So we redesigned the SEO-rich pages, like products, to include more calls to action. That way when new visitors happen onto the site, they immediately understand how to buy.
We also knew that The Spice House would see a spike in sales any time they sent out a coupon for free shipping. Using the data, we made a business case for offering free shipping on any order over $45. Now the average basket is up 19 percent, as shoppers buy that one extra spice to get free shipping.
The Spice House has incredible content. Part of that is because food is fun, and part of that is because they prioritize making engaging videos and recipes. For the redesign, The Spice House team cared enough to reshoot 100 percent of their product photography and rewrite their product descriptions to be longer, more detailed and more up-to-day. All that useful content had attracted substantial search traffic. Google switching its algorithm to ding ecommerce sites that aren’t mobile-optimized threatened that traffic.
Pepper pages for every need — and search term
To win the most search traffic, we treated the whole site like content. Products like pepper got an SEO-rich landing page for generic searches and targeted pages for each specific term — whole peppercorns, cracked black pepper — that all had the ability to rank in search. Then we linked it all together by building a lightweight ecommerce CMS that allows The Spice House to easily build collections of recipes and spices and associate those collections with product pages. Now, if you’re shopping for Cooking Spices, you can see collections of the best vegetable spices and barbecue spices on the same page. And if you’re shopping for Za’atar you can check out recipes that use it from the product page.
Creating connections between content and products has not just retained, but improved, The Spice House’s search traffic. Building links between pages and by creating new search-optimized landing pages also made the site more useful by giving those visitors more places. Since the new ecommerce site design, average session duration is up 27 percent and pages per session are up 32 percent year-over-year.
Merging the wholesale and retail sites was the right way to go, but we did have to do some UX work to make sure both audiences could find what they needed. Search became the solution. A sizeable chunk of The Spice House shoppers come directly to the site knowing exactly what they want to buy. So we created an autocompleting search functionality that would allow users to buy the spices they want in the quantities they want without ever having to click through to a product page.
If you type “Cin” into the search bar, you now see every available type of cinnamon with pictures and can add the one you want directly to your cart. Today, 10 percent of users who search on the site add products directly to their cart.
Search results autocomplete, so people can go straight to what they need.
For the people who don’t already know what they need, we streamlined the navigation into four dead-simple categories: baking spices, cooking spices, salt and peppers, and gifts and accessories. Now users can browse with intent, making them more likely to ultimately find something they want to purchase.
Once we had users finding what they wanted to buy, we needed to make the act of buying it better. We created an entirely new, single-page checkout process to keep users moving through the desired flow. And it works. Cart abandonment is down by 10 percent over the old process.
Tom Erd, co-owner of The Spice House
The first thing we did was flip The Spice House’s old checkout, so we now ask for users’ emails at the beginning. It gives The Spice House the ability to reach out to customers if they abandon their cart. It also lets us log repeat users in, so they can check out without reentering all their saved information. After that, we made the entire cart dynamic. It recommends related products, suggests increasing the cart size for free shipping and generally prompts people to buy from The Spice House.
On the backend, we redid the way each checkout step loads. By using API calls instead of page refreshes, we can make the process seem to happen instantaneously. We also added validation, so users would know that they’d entered a working email and credit card number, preventing error messages. At the end, we add the buyers to The Spice House’s mailing list, so the team can market to people they’ve already converted.
By using The Spice House’s real user data, we’ve been able to build an ecommerce website that’s perfectly optimized for its customers. The results are almost hard to believe. Since the redesign, The Spice House has seen its conversion rate go up 66 percent and its sales increase 42 percent. The best part is those numbers have held over time, through the holidays and into summer. And that means a large and lasting increase in revenue for The Spice House.
Tom Erd, co-owner of the The Spice House