Moeez: And we are back, folks, with yet another insightful session for this year’s Prepathon. What an insightful keynote that was from Fati, he talked about AI, personalization, social, and I think that really paves the way for online store owners moving forward for this holiday season and beyond. Coming up next in this year’s Prepathon is a session on seamless shopping journeys. I think this is going to be interesting for online store owners who want to get their hands dirty and understand how shoppers are behaving nowadays, what they’re looking for, what they like and don’t like when they’re in that shopping journey. And joining me for that session is Katie Keith. Katie is the co-founder of a huge plugin development company called Barn2 Plugins, she’s joining us all the way from Spain. So Katie, if I can have you on stage with me now, there she is, hi Katie, how are you?

Katie Keith: Hi, great, thanks.

Moeez: Awesome, it’s a pleasure to have you for this year’s Prepathon, and I’m sure like me, everyone else in the audience is super excited for your session. So without any further ado, let’s begin, and Katie, the floor is all yours.

Katie Keith: Okay, great, well, let’s get the presentation up then. So the keynote a minute ago was very high level about the future of e-commerce, and we even talked about things like people not even buying on a website. I’m going to get a bit more hands-on, and most people are still using e-commerce websites, particularly WooCommerce, which in WordPress is by far the biggest way to be selling online. So I’m going to talk about the customer journey through the traditional website route, because I’ve noticed that, partly because WordPress is so much about themes and templates, a lot of people install their e-commerce platform as it comes and don’t really think about whether that is right for their customers. So I’m going to break that apart and look beyond that at how we can improve that journey.

So basically, every extra click or barrier costs you sales, the harder it is for your customers to buy from you, the fewer sales you’re going to get, and we’re going to look at every step of the customer journey. And you don’t have to be a developer to watch this, if you are, it’s fine, but the tools we’re going to talk about are not developer-level tools, they’re things that anybody can install on a website. I’m going to focus on WooCommerce because that is the biggest WordPress e-commerce platform, but you will be able to find equivalent tools for most or all of the options I’m going to talk about. Some of them are going to be Barn2 plugins by my company and others are going to be tools from other companies, because one thing we’ve done a lot at Barn2 is analyze that customer journey and think, where can we improve on the default.

So friction hides at every stage of the customer journey, it’s strange when you think about it that every single point can annoy people and lose your customers. So first, let’s think about the actual journey and how we can understand it in order to improve it. People land on your website, we’re not going to be talking about marketing today, so you’ve somehow magically got them onto your website. Then they have to find the products they want, easier said than done. After that, they need to view your products and ideally will be convinced to make a decision to buy one or more products, they then add it to the cart, they view the cart, and then finally they complete the purchase. So every single step of that journey has hidden friction points which I’m going to talk about.

So quickly, why does it matter? Well, the more you can reduce friction and make your customers’ experience easy, the more you’re going to improve your conversion rates and your revenue. Ultimately you do that by keeping customers happy so they’re more likely to recommend you to other people and also come back themselves, so you get a higher average order from your customer over that whole lifespan. And so the concept here is that everybody wins, this isn’t just about making more money for the merchant, it’s about keeping the customers happy because they actually do want to buy from you, assuming you’ve got good products, and they want to enjoy that experience.

So I’m going to break down four specific friction points that most stores overlook, actionable strategies to fix each problem, and grow your sales, and to do that we’re going to look at some real-life case studies of WooCommerce websites in particular which have done this. So friction point one is hard-to-find products, and it’s amazing how much of an issue this is on a lot of WordPress-powered e-commerce stores. So research from Forbes has found that 61% of people will leave a website within about five seconds if they don’t find what they’re looking for. That’s actually pretty difficult if you think about it, as the merchant you need to somehow direct people to what they want within five seconds, that doesn’t give you much leeway, or at least as a minimum, they need to see your website and feel reassured that they’re on the path to find what they want.

So to do that, we need to help shoppers find products faster, and there’s loads of ways to do this. Firstly, navigation, if you think about some of the best e-commerce stores in the world, they probably have really good navigation, a lot of them have things like mega menus, which isn’t a default WordPress feature, you need a plugin for that, and that can allow you to have much more complex navigation structures. But just using WordPress, you can have unlimited levels of drop-down menus so that people might navigate to clothes, women’s clothes, trousers, as deep as you want to go. Also, use your homepage wisely and highlight the products you really want to draw attention to, and think about that from your customer’s perspective.

