Too many designers and developers feel tempted to use the one-size-fits-all model when it comes to designing eCommerce homepages, but this is foolish in the extreme.
What works for a solopreneur or small business selling just one product or service or a few dozen will not work for a gigantic eCommerce store like Amazon, which sells so many items every day that it has almost too many categories and sub-categories to count!
When designing eCommerce homepages, it’s better to tailor the design to fit the size of your store and, consequently, how many items you’re selling. For instance, it wouldn’t make sense if you’re a small business selling just several items…yet you have an unwieldy flyout menu.
That would bog down the navigation, annoy customers, and then drive off more shoppers faster than you can say, “Bounce rate!” It’d also be a total drag on the user experience.
In this tutorial, we take a close look at designing for small online stores, medium-sized online stores, and huge online stores with thousands of products.
Designing Homepages for Small Online Stores
For the purposes of this tutorial, we’re defining small online stores as those that sell only a handful of items—anything from one to 20. Going by this definition, we can most definitely also include your basic landing page here, where only one product or service is usually featured.
Smaller stores are helped by the fact that there’s a lot less complexity and more clarity because they sell so few items. Therefore, the design ought to mirror this simplicity.
Ask yourself these questions:
- Why make things more complicated for your shoppers and therefore increase page friction?
- Why overload site shoppers when you don’t need a lot of navigation since there won’t be many categories for them to peruse in the first place?
Research backs up the fact that fewer choices for shoppers increase sales. Looked at in terms of web design, fewer choices increase your store’s conversions. The much-talked about jam study illustrates this to a tee: More people bought jam in a shopping session when they only had six choices of jam versus another session when they had 24 choices.
One idea is to lay out your store like you would a landing page, even if you don’t just have that one product or service you want your leads to click through to. The point is that streamlining your homepage design for clarity is what matters most.
Highly effective landing pages eliminate as many choices as possible in the service of funneling leads and shoppers down the page to what should be the one and only conversion goal, which is the call to action button. This way, the page flow is kept intact, and your site visitors have fewer distractions.
When we look at ScalpMed’s homepage, we see them already implementing much of this focus on simplicity, which is reassuring from the user experience standpoint.
Here’s what ScalpMed’s design does right:
- The homepage has no categories at all; you don’t need it when your store’s only selling a handful of men’s and women’s hair treatments
- The homepage’s main focus is on funneling shoppers directly to their online store
- All of the call to action buttons click through to the store
- All of the call to action buttons are beautifully big, feature readable fonts, and have effective color contrast to stand out and catch shoppers’ attention
The homepage already makes perfectly clear that the site only sells scalp treatments, so there’s no point in organizing the handful of products into distinct categories. Once shoppers click through to the store, there is a dropdown navigation of categories, but this is fine since it now helps shoppers pick the specific product they want to buy.
To recap, smaller stores homepages need:
- Few choices
- No product categories in the navigation
- Crystal clear page flows leading shoppers to the page goal
- Bold call to actions buttons
Designing Homepages for Medium-Sized Online Stores
Here, things change markedly because you’re not dealing with just a handful of products anymore. You’re likely designing for the homepage of a store that features up to as many as a few hundred products. You can’t apply the same lessons learned from smaller-store homepage design. So what do you do?
For starters, share more about your business with visitors. Get into the scope of your business in greater detail by telling shoppers things like
- How your service works
- How to use it
- Your company’s philosophy and mission statement
Telling your shoppers about your business is one of the most important ways to establish online credibility, with one survey ranking it as the second-most important aspect of online trustworthiness.
Therefore, if you place this info on the homepage, so much the better, especially since your shoppers want credibility indicators now more than ever, as shoppers will be spending more money with a medium-sized business than on a smaller site.
Of course, a huge call to action button sending shoppers right to your products is still just as essential.
For an example of these design principles at work, we’ll look at Farmdrop’s homepage. Here’s what Farmdrop does right:
- The headline that jumps out at you conveys Farmdrop’s unique selling proposition
- The three points at the bottom of the page clearly enforce their unique value proposition and provide a snapshot of why you should continue.
- The call to action buttons lead you to get more info or get started shopping; they make the next steps clear and obvious. To help encourage you to start shopping, they use an action verb framed with a green button.
Unbounce recommends button copy with actionable verbs to increase click-through rates.
When you scroll below the fold, you see how Farmdrop’s ordering and delivery system works and what areas they serve. Again, this deeper detail works to put shoppers’ minds at ease about your service.
Scroll down some more and you see another trust element – their mission statement. Only after you have a thorough understanding of their value proposition, their mission, and how their service works, do they introduce the actual products.
Significantly, it’s only when you click on the call to action and go to the actual shopping site that you’ll notice a dedicated, horizontal navigation menu with further layers of navigation going to all the different food categories.
This is no accident: Farmdrop wants you to focus on learning how it’s service works before adding items to your cart. By doing this, the company has succeeded in promoting a page flow that supports its goal as an eCommerce company, which is to get the right customers buying their products.
Another thing this homepage does right is use images of people, and introduce you to the farmers. A Visual Website Optimizer investigation concluded that images of people increase trustworthiness on a site since they establish an emotional connection with visitors.
To recap, medium-sized online stores’ homepages should:
- Establish trust with credibility indicators like in-depth info about the business and how it works
- Include very obvious call to action buttons to support the page goal of shopping
- Minimize navigation
- Show high-quality images of people for emotional connection
Designing Homepages for Huge Online Stores
If your business ever gets to the point that it becomes a huge online store with thousands of products for sale, then congrats because you’ve really made it in the e-commerce world! If not, that’s still okay since your agency may one day still be hired to work on designing or redesigning a huge store’s homepage, and you need to know what to do there, too!
With bigger stores is where you’ll see more of a marked difference in homepage design, which makes sense because the transition from a few hundred products to thousands and thousands is a lot bigger than going from a handful of products to a few hundred.
Since you’re selling so many products, your navigation is going to have to be prominently featured directly on the homepage. Your shoppers need to be able to find their way around your giant site easily, efficiently and simply, and good navigation ensures that with no issues at all.
Here’s what huge online stores have to do:
- Include design elements like bigger navigation menus on these huge sites – Research from Jakob Nielsen, a widely cited usability expert from the Nielsen Norman Group, concludes that these flyout or mega menus work very well for sites with a lot of choices (products, etc.).
- Prominently feature sign-in-to-your-account links – This is designed especially for shoppers’ convenience, as signing in allows shoppers to quickly find items that they may have saved in their shopping carts or lists the last time they browsed the site.
- Finally, show prominent displays of discounts – Discounts tend to increase the average order values of shoppers, so it’s wise to show discounts off right on the homepage, so shoppers can’t miss them. This feature is very popular in bigger online stores.
Note how one huge change from the smaller stores mentioned above relates to call to action buttons. On huge sites’ homepages, you’ll generally never see a big, attention-grabbing call to action button, as you would on the smaller sites.
This makes sense since huge stores have too many products to sell. Shoppers first need to navigate to the categories they want before call to actions come into the picture, which, again, is why the navigation is so important and emphasized on bigger sites.
Perhaps no huge store epitomizes this better than Amazon.com, which is the biggest online retailer in America. Glancing at their homepage, we see the stark differences compared to smaller stores.
The flyout menu opens up when you hover your cursor over “Shop by Department” on the top-left of the page, which opens up more layers of navigation into more well-defined categories.
On the opposite side of the header, note the Sign-In/Your Account dropdown.
The Deal of Day is featured prominently with its accompanying discount, and there’s absolutely no shop-related, huge call to action button anywhere on the page! The only call to action is more discreet, almost like a security statement: “Sign in securely.”
To recap, huge online stores’ homepages have:
- Highly usable flyout or mega menus
- Account sign-in links
- Discount announcements
- No shop-related call to action buttons
Designers can never get in trouble when they design for the user experience above and beyond all else. Each design element they place onto a homepage’s wireframe has to be accompanied by the question, “Does this really increase the user experience for the shopper?”
If the answer’s an honest “Yes!” then it should go on the wireframe. If it isn’t, then exclude it.
It’s that simple.
This ties in perfectly to this discussion on what style of design is appropriate for an online store selling just a few, a moderate number, or many products. If your store has only a few items to sell, don’t overload and confuse your shopper with cumbersome flyout menus!
If your store sells a few hundred items, then it’s recommended that you visibly display trust elements by describing what your business is about and how its product or service works.
When you design by putting yourself in the virtual shoes of a shopper browsing the site you’re building, you can better anticipate what he’ll like and won’t like and therefore, design differently for different online store sizes.