The Perfect Product Page Template™
This free template will help you engineer the ultimate product page to increase conversion & revenue while minimizing future returns!
|Page||Page Speed (Time to Interactive)||Accessibility|
|Homepage||4.7 (sec)||27.5 (sec)||81||77|
|Search Result Page||4 (sec)||19.9 (sec)||75||70|
|Category Page||2.5 (sec)||26 (sec)||76||77|
|Product Page||5.3 (sec)||30.2 (sec)||81||77|
|Cart Page||5.2 (sec)||15.9 (sec)||73||84|
|Checkout (each step)||1.6 (sec)||15 (sec)||80||80|
|Order List||2.1 (sec)||13.5 (sec)||76||77|
|Order View||2.3 (sec)||13.4 (sec)||85||86|
|Joann.com Speed and Accessibility data provided by Lighthouse|
Hey guys, welcome to WeSupply! I want to show you a really cool website. It’s called Joann and probably you guys already know about them. And I want to show you how they do e-commerce, how you can basically check out, how you can do curbside pickup. We’re going to buy some products, pick them up curbside. Then I’m going to return these products. So I’m gonna go through the entire flow.
Now, let me get started on why I like this website. I think it’s a really clean, really nice website. And let me just show you. So here we are on the homepage, right. Clearly they are doing pickup, basically, I mean curbside, and they are constantly advertising it. Well, I did a few reviews the other days, but I never seen anybody pushing curbside and store pickup so much. So you can learn more about them, obviously.
Then they give you 20% off for in-store and pick-up purchases. You see? In-store and pickup purchases.
And you can basically just simply apply this coupon, and then so convenient, buy online pickup in-store, curbside. Get the coupon, even more info. And then if you scroll down, they have all the coupons and all the products. They are advertising here as well. Easy returns, skip the line, curbside pickup.
Let me just show you what they mean here because that’s actually really cool. And what I’m expecting is that the experience is going to be similar to how Best Buy does it or even Target, based on their description. But we’ll see. So, in-store pickup, contactless curbside, really good. They call this out because it’s contactless. Very important during pandemic. And you know, all the details, come to the website, it’s free, wait for the ready for pickup, then come to the store, show your ID and pickup your order. And when you’re at the store, basically, you click the button I’m here, you know, on my way, I’m here and they bring it up.
And I really like how they have this FAQ section right below that, just so if any kind of questions you might have regarding purchases, they answer. Can I use coupons for an order placed online, for store pickup, and they basically explain everything. Really cool.
I want to show you a few other things. I actually signed up yesterday, I created an account and I went through the website briefly. And this is their Welcome Email. Really cool. And they also call out here in-store pickup.
I also added a few items to my cart. And what I want to show you here is that they even extended the 20% off not just for curbside pickup, but for my total purchases. So in-store, online, regardless, basically they want me to come back because I had an account with some products already in it. It’s a really great way for me to basically get back. I can just simply click the button, apply the coupon, and it’s already applied in my cart.
Now, let me show you what I really like here. I think this is a really happy website. Like just check this out. Joann smiles, like happy smiley faces. It gives you a good feeling. Also, here on the homepage, in the header, I can select the store from which I’m going to make my purchases. So if you click on this, it brings up the store that you selected, the hours, services they offer. They offer more details about this store, so this is how their physical location looks. You can scroll this through, you can see coupons that they have and also their weekly ad. So this is specific, I guess, for that location. But you know, basically the catalog, which is pretty cool for such a store.
Let’s do some shopping. If I start shopping and let’s just select a category. Let’s say Projects whatever this might be. I have to say this website is a little bit slow. It was slow today, and it was slow yesterday. This is really cool that you can select projects based on timeline. What happens? Can I select products? Okay, let’s do this one more time. I wanted to show you guys something else. So let’s do product. Okay. You can feel that it’s slow. It’s definitely slow. But it’s nice. What I like is that here on the on the category page, I can already see products that are available for shipping and products that you can buy in this specific location. And if it happens that they don’t have a product, you see, not sold in stores, or they can even acts out you know, it’s not shipped to home. So, I really like it. It’s really easy to understand what you can pickup at that location and what not. You don’t have to click into every location, every product, to really understand that. I think it’s really cool, really clean.
I selected a few products that I want to purchase. I want to show it to you guys. So one of them is going to be this, I don’t even know what I selected here, whatever, Transfer Sheets. And this product, I’m going to ship it home. This product is out of stock at the Cherry Hill location, well I changed my location in the meantime. But anyway, this is available, free, and I can select here other stores. It shows me all the stores and it shows me even the in-stock out-of-stock stores. But I can just simply tackle that toggle and it only shows the stores that have these products available, which is really cool.
I can also change my store, I can type in a new ZIP code. For example 19130, that’s Philadelphia, and then I can see the stores. However here they have a little bit of a bug because you have to un-toggle and re-toggle, in order to recalculate what’s in stock. And here let’s say I select the store Springfield, I can either make this my store or I can just say I want to pickup the product here. So that’s really cool.
So now what are we going to do? We have a few products. We have this one, then we have this product, which is like a second iron basically. So let’s do this. This one, let’s see, do they have it in stock? Okay, it’s out of stock. So we definitely have to ship this home.
Okay, it’s your bag. Let’s check, do they have it in other locations? Limited. You have to visit the stores. So I’ve seen this. They make it really cool. If they have below quantity of three, they do not allow for curbside. They basically show it that they have three left, but they say like visit the store. They don’t let you order it, it’s a safety stock issue here. They might have very limited quantity and they don’t want to oversell to give you a really bad experience. Pretty cool. We’re going to ship it home. This product is shipped to home.
Then this product we’re going to pick it up at the Newark Delaware location. This is a lamp and this product is not available at the Delaware location. But it’s available at different stores. I can select Cherry Hill or here in Philly. Let’s select Cherry Hill, pick it up here. Now what I do not like is that they don’t really have ship to store functionality. It would have been really cool if here it was ship to me or ship to store. That would have been really nice.
I also want to call this out. Some products, for example, this one. They will charge a $25 restocking fee. And they call it out here, just so you know. And they have really nicely explained the shipping and returns, how everything works. I think this is really cool. And they mention the $25 again here. So that is really nice.
Let’s see what we have in the cart. So we have a product, and we have the second one, didn’t I add the other one? Or I just wanted to add? Okay, yeah, I wanted to added it. Cool. So let’s see how everything works in the cart. This product is going to be shipped to home, this product I’m going to pick it up at the Newark Delaware location and this is excluded from coupons, and the third product is available at the Cherry Hill location. So, three products and the thing is I’m not going to purchase this one because it’s kind of the same experience as this one. It’s just, you know, it’s ready for here, ready there. I would have to make two different trips. But you guys get the feeling like what happens, you can make an order for multiple store pickups, which is really good. I really like it. Especially if everything is in your way. However, I would have preferred more for this product to be shipped to this location. This way I can just go once and pick both products up. That would have been better.
I like the design of this website. I think it’s really clean. Really nice. This is my total and the coupon. One coupon per order. Both items are excluded from this coupon Well, it is what it is, not that big deal.
Let’s checkout. So basically it has curbside only. Let’s see if this one applies. So although we have a buy online, pickup in store 20% off, we have the coupon, but some exclusions apply. And probably this is the list of exclusions and they explain you why they have this. It’s normal, you cannot undefinitely discount a product and that makes sense. That was nice.
Let me just show you this one more time. Go back. Okay, I have to click that. Actually, it was there as well. Need help, returns, shipping, pickup, Help Center before you check out. This is really cool. You can get help, let’s see what happens. They take you to a different page. I’m not sure if I’m liking this because I might get lost here and distracted. I might just not purchase because that can happen as well. The Help Center is really cool because they have one all the big categories right up here. FAQ section, additional topics. That’s cool.
Let’s go and checkout. Let’s see how everything works. Two items. Good, good. Shipping address. That’s not my shipping address, I don’t want to ship it here. This is for the other product that I wanted to pick up at that location. So basically, this is how you can do ship to store. This is very confusing, to be honest. I get it. This is not my address, but this is just confusing. They should not do this. I guess if you want these products from your order, you can ship them here, two items. Why chose one? Come on, Joann, you look so good. I was hoping for so much. It takes me back to the cart.
Let’s add back that product that was not available. I don’t know. That was confusing. I’m not sure how this shipping address was supposed to be used with the predefined values of that location. If they would have said here ship to a store and I can select here the store, maybe that would have made more sense. But this doesn’t make sense. I’m going to add here my information real fast, and I’ll be back. So stay tuned.
After I ended my shipping address at the pickup section, I can select the location. I have the location predefined. I cannot change it anymore. But I can add new people here. So I did myself, Virgil Ghic. And, again, myself, Virgil. I can add another person too. But only one. So I cannot add two. It’s interesting. I don’t know if this makes total sense. But anyways. And now I will have to add in here my credit card information. I will add that real fast, and I’ll be back.
So I’m ready to checkout. Let me just show you. This is the final step before I basically place order. I can see here, these are my items that I purchased. It says two items. I would have preferred that here they show me all the items somehow in a way or another. Because here if I hit Edit, I’m pretty sure this is going to take me back to the cart page. Exactly. Back to cart. And instead of checking out just to make sure you have all the products and finalizing my order. Now I’m going to get back, so I don’t really like that. Shipping address is really cool, pickup location, who’s going to pick it up. You know, I told you that only one person can be added. That wasn’t true. You can add a bunch of people. That was very confusing. They should have shown all the people you added. Payment info.
And here you have the Submit Order button. I think the Submit Order button is good that it’s here. But if it would have been even better to be placed here somewhere as well, just as for redundancy purposes. Let’s see, cause I’m just not scroll this far, you know, and then I cannot even place the order. So that’s what I don’t like the location of this button.
Now I’m going to place this order. What do you guys think? Are they going to tell me on the Thank you Page please wait for your order to be fulfilled? Or it’s going to be a simple generic one? Let’s see. Thank you for your order. I really like this confetti, it makes you feel good. I told you this is a really happy website. Don’t miss updates. That’s cool. Orders can take up to 30 minutes to appear. I like this messaging. I totally understand why, technically probably they need to sync information between multiple systems, ERP systems, etc. They do order download once in a while, it’s not real time. And that’s why it takes a longer time. And that’s why you need to wait 30 minutes, although it’s inconvenient. It’s good that they show you. Where if you guys remember on the Staples website and many other websites, basically, they just don’t show anything. Like there’s nothing there. You’re thinking like, hey, I didn’t place the order and you rush to place another order. So I like that they do that.
Yes, I do want to have updates and I really like this. It’s a really beautiful page by the way. I really like it. Very nicely done. I really like this here. The only problem with this is they should have automatically completed with my phone number, because they have my phone number. So they should have done that. Change your number, I don’t want to change it. Further down, we have this info. When your order is ready, within two hours of place, before 5 p.m. local time. I like that they added this message. However, this message should be somewhere up here from my perspective, because some people might not know that they have to wait two hours for this order to be ready for pickup. And they may just rush to the store to pick it up and it’s not ready. So I think this should be further up. So let’s see what happens here. You have no recent online orders. Can take 30 minutes.
Now let’s see the Order Confirmation. Thank you very much for shopping at Joann. Okay, we’re getting your order ready. Thank you for shopping with us. Don’t go the store yet, really good. I love that they call that out. So you don’t rush to the store to, to pick up this product. It’s not ready yet. Shipped to home, this is the product. Really good. Pickup in-store, the store location. Good, pickup location and the products, and the total, and the credit card info, all there. Really good. And more info.
Overall, not bad, there’s a little bit of room for improvement here. I would have preferred if they have the option for shipping products to your store. You might not want it to be shipped home, you just want to pick it up at the store from multiple reasons. Maybe you’re not home, you’re living in an urban area where it’s really hard to make sure that the product doesn’t get stolen if you’re not home. So you just want it to be picked up from the store when it’s ready. Although they kind of do it, like on that page, it automatically completes it with a different store address, my shipping address, which was really confusing again. So there’s a big opportunity there.
But overall, I really like the design of the website. I think it’s really clean, really nice. And they do many things right so far. Well, now it’s when it starts the real challenge. So it’s easy to offer an experience where it all looks good. You can promise whatever on the website. But now it’s the moment when you have to actually deliver on these promises. So let’s see. Now it’s basically 10 a.m., let’s see how long it’s going to take them to fulfill this order when this order is going to be ready for pickup. And let’s see how this entire thing works and how I can actually return these products. So really interested. Stay tuned. I’ll be back as soon as we have the product, we’re gonna head to the store and pick it up.
A few minutes passed by, finally they have the order. So now we can go to My Account. We could have gone to My Orders actually, directly from here. And here, as we can see, we have the listing of all the items that are purchased. These are shipments for pickup, and what’s processing, the location where I’m picking this product up from. I can view the store information. And I can view more about this item.
So now that I view more, I really like how they have it here. They have everything in one location. It’s like a nice bar that tells me the current state of this order. So for example, order was placed, processing, ready for pick up, picked up, same here, shipped home. And information regarding my purchase. So it’s really cool.
I’m really curious how this is going to transform as soon as the product is actually shipped. We can see basically how everything looks. I’m actually wondering how long this product is going to take. If I remember correctly, they did not have that. Right. It didn’t say when it’s going to be shipped, they don’t have an estimated arrival time. Correct, let’s say, just really fast. They don’t. They don’t tell you when it’s going to arrive. This is bad. This is bad. This should tell me exactly when the product arrives. Shipping method, it’s gonna arrive tomorrow, in two days, in a week. Another opportunity.
Overall, it’s a good website. I like more than I don’t like. That’s for sure. So, let’s see. As soon as the order is ready, I’m gonna go there and pick it up. Stay tuned.
I arrived at Joann. And right now I’m going to pick up my order. Probably I should have planned this ahead of time. Because I’m just on my way right now. They make you download this app. So I downloaded the app. And now order placed, vehicle, forward. Let me just record this. So we can follow the entire experience. So Ford, color black. License plate. I have no idea. I’m in the face being before you pick up. Sounds good. See you soon. You arrived? Yes, I did. Tap I’m waiting. Please confirm that you have arrived. If you haven’t, you might not be able to. Okay, I’m waiting. Your order is on the way.
So, right now, let’s see, how long is this going to take? Oh, my goodness, I have so many apps. So start. So yeah, this is the store. It’s in a shopping center. And there’s the little sign for curbside pickup. And I’m wondering how long it’s going to take them to bring out my product. Doesn’t really say much, like what I have to have. Tap I’m done once you receive the order. But that’s about it. It doesn’t give me wait time, which I would like to see. It doesn’t give me that notification that they actually acknowledged that I’m here. Nothing like that. What else is missing? Yeah, now that’s about it.
I have a phone number that I can call. Actually, I cannot see the phone number. Can you see that? It’s just a button. Please give us a call. Not sure. If you tap on it, it pulls up the number. But there’s by default, there’s no number. I think I’m a little bit unfair with them. Because I just clicked I’m here. No, I’m on my way. And I’m here when I arrived. So maybe if I would have given them like, who knows, probably half an hour, they could have detected that I’m coming.
But no, actually they’re quite fast. Look, she’s coming right now. It’s just good. Really fast.
Yes. Hello! Hello! Here you go! Thank you. Have a nice day! Thanks. Bye, bye!
I have to say that was really fast. I’m done. It was really good. Submit the rating. Okay, not now. But this was good. Less than two minutes basically. And being unfair. I have to say this was a really good experience. Joann you did it very well!
Hi! I made another pickup at Joann. And the reason why I did it, is because the first experience was really, really good. And in order to keep it fair, like I’m trying to come back more often, not just once. Place basically two orders or do different products, just to see if there’s consistency. Or you know, like if there’s a bad experience does it happen again.
I placed another order with them. And indeed, they had an issue. One of the items was not able to be fulfilled, they needed to cancel it. And this is basically the product. And the second item was actually good and ready for pickup. I came here today, and I arrived expecting to receive the first product. And I parked, and I go through the entire process, I’m here, whatever. And, clearly, nobody came out. So after like, five minutes or something, I’m like, okay, there are some issues here. Like, they’re really not coming out. And I went in to pick up the product.
The entire thing basically started 15 minutes ago, I walked in, I had to wait in the line, go through the register. All that stuff. And finally, I was able to pick it up. And here’s my product. But I had to do this, because let me show you why. If I’m here in the order, right, so one item cannot be fulfilled, right? I hit that on my way, all that good stuff. So probably you guys can still see it here. And let me just show. You see, I’m still waiting. I clicked this already once, it probably just reseted.
Anyways, what I want to show you is that. So here’s my order, right? So if I click my order, this takes forever to load. Oh, my God. Unbelievable. Let me just see where it’s opened. Okay, here’s where it’s open. The problem with this order is it’s not updated. So I cannot see that this got canceled, because it’s not available, right? So if I come here, and I missed the first email, I’m basically going to go home and expecting both products, but only one of them is going to be in my picked up product. Because there’s no reflection here, right? And the woman didn’t mention, okay, sorry, we couldn’t fulfill both items.
The problem here is that even if I come here and I’m waiting here, nobody comes out. Okay, I understand, it might happen. A really bad experience. It might happen. But if I have a kid in the back I cannot go in. And I might just not be interested in the product to come again. I might just buy from another place. And there’s no button here to cancel this pickup, or ship it instead or something like that. You see? Nothing. And I just refreshed this page. Refresh it. There is no status, it doesn’t show picked up. So that’s really strange, it showed prior ready for pickup, but now it doesn’t show because it’s got picked up. Let’s see if I received any kind of email from them, like confirmation. No.
So anyways, first time, it was 10 out of 10, right? The five-star experience, like the best. I was shocked how good they were. And now I’m shocked how bad they are. So if you average this out, this is not a good grade. Two and a half star or whatever. But first time it was amazing. But this time I’m not kidding. The woman went into the back to pick up my product.
This was my experience for the second time. There’s as I say it often, technology is important, processes are super important. And people must be there to deliver on it. You can have the best processes, the best technology, if your store associates are not delivering on the promise on delivering actually the product, walking out. It’s a horrible experience and it’s a wasted opportunity. So anyways, talk with you guys soon!
I picked up all the orders, all the items got shipped. So let’s review this experience. So this is My Account. I really love this smiley face to be quite honest. Here I can see absolutely all the orders. I can see this one for this order, the product got picked up, the other one got shipped. I can track this order. It’s gonna load. There we go. Nicely products recommended. Different promotions, the full history of the tracking. So I don’t have to go to UPS, USPS figure even out what it is. I can rate my experience. All that is good. Let’s say excellent. Love that. Good. Continue shopping, it takes back to the website. And now if you refresh this page I can give another review. Okay, anyways, so that is good. This is how the list looks like. This is how the entire order looks like. Really nice. Now, let’s go to a few more things I can do. Write the review. Okay, so this just takes me back to a product page, it should open something to write the review. Because now I don’t know what to do. Anyways.
But let’s do a return. So I have a reorder button and I don’t see a return button. Why, why, why? Pickup, pickup. View order. So how do I make a return? Reorder, reorder. That’s not good. So I cannot return these products now. View store info. That’s really cool because you do that. Great. But I want to return the product. And I don’t know how to do it. View order details.
Let’s search for the word return. Return policy. Check this out, 14 days or something. I can already expect. In-store return, return by mail. Okay. Restocking fee. All that is good. 90 days, 10 days, so I should be able to return it online. But clearly, I can’t. So I can only return the product by completing the form provided in your shipment. Oh my goodness, I don’t even know where’s that box anymore. I completely throw everything out. So your order may have been shipped from multiple locations, please verify shipping address. Send your return, please contact customer service. Oh my goodness. So I have to contact them, tell them about my order, and then basically do a return. This is backwards guys. This is backwards. Like who has time for that? And who keeps all those papers? Like, I don’t. Nobody does. So anyways, this is a big fail here. Huge fail. Like, it should be as easy as you know, return, select the products that are eligible for returns and you can return. But that’s not the case. Clearly. I wish I could show you that, I can’t and I don’t have the paper anymore. Probably I threw it out, who has that much space to keep everything.
Overall, there are things that I really like, things that I don’t like. Clearly you cannot make a return. Again, Joann, what you’re doing you’re doing quite well. Make sure that people are trained at the store level, so they always deliver the same experience. And there’s clearly some opportunity on the estimated delivery date, when you make a purchase. Also, huge opportunity for returns, which is absolutely a horrible experience. And now I have to go back and return it. I was hoping that I can just take this product, these orders and return them. Clearly that’s not the situation.
Well, anyways, I’m going to post on the website all the pictures, make sure you go and check it out. Clear high definition pictures of all the email communications, screenshots of pages, we track the speed, the website load. So, a lot of great content, make sure you check it out. See you next time. Take care!
Try WeSupply For Your Team
14-day free trial | No credit card needed