Introduction and Overview And we are back uh folks with yet another insightful session for this year’s prepon. What an insightful uh keynote that was from from Fati. I mean he talked about AI personalization social and I think that that really paves the way for for online store owners uh moving forward for for this holiday season and obviously beyond as well. Uh coming up next in in in this in this year’s prepathon is a is a session on seamless shopping journeys. I mean I think I think this is going to be interesting for for online store owners who are who who want to sort of get their hands dirty and understanding how how shoppers are behaving nowadays. What are they looking for? What do they like and don’t like when they’re sort of in that in that shopping journey. And joining me for that session is Katy Keith. Kirk Keith is the co-founder of a huge uh uh plug-in development company called Banto Plugins. She’s joining us all the way from Spain. So Katie, if I can have you on stage with me now. Uh yeah, there she is. Hi Katie. How are you? Hi. Great. Thanks. All right. Awesome. It’s it’s a pleasure. It’s a pleasure to have you uh for this year’s Prepathon. And I’m sure like me, everyone else uh in the audience is super excited for your session. So without any further ado, let’s let’s begin. And Katie, the floor is all yours. Okay, great. Well, let’s get the presentation up then. Are they going to load the presentation? Yeah, I hope so. There we go. Yeah. So the um 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 um that most people are still using e-commerce websites particularly Woo Commerce uh which is in WordPress 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 is WordPress and um so much about themes and templates and things, a lot of people install um 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 um look uh beyond that at how we can improve that journey. So basically, every extra click or barrier costs you sales. So 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 Understanding the Customer Journey that anybody can install on a website. And I’m going to focus on Woo Commerce 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 Barn 2 plugins by my company and others are going to be tools from other companies. Uh because one thing we’ve done a lot at Barn 2 is analyze that customer journey which I’m going to talk about today and think where can we improve on the default. So let’s get started. 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 of all, let’s think about the actual journey and how we can um 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 convince them to make a decision to buy one or more products. They then add it to the cart and 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 that they’re more likely to recommend you to other people and also come back themselves so that you get a higher average um 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. they assuming you’ve got good products and they want to enjoy that experience. So, I’m going to show you 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 Woo Commerce 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 5 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 I would say 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. Some of them are really easy to implement in WordPress itself. So I’ll just talk you through those quickly. Others will require additional tools or plugins. So 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 um isn’t a default WordPress feature. You need a plug-in for that. And that can allow you to have much more complex navigation structures. But just using WordPress, you can have um unlimited levels of drop-own menus so that people might navigate to say uh clothes, women’s clothes, uh trousers, whatever um as deep as you want to go. So that is a good way to help people navigate. Also, use your homepage wisely and highlight the products that you really want to draw attention to and think about that from your customer’s perspective. Make sure everything’s descriptive. name things um obviously not like category one or something and it’s useful to actually look at something like uh Google Analytics or to see what are people 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 plug-in called Yith Woo Commerce Ajax search, which has things like autosuggest and that improves on the default WordPress search because of things like autosuggest and images and all of that which makes it easier. And the way in which we have tackled this for store owners at Barn 2 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 uh created a plug-in called Woo Commerce product filters which you can see on this site. So Woo Commerce itself does come with product filters. It has checkbox or drop-own filters uh that you can use for your product attributes specifically and it also has filters for price and average rating. So, our Woo Commerce product filters plug-in 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. So, on the left 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 that the customer can select their details. And it looks like they’re doing a kind of fun quiz that will recommend a chair to them. Actually, it’s just product filters uh done in a clever way, which I really like. Keep clicking in the wrong place. There we go. So, this is our actual Woo Commerce product filter plug-in um in a more standard way of being used, shall we say. So, you’ve got um you can have filters above your list of products or you can have visual filters in the sidebar. And unlike the default ones Friction Point 1: Hard to Find Products that you don’t need a plug-in for, you can see that 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 just can really help because in a search, your search is really important and you should have a good search on your e-commerce store, but sometimes people need to be able to narrow down the list of products based on options that you provide because that way they’re never going to get zero results, which is great. Um, you can see it even tells you how many results you have for each color and so on. So that is a really good way to find products. And then moving on to friction point number two, which is unhelpful shop page layouts. And I think this is probably something that even more stores get wrong than making it hard to find products. Um, I see this a lot because people install a WordPress site, they install something like Woo Commerce, and they just keep the layout that comes with the theme or Woo Commerce’s templates. And I’ll show you in a minute 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 shop pages that reduce those clicks? So this is a screenshot of the storefront theme, which is a um free official theme for Woo Commerce. And this is the sort of layout you see on most online stores uh particularly in WordPress because of the whole template side of things that 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 you 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. Uh so that’s why I think that you need to analyze what product you’re selling and is the default layout at all relevant. So I think that a good solution which we’ve done a lot of work on at Barn 2 is to oops sorry um enable purchasing so that people can buy directly on the shop and category pages. So on that storefront theme demo we saw that actually I will go back um you can you can’t we 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 and 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 is 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. I don’t know, 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 that they don’t have to go to a separate product page. Uh they need to add quick view popups. Um and um Philillips 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 Quickview, which we’ll get to a bit more in a minute, 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 or something like that. So, and finally, order form layouts, which is a way we’ve tackled this at Barn 2. 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 plug-in for that, although it is an option. So, firstly, this is an example of a quick view on the Fossil website. And they’ve styled it in a really good way as well, 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 kind of compare watches much 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 that we tackle this at Barn 2, which is a plug-in called Woo Commerce 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 default layout. Others like maybe suitcases or technical products, electronics, um any kind of B2B wholesale products. It’s about the data and not about how fancy images having massive images. So with a product table, you can see here we’ve got way more products per page than the default store layout. You’ve got filters above which um make it more easy to find products. They are actually built into the product table plugin, although you could use it with our filter plug-in for more visual filters that we saw a minute ago. You’ve got more information like here we’ve got the summary, which is the short description, but you could have columns for any type of product data. So product attributes like the suitcase dimensions, you can have things like weight, uh you can have 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 allimp 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 Woo Commerce quick view plug-in so that 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 say show a bigger image gallery or something that isn’t realistic for the table. 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 nonvisual. It’s a sound. And here they’ve put uh things like actual music player preview buttons within the product table as well as filters and columns for things like genre and mood duration. So you can see 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 Friction Point 2: Unhelpful Shop Page Layouts 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, you’ve got a this is another demo from the storefront theme. 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 of product option that may not work in a variation. And I actually think that here size is appropriate displayed in a drop-down, but color is not. And that is because colors are visual by definition. And 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 and selecting one. So we built a plug-in called WooCommerce product options which lets you add a range of different styles of option um which you can actually use it with product variations. So, you could continue using variations for your black jeans color, but you would display them as color swatches or clickable images or something in our product options plug-in. Or you can just create the options directly in our plug-in if you prefer. Here’s a real life case study of a site using this. So, this site is called Gifted Jewelry, and I really love the way that you can customize jewelry using the product options. So to choose the color they’ve got, they haven’t used color swatches. They’ve actually used image swatches where they’ve uploaded really beautiful images of the showing the kind of glistening texture of the three types of metal that the jewelry is available in. And they’ve also used product options to take other information like text that the customer enters to be engraved on the jewelry, which is a really nice extra and can also of course increase the average order value because you’re selling additional personalization options all from your website. A completely different use case is creating a product configurator. This would work really well for the DSLR camera that we saw in the earlier screenshot actually where customers can actually use a step-by-step process to customize their products um through any kind of information that you want to collect. So, you’re basically creating a step-by-step product configurator. And for each one, you would choose the style of option which works best for that sort of information that you’re collecting. 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 that they have to go through in order to complete their order. And um it’s been shown uh according to Bayard Institute’s data uh 18 to 22% of shoppers abandon their cart specifically because of a lengthy or complicated checkout process. Um this is general to all e-commerce not specific to WordPress or anything. 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 Woo Commerce. So they go to the cart, they make any changes, they click proceed to check out, and now there’s another page where they actually enter their information and complete the order. So that is several extra clicks that 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 plug-in for that. And there are lots of Woo Commerce checkout editor plugins. But the Woo Commerce block checkout, the new one, uh often and and now it allows you to choose some fields that you do or don’t want to include. And I would say generally you should at least hide the phone number field. You 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 Woo Commerce as it comes is pretty good for this. just enable the relevant options so that people can check out without having to log into their account Friction Point 3: Limited Product Options or they can log into their account from the checkout if they want to um not have to enter their details again. So that’s all good. Provide a choice of payment options or at least stripe because the new Stripes uh options have multiple payment gateways which can change dynamically based on the user’s location and device which is great. Be clear about sorry shipping times and everything. Uh there we go. Uh be clear about shipping costs and times so that people don’t bounce on the checkout. In fact, uh Kestrel have a plugin. Actually, it was originally developed by Barn 2, but it’s a Kestrel plugin now called Woo Commerce shipping calculator which puts the shipping calculator on the product page so that 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 plug-in. And also use things like autofill and address lookup. Um, you don’t get that in Woo Commerce as it comes. There are plugins like um checkout WP or Flux Checkout that can add those things or Barnto’s fast cart plugin which I’ll show you in a minute also can add um that by integrating with Google’s auto address complete. So I would recommend speeding up the check by reducing the number of pages and there’s two key ways to do that. You’ve got onepage checkout which is 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 if you think about it. So you can do onepage checkout with Woo Commerce as it comes just by displaying the checkout below the products. And um here the example on the top left is our WooCommerce products table plug-in with the um official Woo Commerce onepage checkout plug-in. Uh the benefit of which is that you can edit the products in the checkout. So you don’t need a cart at all. Um but I’d say that’s only suitable if you’ve just got a few products. It’s better to have something like um Woo Commerce fast cart which we can see on the right which is where once you add products to the cart a cart andor checkout pops up on the same page so that 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 really fast way to complete the order. So, here’s your checklist of the things that 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 auto suggest 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 um on the occasions where variation dropdowns aren’t enough. Sometimes they are, but if it’s something more visual or personalizable, then you would 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. Um, you can find any of our plugins that I mentioned at barnto.com. And we’ve also I’ve recommended plugins by other companies as well, like Y, Kestrel, Iconic, and so on. So feel free to reach out to me on Twitter if you want to link to any of them or anything like that. Um and on the screen we’ve also got my LinkedIn if that’s how you prefer to connect. So thank you so much. Thank you Katie. I think that was that was brilliant. Uh I think uh a lot of our viewers do own their own online stores and I think they must have gotten some really great tips on how they can understand buyer journey and you know uh you know tone their stores according according to that. Uh let’s look into the comments section for a little bit and see if you have any comments or questions around around your talk. Uh so yeah, I mean Nester says amazing tips. Uh I think Philip is like I think AI for upsell downell would be would be interesting again. Philip says that shopping is always something I look at first. Shipping is something I look at first. Sorry. I usually abandon most cars if the shipping is too high. So yeah uh that’s a nice nice comment. a few comments from from James Camp as well. Uh and then Nick says that as a customer as a consumer outside of the largest ecom stores, I’m not going to download an app to buy something. So yeah. Uh so a few interesting comments in in there. Uh so so Krie uh I want to thank you for for this for this presentation for time. Uh it was an honor to have you at this year’s Prepathon. uh for for the rest of you folks uh I want to make a quick announcement on that this year’s prepon is obviously not just about the panels not just about the 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 you want it to be audited by a UX expert, so please drop down your online stores links in the comment section and we will make sure to audit them live on stage at the time of the activity. So so that is that is one of the activities that we have planned for you folks today. Uh K, thank you so much for being here. Uh up next we have an interesting session on u on the power of emotions in e-commerce. I think uh people who are going to target jenzelf I think I think emotion plays a huge role over there. So a 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.