Make sure everything’s descriptive, name things obviously not like “category one” or something, and it’s useful to actually look at something like Google Analytics to see what people are searching for before they find your site, because that might give you some insight into how you can name categories and products, it may not be what you think. Also, search is really important, because if you’ve got loads of products, people often just need to type in what they want, and for that I’d recommend a plugin called YITH WooCommerce Ajax Search, which has things like autosuggest and images that improve on the default WordPress search and make it easier. And the way we’ve tackled this for store owners at Barn2 is by adding advanced features to narrow down results, which I’ll talk about next.

So we identified that people often need more than just good navigation and search, so we created a plugin called WooCommerce Product Filters. WooCommerce itself does come with product filters, it has checkbox or drop-down filters that you can use for your product attributes, and it also has filters for price and average rating, so our WooCommerce Product Filters plugin builds on that to let you create more advanced filters. And I really love this example of a Caro chair selector, the website is caro.co.za/chair-selector, and here on the left you can see what doesn’t even look like filters, but it is, where it says how much do you weigh in kilograms, how tall are you, etc., those open up to create actual product filters inside so the customer can select their details. And it looks like they’re doing a fun quiz that will recommend a chair to them, actually it’s just product filters done in a clever way, which I really like.

So this is our actual WooCommerce Product Filters plugin in a more standard way of being used, you can have filters above your list of products or visual filters in the sidebar, and unlike the default ones that you don’t need a plugin for, you can have things like color swatches and images that people can click on, so it’s a much more interactive way to find products. And I think that can really help, because your search is really important and you should have a good search on your e-commerce store, but sometimes people need to narrow down the list of products based on options you provide, because that way they’re never going to get zero results, which is great, you can see it even tells you how many results you have for each color.

And then moving on to friction point number two, which is unhelpful shop page layouts, and I think this is probably something even more stores get wrong than making it hard to find products. I see this a lot because people install a WordPress site, install something like WooCommerce, and just keep the layout that comes with the theme or WooCommerce’s templates, and I’ll show you that that may or may not be suitable for the type of product you sell, which is why you need to think about it. So remember, every click can reduce conversions, so we need to think, how can we have shop pages that reduce those clicks?

So this is a screenshot of the Storefront theme, which is a free official theme for WooCommerce, and this is the sort of layout you see on most online stores, particularly in WordPress, because of the whole template side of things, it comes with a layout like this and people just use it assuming that is the way, and sometimes it is a good way, I think it’s pretty good for clothes for example. But for some reason, the Storefront demo people are using it for a build-your-own camera and suitcases, which are really great examples of products that I think should not be displayed in this layout. So think about it, if you’re buying a suitcase, you want to know the dimensions, probably what it looks like is a bit important, but you really need to know the size, and you don’t get any of that information from this layout, it’s just meaningless. And with the build-your-own camera products, it just says “read more,” so you can’t see what the options are or the pricing, it’s just not that helpful for any of these products.

So that’s why I think you need to analyze what product you’re selling and is the default layout at all relevant. So a good solution which we’ve done a lot of work on at Barn2 is to enable purchasing so that people can buy directly on the shop and category pages. So on that Storefront theme demo, you can add the suitcase to the cart, sure, but why would you, you don’t even know how big it is, and with the camera there are options so you have to go through to the product page. So in all of these examples you have to click through to the single product page, that’s another page to visit, remember, in the customer journey, in order to learn more about the products and ultimately decide and add them to the cart, so that’s why I think we need to do better with our shop pages.

And that can involve showing key product details like the size of your suitcases and what the materials are, maybe how many pockets it’s got, does it have a lock built in, those sorts of things need to be visible on the page before they’ve even clicked through. They should also ideally be able to actually select variations and quantities from that shop page so they don’t have to go to a separate product page. They need to add quick view popups, and Phillip just commented that he loves client quick view and most of his clients can’t live without it, which is so true because it keeps people away from the single product page. And another thing I really like about quick view is that after you add to the cart, you’re still on the shop page, so customers see your other products, and that can add to more purchases in the same order than going straight to the cart page or being stuck on the product page.

And finally, order form layouts, which is a way we’ve tackled this at Barn2. Well, we actually do have a quick view plugin, but most themes these days have quick view built in, so generally you wouldn’t need a plugin for that, although it is an option. Firstly, this is an example of a quick view on the Fossil website, and they’ve styled it in a really good way, where when you hover over a watch you can do a quick look instead of going through to the single product page, and then it allows you to compare watches more easily by clicking on one, closing the quick view, much better than using the back button and going between browser pages.

