In this video I walk through an ecommerce customer journey from browsing through to checkout and highlight some of the good practice and areas for improvement.
The site I've used for this example, Adventure Peaks, sells outdoor clothing and equipment but the issues I flag up could be common to any ecommerce store.
Hi. Today I’m going to take you through an ecommerce user experience example. We’re just going to look at how smooth the customer journey is from first browsing through to checkout and see if any improvements can be made.
So the site is Adventure Peaks, which I came across while looking for some boots and we can see that as well as having a shop with clothing, equipment etc, they also sell expeditions, treks and courses. So I’m expecting that the site is run by enthusiasts and that some of the descriptions and things might be quite technical, because the primary customer is going to be somebody who goes on these expeditions and treks, and they’re going to have quite specific equipment needs. But let’s take a look…
I’m going to go into the shop and… yep there is footwear… and I want some walking boots so I’m going to go through to there. Okay, so we’ve got breadcrumbs here, which is quite good. And we’ve got some blurb, which to be honest I probably wouldn’t bother to read. And then I’m quite surprised that we’re jumping straight into the boots here. It’s just a load of products on a page - there doesn’t seem to be any filtering. So I’m just going to go back up and I’m just going to see if the Women’s has anything. No, there doesn’t seem to be Footwear there. Okay, so we’ll carry on then.
Okay, so I can see that these say Lady and… yep, we’ve got another Womens here. So I presume if they don’t say anything they’re probably men’s? Let’s just test that theory out - oh they do say Men’s. Maybe some of these are unisex then so let’s just click on one of them and if we go into the sizes that might just give us an indication. Oh. Three and a half. I’d have thought that was a children’s size. It’s on the small side for women’s. Without any other context it’s impossible to see. So either a small women’s or a child’s boot. Yeah. Ideally what I’d like to see here is some filters - not just for the gender and children’s, if there are children’s mixed in, but things like brands and price range… that’s probably it. Because as we said these are quite technical products so things like colour probably wouldn’t be relevant, you’re more looking for things… I suppose I might want things like whether it’s waterproof or not, you could perhaps filter by that, but if they just had gender, price bracket and brand filters that would be great.
So as it is, I’m just going to have a browse through and see if there’re any that I like the look of. Not a huge selection. Just three pages. But I don’t actually know how big this company is so… we’ll just have a look through. I like those, and they’re about the right height on the ankle for what I’d want. Let’s just carry on. There’s some that are on sale there. Okay so I’ve come to some maintenance products now, which I wasn’t particularly expecting to see but they are footwear related so that’s fine. So I presume the next page will be - no. I was expecting to see some more maintenance products here but we’ve actually got two more types of boot. And again we’ve got women’s flagged up but men’s not. So a lot of people might get to this point on page two and just assume that the rest was maintenance and never click through and see those final two boots. I don’t actua lly know what the order is of these: it doesn’t seem to be alphabetical, it’s not in price order - there doesn’t actually seem to be any logic and it might just be that it’s the order that they’ve been uploaded onto the system. That’s definitely something that would help with the categorisation, so if these were reordered so it was all the men’s first say and then the women’s and then the maintenance products it would make it a lot easier to understand.
And I’ve just noticed as well, some of these are on sale, so we’ve got this little green tab in the corner [actually a flash - it’s just a flat circle not active like a tab]. That’s not too bad, it’s not the most noticeable but I’d say when you’re putting tabs on for sale put it in red because we’ve been conditioned to associate red with sale and it’s a lot quicker for people to comprehend and easier if you just stick to those kind of conventions.
So, I’m going to go in and look at these that I like the look of. Okay, quite a quick load, I’ve still got my breadcrumbs so I can go back quite easily. I’m just gonna… yep I’ve got a rollover zoom, that’s good. And… if I click, yep it also gives me a standalone image and I can zoom again. Pretty good actually and that’s really quick to load. I’ve noticed recently, when I’ve been shopping for women’s clothes, a lot of these are really slow and you want to see the pattern in more detail and it takes a long time to load and can’t always keep up with your mouse when you… when you’re doing this rollover so that’s really good.
Okay, so… colours and options… I quite like this blue, but let’s see what else we’ve got. Okay, so we haven’t actually got an option. There is just the one. So really that shouldn’t be a dropdown because a dropdown implies I’ve got a choice. This should just say Colours: Smoke. It should just be a text line.
So moving on… Sizes. These are European sizes and I think… I’m a British 6 and I think I’m a 39, but I’m never 100% sure. So ideally I’d have liked a link here. That told me… gave me a link to the sizing. Or better yet something on here that said 39 and then maybe in brackets or something the British size. But I can see that there is a Size Guide here.
Whenever you’ve got something on your site where people need extra information, if they can find that easily that’s great, but if they don’t have to look for it in the first place that’s so much better. So here’s where I’m making my decision about which size I need, so here is ideally where you’d put that extra information. But it is pretty easy to find, so I’m going to click on that now. And again, it would be nice if clicking on that gave me what I needed here. But I’m going to click through again…
Okay, so this is by brand. And I’m just going to check what the brand was. Scarpa. Okay. Which it does actually say [size guide for major brands] but again people don’t read, they just click. I clicked here and then I could see that I needed to click here so I didn’t even read this. So I’m going to scroll down to the brand and… where are we… so 39… So it does say here, “if you’re caught between two sizes best to order both and send one back once you’ve tried them on”. I did think I was 39 and I’d say I’d probably just order that. 6.5 would be too big, I’m pretty sure. I don’t know how many people they get ordering two but again I’m looking at that and thinking it’s just going to be hassle. So I would just order this. And at that point I might just think ‘I’m not sure if I want to bother.’ To be honest it’s a little bit of… it seems like it would be extra hassle, but I can appreciate that they are being very precise with this. But I know that a lot of other footwear companies probably just give you the nearest British size, they’re not as precise. And in this instance I might have been happier with that. But I appreciate, again if you are looking at these for something like an expedition, it’s probably essential - you don’t want to be trekking halfway up a mountain with footwear that’s not an exact fit so it is very good that they’ve been this specific, even if it’s not quite what I’d look for. So if we go back and I’m going to choose the 39. Only one left in stock so it’s good that they flag that up. And I’m… before I add it to the cart I’m just going to look at some of the other information.
So… some intro blurb… not too techy, just tells you what it’s suited for, that’s great and then we’ve got some bullet point features so yeah, that’s a nice description: it’s not too long, tells me what I need, flags up about the Gore-Tex waterproofing here [in the description] and in the features… yeah [it] pretty much tells me what I need to know. And again things like weight, if you are going on an expedition, might be crucial. Not so much for me just for some walking boots, but it’s good to have it there.
Let’s have a look what the additional information is. So we’ve got the weight again, again we’ve got colour ‘options’. Oh and it looks like I can sort by colour. I’m not sure that’s particularly relevant for their audiences. Maybe it’s a nice to have. I mean, I do choose walking boots by look but I’m more about ‘do they do the job?’ and I would think when you get to some of the more high spec items you’ve got less choice as well but I guess in some ways it doesn’t do any harm [although you could possibly end up filtering out relevant results]. And we’ve got some size options here, which looks like… again I can shop by size which, if I’d known about that, it would have been a way around not having a filter for women’s shoes so I could have just gone to size 39, once I’d checked that was the right size, and seen all the boots that are available to me. So that is quite good, but again, there should be a link earlier on in the process to shop by size.
I’m just going to check… no I didn’t think so… So down here [in additional information] we’ve got 36 the list starts at and goes through to 42, and we don’t have a 36 here [in the dropdown of sizes]. So presumably the shoe is available in a 36 but it’s out of stock. Now if it’s listed down here then I’m kind of thinking, well if I am a 36 what does that mean? Does it mean that I can order it? And they’ll get it in for me? Because they’ve listed it as being available. And if that’s the case, it would be nice if it was here [in the dropdown of sizes] and they could go about it two ways: they could grey it out, so that I know that that shoe is available in a 36 and I can’t order it at present or, what would be really nice, was if it was grey but I could still select it. Then once I selected it I again got something to the side that gave me an option to be emailed when it came back in stock.
Okay and reviews. They haven’t got any. Again, it would be great if, if this value was zero, that tab didn’t appear at all and these tabs just resized to fit this width here. Because just having it there doesn’t give me any value because there are none. And if they’re playing their cards right then whenever they send out a delivery confirmation they’ll put a link to review this product which will go straight to this page so that it makes it easy for people and they can begin to get those reviews.
Let’s have a look at this anyway… So fairly straightforward: rating, review, name and email. Nice and short. They could make it even shorter by not insisting that you leave a text review and allowing people to just leave a rating so it’s very simple, very quick. Although it is always nice when you can, as a buyer, read some comments just to support that rating.
Okay so I’m happy, even though there are no reviews, that this is something I want to purchase so I’m going to add to cart. It’s taking a little bit longer to process this. There’s a bit of a delay but it’s within a few seconds, which personally I have the patience for. Some people might not. Okay so… Flagging up about e-vouchers or gift vouchers, that’s good.
I’m just going to click on Continue Shopping. Because I want to check… yes this is what I was looking for [the icon showing I have one item in my basket]. So I when I choose to continue shopping it shows me that I have something in my basket already. And that’s quite nice, that when I rollover it [the icon] I get a preview of it, a preview of the cart and I’ve also got a link to it. Although it doesn’t give the size here and also there’s a price there that only shows on the rollover, so if the price is worth putting on, put it on so that it’s visible when the mouse isn’t over it as well. And it doesn’t have the size. Now if I was ordering two, which is what they suggested I should do, it would be handy just to have in case I need to check which was the one I just added to the cart so that I don’t duplicate. But yeah, this is a good little function.
So I’m going to go to View Cart. Okay, so I’m just moving down the page. So I’ve got the cross to get rid of this [the product in the cart] if I want. And I can change the quantity. Oh no, it’s not actually letting me add another one - now I presume that’s because they’ve only got one in stock and this is actually, this actually checks the database for whether it’s possible, which is pretty good. And yes, I can reduce it [the quantity]. However there’s no Update Cart button here [beneath the quantity value], which I’d expect to see if I was changing the quantity. Oh it is here [further down page above Proceed to Checkout] and again it’s quite a nice clear button. It’s easy enough to find but I had to look for it. If my action is taking place here [in the quantity value] put the button here as well so that I don’t have to go and find it and you don’t risk losing me at this point.
Okay and we’ve got a nice big box to apply a discount code which is great. And if I was actually buying these I would be looking for one now.
And then we’ve got the total over here [right hand column]. So… shipping and handling. I’m not sure what’s going on with this orange pound sign, because these orange bits [e-vouchers and gift vouchers text] are links and the breadcrumbs. And in fact I can view my product again, which is great, so if i had been shopping for some time and just wanted to check to be certain of something before I purchased it’s good that it links back to it. But there’s no reason at all for this pound symbol to be orange and it’s a little bit distracting so I’d just do that as black. So I’m going to select free standard delivery.
Total includes VAT - yep, as I’d expect. Okay, [I’ll click] Proceed to Checkout.
Okay… ship to a different address. No, I just want to send it to my address. Do I have to create an account? Erm… Oh! Okay, so I’m just messing with my mouse here and it would appear that I’ve actually come onto this page down at the bottom. So I came in here [bottom of page] and there’s actually… the whole checkout page is above it. So that’s something that’s really not a good user experience and that should be sorted out as soon as possible. I’m not sure why… it’s not that I’m jumping to an anchor link that would take me down there. But they should definitely check that because that’s not a good experience at all and you could lose quite a few people there. The other thing to bear in mind as well is if I was down here [at the bottom] and wasn’t using a mouse - I might be using keyboard only, maybe because I’m blind or another reason, maybe related to accessibility - at this point, how do I get back? It might be… let’s just check if I could tab. Okay so if I tab I have come back to the top by the looks of it but again, if I did have some kind of visual impairment or something that meant I was using the keyboard, that would be a really strange experience and I probably wouldn’t have a clue what was going on here, so definitely something that needs sorting out. And again tabbing hasn’t actually take me to the [very] top of the page so in doing that I’d have been missing out on the returning customer [section] and an opportunity to enter a discount code again. Which is good.
I’m just going to check… I’m not a returning customer but I want to see what the functionality is. So we get a dropdown when we click that and we’ve got options to be remembered and retrieve our password so that’s all great and yep, I can minimise that as well. I’m guessing it’s the same with the coupon code… yep.
Okay, so billing details, so I’m just going to put some false details in here because I’m not actually going through with the purchase.
Oh, now additional passenger information presumably relates to the expeditions and checks and things but ideally this wouldn’t show to me because I’ve not got an expedition or trek in my basket. So ideally they’d put some functionality on this that checked the basket and if there is something relevant it shows, if there isn’t it doesn’t show. Because actually, this subscribe to newsletter I might miss because I just look at this [the newsletter section] and assume it’s part of that [the additional passenger section] because it’s quite close. Ideally that would have another header - something like Keep in Touch and options to select that. And let’s just check… With GDPR changes, it would be great if this had a bit more about what you’re consenting to by subscribing. So what kind of news you might be receiving… perhaps how often - something that just tells me what I’m consenting to.
And I don’t want to create an account. I don’t want to ship to a different address. I don’t need any order notes and again, this passenger info should be hidden when it’s not relevant.
So that’s that side [moves to next column] and I’ve just got a breakdown of my order again which is great. Again, throughout this site, anything that’s orange has been a link, so I’m not sure why that’s [the price in the breakdown] orange. And I can change my delivery options if I choose.
PayPal is the default [payment] option. That’s interesting. We’ve got WorldPay options if I want to pay by card and it kind of… it doesn’t explicitly say but it kind of hints that it’s going to take me off to the WorldPay site at that point which is good. And again, Check book availability - not relevant to me. It would be better if it was hidden.
Okay. What are the terms and conditions. Oh, they open on the same page, that’s interesting. And again [hovers over Booking Conditions for Expeditions, Treks and Courses] this bit isn’t relevant to me, so ideally when I clicked on that [the terms and conditions link] it would open this [the shop terms and conditions] straight away. [Scrolls through long list of conditions.] Now I would be very surprised if many people actually read this because it’s got the contact details and everything. Making a purchase. I really don’t need that information now because I’ve already done that. Next steps… maybe. And delivery address [terms relating to PO boxes] - now that might be quite handy if I had tried to put a PO Box but again that would have been handy at the point I put the postcode or something in. And yeah… [scrolls through more]
Footwear Restocking Fee… now that’s interesting. So they advise me to order two pairs because I fell between the European sizes but they’re saying that if I did do that, I’d be liable for a £15 restocking fee. Now that’s probably reasonable enough - it probably costs them quite a bit to ship these heavy boots, however, they didn’t flag that up at the point they were telling me to order two pairs. And it’d just be better customer service if they told me about that because, as I say, most people won’t be reading this.
[There’s a] bit about the returns. This is far too long. Erm.. Reaching us, I mean, there’s a Contact button there [in the header above the terms and conditions]. It doesn’t need to be in here. Client discount. I don’t know who that would even apply to and Loyalty card scheme… is this the point to tell me about it when there’s actually nowhere to opt in to the loyalty card scheme on the page. So… yeah, I’m not enamoured of this generally. I’m sure some of this they feel they need to tell me to cover themselves - probably when they sting me for the £15 restocking fee, but this isn’t necessarily the point to do it. And British Forces Discount, I mean it’s a great thing that they offer it, but the likelihood again of someone getting to this point and seeing it is very slim. So, you know, publicise that on your social media, publicise it in store, talk about it. Don’t put it in your terms and conditions. Yeah. Oh and win a £25 voucher when you write a product review. They have literally put everything in here. And prize draw rules. This isn’t a great user experience. If they feel that they need to have something like this it should be as little as they need to tell me at this point. And, as I’ve said, most people will just click this without reading, we kind of assume that we’re protected these days for most online purchases so most people will just click on that and as I’ve said some of them will then be getting a nasty shock with the £15 restocking fee.
Okay, so I think I’ve covered everything there, so again it’s flagging up, this is good, that it’s going to be with WorldPay and I suspect this will now take me to the WorldPay site. Which is taking a while. Okay so I did briefly see something which said carry on through - probably just a bit of a holding page in case this does take a while to load. Okay, so I’m not going to go through with that purchase but that’s it in its entirety.
So, things to flag up:
The main one for me is that point where I went onto the checkout page and just suddenly jumped to the bottom. That really needs sorting out as a priority.
I think the next key thing would be to add some filters. It would have made my browsing much easier. I’d be much more likely to buy because I’m not having to spend lots of time and there’s not that uncertainty, which typically means people will just give up; they’ll be put off by it.
Putting the information at the point where the decisions are made is key.
And finally, just making that restocking fee much more transparent.
Okay, so hopefully we’ve gone through some things there that make sense and might be relevant for your site. If you’ve got any questions about user experience or you want to ask about the ecommerce customer journey, drop me a line in the comments.