7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 13Length: 1.6 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 Learning From Effective Stores

In this lesson, we’ll look at some examples of effective eCommerce stores and discuss the design and usability features of each.

Related Links

2.1 Learning From Effective Stores

Hello. Welcome back to this [UNKNOWN] course on creating a Woo Commerce store theme. In this part of the course you're going to learn about what makes a great store. You'll learn about successful stores and what they include. And you'll also learn about how to structure your store and which pages you'll need to make it work. So let's start by looking at some successful stores. A great store or a great e-commerce site will have five features. First it'll look great and it'll reflect your brand identity. It'll be really easy for people to get around and find things. It'll be super easy for people to buy from you, because that, after all, that's what you want them to do. It'll encourage people to spend their money, maybe even a little bit more money than they thought they'd might have spent when they arrived. And It'll reward those people who engage with your brand, maybe using social media or other means. So let's take a look at some stores that meet some of these criteria. First, let's look at Apple. Love them or hate them, Apple have the great brands with a lot of loyalty from their customers and the brand identity that's reflected throughout all their products. As you can see, their website reflects that identity. It's monochrome, like their products. And it's clean and simple, uses fonts that are consistent with their operating systems. As you scroll down it makes it really easy to find the products that they're are pushing at the moment. And it looks modern and easy to us. Just like their products. Here's another site that looks very different. The Lego website, as you can see, has animations, it has a slider with featured products. It has lots of nice brightly colored pictures and it's easy for kids to find their way around. There's also a products tab to encourage you to buy. But this site is more about encouraging brand awareness. Encouraging kids to engage with that brand. Because once you've got a kid keen on Lego, any parent out there will know, you'll end up spending a fortune on the stuff. He's another site with a great brand identity. The Adidas site reflects the brand really well. It's a nice, clean modern design. The fonts and the colors reflect their brand. And it looks modern, active, fresh. Just what you'd expect from Adidas. Now let's have a look at a site that's easy for people to navigate around. Now, furniture stores and DIY stores can be have really difficult sites to get around but Ikea is not one of those. This website is super easy to find things in. So, if you wanna buy a kitchen simply click on the kitchens tab. And you'll get loads of information about kitchens. With some nice prominent links to further information and product ideas. For those items that aren't in the main navigation, there's an all departments tab. And you could easily find all the departments you might want to buy things from from IKEA. Another site that makes it really easy for you to navigate around is the Converse site. As well as having plenty of products on the front page. You'll see at the top, they have these tabs here. That allow you to find products by the type of customer you are, and also by the type of clothing. And that's all very simple and very easy to find. Now let's have a look at a site that makes it super easy to buy. This is the Pizza Express website. And it, as you can see, as I scroll down it's already detected my location and it's encouraging me to make a booking for lunch today. All I need to do is click on check availability, and there we are. I've made a booking. I didn't have to search for a restaurant. I didn't have to think about the date or the time. It's obviously making some assumptions for me. How much easier could it be to book a table? [BLANK_AUDIO] Now let's find another site that makes it easy for people to buy. The Amazon site, one of the biggest e-commerce sites out there. Generates millions if not billions in revenue every year. And here we've got the one-click option. I've signed in here. If I want to buy this book, all I have to do is click that and I've got it. It turns up on my doorstep tomorrow. I didn't have to put in my credit card details cuz they're already saved. I didn't have to say anything about the delivery type that I want. All I do, I click one button, and that's it. I've bought the item. Super easy. [BLANK_AUDIO] Now let's have a look at another site that makes it super easy to buy. It's the Etsy website. And I'm on the page for an individual product. Over on the right hand side we have a nice obvious box with some summary information about the product outlined in green. So you can't miss it. And a nice obvious Add to Cart button. Using colors for your primary buttons. Your Add to Cart button or your Buy Now button that are different from the colors elsewhere on your site. Will draw people's attention to those buttons and make it more likely that they'll buy from you. Now lets have a look at a site that encourages you to spend some money. The target website, here you've got a promo code and you've got the bed and bath sale with information. Now I might have come here looking for something completely different. When I see this, I think, oh, I can get 20% off some bedding. Although, notice that it's up to 20% off. But, you look at it quickly and assume it's the maximum discount. And I might click on that and buy some bedding, even though I haven't been intending to buy that when I came here. [BLANK_AUDIO] Now here's another site encouraging you to spend your money. The John Lewis site has attractive full width banner images encouraging you to click through and buy certain items. So here you've got new season, encouraging you to have a look at what's come in. If I scroll down you'll see there are more links through. to products and to lines that they're promoting at the moment. Now finally, let's see some sites that encourage people to engage with the brand. Some of the best sites at doing this, are those for restaurants and coffee shops. The Starbucks website has a nice, prominent image of a coffee, making me want to buy some coffee. And also gives me information about an offer that they're running at the moment. But, what's more interesting is if I scroll down a little bit. There's information about the loyalty program, and this is upfront and center on all their international websites. Encouraging you to sign in, register a Starbuck's Card, which gives you some discounts but also gives them your information so they can keep in touch with you. Here's another site that does this really well. The YO! Sushi web site is all about social. If you have a look here. It's got their latest tweets. It's got videos. People can upload their own videos using this link. It's got photos. People can share photos. And then finally, there's a club that you can join. And you'll get information about offers, about new restaurants, and so forth. But, this website isn't just promoting their restaurants and their food, it's promoting the idea of Yo! Sushi being something you wanna to join, something you wanna to be a part of. And encouraging you to contribute your own content to that website. So, those are some examples of some websites that do this really well. Obviously, your store is going to be different from these. You've got your own products and your own brands, but we can incorporate some of these ideas as we work through this course. [BLANK_AUDIO] So, let's take a look at the structure of your store and what types of page you'll need to create. To help your customers to navigate around your store and to buy from you. Well, the first thing you'll need. It is obviously a home page. You've seen some great examples of home pages here so far. Your home page could include images, sliders, social content, links through its content deeper in the site, offers. Anything you need it to. To encourage people to buy from you, and also to promote your brand. But what you'll also need, are some other types of pages. And let's have a look at some examples. Here's an example of a category page. The Ikea website is designed to sell hundreds of products, and categorizing those can be quite complicated. But I think they've done it really well. Here, I'm in the bedroom category, inside that I'm in wardrobes and bedroom storage, and drilling down another level in wardrobes. And on this category page you've got an opening section with some information about their products. And what they think's great about it and then you've got an image of each product in that category. I can hover over the image to find out a little bit more about that product, or I can click on it to go to the individual product page. Now here's another example of a category page. The Converse website has got lots of different types of, of category page. This is a, a range, so they're classic colors page. So these are the classic Cons that you or I might buy, I know I wear them. And I can scroll through this and see images of lots of products that are in that category. Now one of the great things about setting up an e-commerce store with WooCommerce and with WordPress is obviously because you storing all your products in a database. Every product can be in multiple categories, so they'll all appear on lots of different category pages. Now let's have another look at a product page. Here's Etsy, I already showed you another product page earlier. But this is an example of how to make a product page really attractive, clear, easy to navigate. And making that Add to Cart look nice and obvious. And as you can see here, there are also some social elements, so people can Tweet about it, or share it on Facebook, and they can also pin it. The next type of page you'll need to create is a checkout page. Here's the Adidas website again, and here's their checkout page. Nice, clear, easy to navigate. This is my bag. What I've, I've put something in my bag, a hoodie. I can select how many of them I want. It's telling how much it's gonna cost, it's also telling me the delivery charge over here, i've got the option to enter a promotional code. And then when I'm ready to buy, nice big obvious button here. Checkout both on the left and on the right. It's really important that once people are in this purchasing funnel. To make it as simple as possible, and as easy as possible for them to make their way through that, and to complete the purchase process. You don't want to lose your customers when they've selected something. And they haven't checked out yet. Finally, the last category of a page that you'll need to be creating is a search page. Now, this on the John Lewis site is the results for search that I've done for TV's. So you can see that the search page doesn't just show me the actual products, it also includes some information on TV's. Now, that's outside the scope of this course, but it's something you might want to think about. So those are the main categories of page that you'll need to create for your store. And that we'd be working on as we go through this course. First is the home page. Then we've got category pages for your product types, and maybe your customer types, and the lines that you're selling. Then there will be individual product pages for each product. The check out pages, storing people's basket and encouraging them to buy. And then finally, the search page, encouraging people to buy when they've made a search for products in your store. That's it. In the next lesson, you'll learn about the WooCommerce files and how they populate your site's pages. See you next time and thanks for watching.

Back to the top