And then you’ve got the way we tackle this at Barn2, which is a plugin called WooCommerce Product Table, and I would recommend this for specific types of product only, this is what I mean about analyze what type of product you’re selling. Some of them look great in the default layout, others like maybe suitcases or technical products, electronics, any kind of B2B wholesale products, it’s about the data and not about how fancy or big the images are. So with a product table, you’ve got way more products per page than the default store layout, you’ve got filters above which make it easier to find products, they’re built into the product table plugin, although you could use it with our filter plugin for more visual filters. You’ve got more information, here we’ve got the summary, which is the short description, but you could have columns for any type of product data, product attributes like the suitcase dimensions, weight, custom fields, taxonomies, literally any product data can appear as columns in the table.

So that gives you the opportunity to think, what data do customers need to make a decision. And then finally, you’ve got the all-important buy column on the right where you can actually select quantities and variation dropdowns and add the product to the cart from the table, and it works with our WooCommerce Quick View plugin so you could have quick view buttons here. But honestly, you might not need them, because you can provide so much information in a table that you don’t need quick view unless you want to show a bigger image gallery. Here’s a case study of a real-life site using product tables, and I really like this because music is a ridiculous thing to sell in the default store layout because it’s inherently non-visual, it’s a sound, and here they’ve put actual music player preview buttons within the product table as well as filters and columns for genre and mood and duration. So this is a good example of a type of product that sells much better in an order form view than the default view, so think about the type of products and choose your layout accordingly.

We’ve also got this case study of Wavelength Electronics, which is an example of electronic products which are very popular to be sold within an order form layout. Now, for some reason, they’ve not included add-to-cart buttons, which I personally think is a mistake, but I do like the way they’ve got downloadable data sheets and product attributes directly on their shop and category pages. Now, friction point number three is boring or limited product options. So with this one, this is another screenshot from the Storefront demo where we’ve got variation dropdowns, which work really well for some types of product option, but there are other types that may not work in a variation. And I actually think that here size is appropriately displayed in a dropdown, but color is not, and that is because colors are visual by definition, so customers should be able to choose a color by clicking on that color visually, not by reading the names of colors in a list.

So we built a plugin called WooCommerce Product Options which lets you add a range of different styles of option, which you can use with product variations, so you could continue using variations for your black jeans color but display them as color swatches or clickable images in our product options plugin, or you can just create the options directly in our plugin if you prefer. Here’s a real-life case study of a site using this, this site is called Gifted Jewellery, and I really love the way you can customize jewelry using the product options. To choose the color, they haven’t used color swatches, they’ve actually used image swatches where they’ve uploaded really beautiful images showing the glistening texture of the three types of metal the jewelry is available in. And they’ve also used product options to take other information like text the customer enters to be engraved on the jewelry, which is a really nice extra and can increase the average order value because you’re selling additional personalization options.

A completely different use case is creating a product configurator, this would work really well for the DSLR camera we saw in the earlier screenshot, where customers can use a step-by-step process to customize their products through any kind of information you want to collect, so you’re basically creating a step-by-step product configurator, and for each one you’d choose the style of option which works best for that sort of information. Our final friction point is number four, which is the slow cart and checkout process, and I’m not talking about performance here, that’s a separate issue which is very important, it’s about the customer journey, the number of pages they have to go through to complete their order. And it’s been shown, according to Baymard Institute’s data, 18 to 22% of shoppers abandon their cart specifically because of a lengthy or complicated checkout process, this is general to all e-commerce, not specific to WordPress.

And the issue is, I believe, that you have to take customers through multiple pages in order to complete their order. So here we’ve got the cart and the checkout from WooCommerce, they go to the cart, make any changes, click proceed to checkout, and now there’s another page where they actually enter their information and complete the order, so that is several extra clicks you could potentially get rid of. And here are some ways to speed that up. One is only ask for essential information on the checkout, in the past you had to install a plugin for that, and there are lots of WooCommerce checkout editor plugins, but the WooCommerce block checkout, the new one, now allows you to choose some fields you do or don’t want to include. And I would say generally you should at least hide the phone number field, if you don’t need it as part of the shipping process, then just remove it, because it’s there by default, and every extra field, it’s been well established, will reduce the number of people who fill in that form, and checkout is a form.

So only ask for essential information. Offer things like guest checkout and customer accounts, and WooCommerce as it comes is pretty good for this, just enable the relevant options so people can check out without having to log into their account, or they can log into their account from the checkout if they want to not have to enter their details again. Provide a choice of payment options, or at least Stripe, because the new Stripe options have multiple payment gateways which can change dynamically based on the user’s location and device, which is great. Be clear about shipping costs and times so that people don’t bounce on the checkout, in fact, Kestrel have a plugin, actually it was originally developed by Barn2 but it’s a Kestrel plugin now, called WooCommerce Shipping Calculator, which puts the shipping calculator on the product page so people can check the shipping cost before they add to the cart, and that way they’re less likely to abandon their cart, so that’s a really neat plugin.

And also use things like autofill and address lookup, you don’t get that in WooCommerce as it comes, there are plugins like Checkout WC or Flux Checkout that can add those things, or Barn2’s Fast Cart plugin which I’ll show you in a minute also can add that by integrating with Google’s auto address complete. So I would recommend speeding up the checkout by reducing the number of pages, and there’s two key ways to do that. You’ve got one-page checkout, shown in the screenshot on the left, which is where you display your products at the top and your checkout at the bottom, now I think that’s okay if you’ve only got a few products, but if users are going to have to scroll then it’s actually not much use. So you can do one-page checkout with WooCommerce as it comes just by displaying the checkout below the products, and here the example on the top left is our WooCommerce Product Table plugin with the official WooCommerce One Page Checkout plugin, the benefit of which is you can edit the products in the checkout so you don’t need a cart at all, but I’d say that’s only suitable if you’ve just got a few products.

It’s better to have something like WooCommerce Fast Cart, which we can see on the right, which is where once you add products to the cart, a cart and/or checkout pops up on the same page so you can complete the checkout without even going to any other pages, and that can really help conversion rates because it’s just so easy. And you can even skip the entire cart so that when you add a product to the cart the checkout opens, there’s not even a cart, so that’s the absolute quickest way to shop. And I’d recommend, depending on the type of product, keep the cart if customers are likely to be buying multiple products because you can have things like related items in the pop-up cart, or you can just enable the direct checkout option and go straight to the checkout, either way it’s a really fast way to complete the order.

So here’s your checklist of the things we’ve covered and the different stages of the customer journey to remove those friction points. First, make it easy to find products with things like good navigation, good search with autosuggest, and professional-level filters where customers can visually see what they’re looking for and click on it to filter that product. Improve the layout of the shop page in a way that is tailored to the type of products you’re selling, so that will be different based on the type of product, your goal being to minimize clicks and provide the information they need when they need it. Make product options more intuitive on the occasions where variation dropdowns aren’t enough, sometimes they are, but if it’s something more visual or personalizable, then you’d benefit from different types of product option. And finally, streamline the cart and checkout by minimizing the number of fields, the number of clicks, and ultimately making it as easy as possible to complete that order.

And that’s it, so thank you so much for watching. You can find any of our plugins that I mentioned at barn2.com, and I’ve also recommended plugins by other companies as well, like YITH, Kestrel, Iconic, and so on, so feel free to reach out to me on Twitter if you want a link to any of them, and on the screen we’ve also got my LinkedIn if that’s how you prefer to connect, so thank you so much.

Moeez: Thank you, Katie, I think that was brilliant. I think a lot of our viewers do own their own online stores and they must have gotten some really great tips on how they can understand buyer journey and tune their stores accordingly. Let’s look into the comments section for a bit and see if you have any comments or questions around your talk. So Nester says amazing tips, I think Philip is like, AI for upsell/downsell would be interesting, and Philip says shipping is something I look at first, I usually abandon most carts if the shipping is too high, so that’s a nice comment. A few comments from James Kemp as well, and then Nick says, as a consumer, outside of the largest ecom stores, I’m not going to download an app to buy something, so a few interesting comments in there.

So Katie, I want to thank you for this presentation and for your time, it was an honor to have you at this year’s Prepathon. For the rest of you folks, I want to make a quick announcement, this year’s Prepathon is obviously not just about the panels and presentations, we also have some fun activities, and one of those activities is the live store audit. So today later in the day we will be auditing some online stores live on stage, so if you have an online store and you want it to be audited by a UX expert, please drop your online store links in the comment section and we will make sure to audit them live on stage at the time of the activity. So that is one of the activities we have planned for you folks today. Katie, thank you so much for being here. Up next we have an interesting session on the power of emotions in e-commerce, I think for people who are going to target Gen Z, emotion plays a huge role, so the power of emotions in e-commerce by Talia Wolf is coming up next, so make sure you hang around and we will be back in just a few minutes.