While there’s some debate about who gets credit for the world’s first eCommerce transaction, there’s no doubt that in the years since, eCommerce has exploded. In fact, research from Statista projects that eCommerce revenue will grow to almost half a trillion US dollars by 2020. With more and more new businesses starting, and existing businesses moving online, the market continues to heat up with merchants looking for ways to secure an advantage over their competition.
One of the best ways to create and sustain a competitive advantage isn’t necessarily through superior products or pricing. Instead, it’s by using design to create a store that’s both visually stunning and built for conversion. If you’re just starting out in eCommerce, this process might seem a little daunting, but you don’t have to worry. In the first part of this article series, we cover five must-have design elements for creating a beautiful and sales-focused online store. We’ll also give you guidance on how to implement these features, along with examples from live eCommerce sites.
The second part of this article series will include five more must-have design elements. We’ll update this article with a link to it once that’s published.
Let’s get started.
Free PDF Download: Click here to download this article so you can reference it later when designing your online store.
A logically organized and well-planned top navigation menu is one of the most important components of a high converting and visually attractive store.The ultimate goal of your menu is to make it as easy as possible for shoppers to find what they want in your store and checkout. For it to do that, though, you need to invest some time in planning out your menu before you start building anything.
It’s often helpful to think about your menu as a table of contents for your site’s underlying information architecture and hierarchy. For most eCommerce stores, this means that your menu should be logically informed by the structure of your product catalog, and more specifically, your category structure.
A good first step in planning your menu is to analyze your product catalog and map out how you want it organized, with your menu in mind. We’ll likely publish a post dedicated to catalog design and merchandising in the future. For now, the best advice we can give you is to start with broad categories and become more focused as the need arises.
Here’s an example of how this would work for two different industries:
A fashion brand may start with two broad categories like Men’s and Women’s. From there they can introduce subcategories like Men’s -> Shirts and Women’s -> Blouses. A fitness company might start with two broad categories like Strength Equipment and Conditioning Equipment. From there they can introduce subcategories like Strength Equipment -> Barbells and Conditioning Equipment -> Medicine Balls. From there, both types of businesses can get more specific if needed.
Once you have your category structure down, it’s time to think about how it will be reflected in your menu. For most merchants, the top level of your menu should cover your broad/general categories and include clear, meaningful labels.
The goal here is to make it very easy for a shopper to scan your site, understand what you offer and home in on the product that they want to buy. To help with this process, we recommend limiting the number of top level categories you create and list in your menu. Too many and you risk overwhelming the shopper. Too few and a shopper may bounce before buying because they don’t think you sell the type of product they’re looking for.
Here’s an example of a clear and effective menu from Zoey customer Aaden:
If you have a relatively simple category structure, you will likely be fine using a standard drop down menu. When a shopper hovers or clicks on a main menu item, a list of subcategories will drop down, allowing the shopper to move further into your site. Here our advice is the same. Keep it simple by limiting the number of subcategories you list and use clear subcategory labels. The last thing you want to do is overwhelm shoppers with a needlessly long category drop down.
Here’s an example of short but sweet dropdown menu from Zoey customer Best Brilliance:
If you have a more sophisticated category structure, you may be better served by a mega menu. This menu type displays your subcategories in a tabular format, allowing one main category to have a dozen or more subcategories display underneath of it without affecting usability. However, just because you can fit a large number of subcategories into a mega menu doesn’t mean you should.
It’s far too easy to get carried away and force your users to wade through dozens of links. This can lead to analysis paralysis and inaction on the part of the shopper. It also makes your site look unprofessional. Again, the key here is balance. The role of the menu is to make life easier for the shopper. Provide just enough subcategories to be useful and nothing more.
Here’s an example of a well thought out mega menu from Zoey customer Aaden:
Additional Menu Design Tips
Make your top menu links clickable.
List your subcategories under multiple broad categories if it makes sense for your catalog. In the Aaden example above, Lamps could logically fit under both the Lighting and Furnishings categories.
Follow design conventions. Humans adapt to what they do all of the time. Introducing a novel or unique form of navigation will only confuse shoppers and negatively impact sales
Consider creating an On Sale category and including it in your top level navigation to appeal to price conscious shoppers.
Use link colors that contrast with the background color to make them stand out visually
Don’t make your menu unnecessarily large or small. This looks unprofessional and confuses shoppers
Position your site search bar near the menu. This is where shoppers expect to find this functionality. Shoppers are far more likely to bounce than hunt around for you search bar
Action Items for You
Analyze your product catalog and make any necessary changes to its structure
Determine which categories and subcategories you want to include in your menu
Review the menu’s visual design and confirm that it looks good, matches your brand and is easy to use
Monitor the performance of your menu by using a heat mapping tool like Crazy Egg or another analytics tool and adjust as needed
Product filters are one of the keys to effective online store design. A variety of studies have found that using product filters can increase conversion rates. For example, this article from Inc notes that buyakilt.com saw a 26% increase in their conversion rate by simply adding product filters.
If you’re not familiar with the term, a product filters element essentially takes your product attributes, options and swatches and visualizes them on a product or category page. Typically product filters appear on the left sidebar of a page or above the product grid in the middle of the page. FIlters are particularly useful on broad category pages as they allow shoppers to whittle down the list of products to find exactly what they’re looking for.
Before we jump into product filter recommendations, it should be noted that many other SaaS eCommerce platforms only include this feature on their most expensive enterprise plans. Zoey provides this feature to all of our customers, regardless of the plan they choose. Learn more about Zoey and start a 14-day free trial!
As we mentioned above, product filters are essentially visual representations of your product options or attributes. For example, if you sell t-shirts, you probably sell your designs in multiple colors and sizes. Each of these is an option/attribute and product filters allow shoppers to literally filter your catalog by any of these attributes. It’s easy to see how this feature is helpful for navigating large product catalogs. But before you get too excited and start adding filters to your store, it’s important to do some legwork first.
Much like with your menu design, you want to identify the best way to organize your product options and find a balance between offering too many and too few. Remember, the goal of product filters is to aid in navigation, not confuse the shopper.
It’s very difficult to give a general recommendation on the number of attributes you should use in your filters as it totally depends on your catalog, industry and customer behavior. As a general rule of thumb, if you find you’re asking yourself if you need to include an attribute, it’s probably best not too. Put yourself in the shoes of the shoppers. Would this additional attribute help them better navigate your catalog or would it just end up being confusing?
Now let’s look at a few recommendations for creating your attributes and including them as filters.
Much like with menu design, your attribute labels should be clear and easy for the shopper to understand. Unless you’re a big brand, it’s better to avoid proprietary language like the name of a clothing line and instead focus on common terms like size, color, and fabric type.
Category Specific Filters
Most of the time shoppers will want to filter based on attributes that are specific to a category, not broad filters across your site. A broad filter might be price and a category specific filter might be freshwater fishing lures versus saltwater fishing lures. Be sure to create and include category specific filters where relevant.
This is similar to category specific filters, but if your products feature thematic attributes like season, holiday or style, these should be included as filters where relevant.
Promote Important Filters
If there are certain filters that are particularly important to filtering a category, then you should promote these to the top of your filters list. A good example of this could be bicycles. To a shopper, the type of bicycle (mountain, road, single speed) could be far more important than filtering on price or brand. You don’t need to do this for every category. Only promote filters if it will genuinely help the shopper.
Put Usability First
Keep the usability of your filters in mind. It should be very easy for shoppers to select filters, navigate through your filter list and apply multiple filters. It should also be obvious as to how the shoppers can clear the filters and return to the entire list of products. All of this functionality needs to work well on mobile in addition to desktop.
Action Items For You
Determine if you’re eCommerce platform supports product filters or if you can afford to upgrade to the plan that does
Activate product filters if you haven’t already
Review filter labels with the goal of simplifying and clarifying where needed
Consider introducing category or thematic filters if applicable
Review your catalog and determine if filter promotion is needed
Strategic Use of Conversion Elements
As we hinted at in the introduction of this article, eCommerce is not a new industry by any means. After over 20 years of online sales, the industry has developed variety of design elements that when used in conjunction with one another create a professional looking online store that also converts at a high rate. Some examples of these elements include up-sells, cross-sells, and related products. Let’s take a quick look at each of these elements and learn how you can use them in your own store.
The practice of up-selling involves placing higher value products on a given product page and prompting the shopper to buy one of these higher value items. So, if a shopper is looking at a bicycle that costs $1500, you might also display three options for other bicycles that cost slightly more, say around $1750 each. If a customer takes action on your up-sell then you’ve just earned yourself $250 more than you would have otherwise.
Multiply this revenue increase across hundreds, thousands or more orders per year and you can see the potential impact of up-selling. To ensure your site is driving as much revenue as possible it’s important to configure up-sells for as many products as possible. Up-sells widgets are also a nice design element that gives shoppers a peek at products they might otherwise overlook.
Now that you know about up-sells, let’s look at some considerations for setting them up:
- Choose similar products. For example, if a shopper is looking at a winter coat, you want to up-sell them on a more expensive winter coat, not a really expensive swimsuit.
- Limit the number of alternative products presented the user. Three is generally a good place to start
- Work in best sellers when you can
- Experiment with pricing
- Automate this process with an app like Nosto if you can
Cross-selling is very similar to up-selling in that the goal is to drive up average order value. Where cross-selling differs from pure up-selling is that instead of trying to get a shopper to select a totally different product, you try to get them to add a complimentary product to their order. 99.9% of the time the cross-sell is presented to the shopper when they’re checking out.
A good example of a cross-sell is when you buy a computer, you’re often promoted to purchase an extended warranty or something inconsequential like a printer or networking cable when completing your purchase. Much like up-selling, the value of cross-selling is realized with scale.
As with up-sells, there are some general considerations to keep in mind when setting them up:
Your eCommerce platform will likely limit cross-selling to the checkout process. Just something to bear in mind.
You will have more success with products that are related to the main product. For example, if a shopper buys a bike, then a good cross-sell might be a bottle cage or a tire patch kit.
The cross-sell product should be of a significantly lower price than the main product. The goal here is to take advantage of impulse buying and expensive products actively work against this impulse.
Experiment with the products and price points you try to cross-sell
Automate with an app like Nosto
Related products essentially have the same goal as up-selling and cross-selling. They’re designed to increase average order value. The difference is that related products are very often products that make sense when purchased together. A good example of this might be a when a shopper buys a blazer they can very easily add a matching pair of slacks to the order. To make purchasing related products easier, they’re very often presented with a checkbox for quickly adding it to the cart. Similarly to up-sells, related products widgets are a nice design element that gives shoppers a quick look deeper into your catalog.
Now that you know how these work let’s look at some recommendations for setting them up right:
Start by setting your related products to take advantage of products with a natural relationship like a blazer and slacks or a whiteboard and markers
Use Google Analytics or your platform’s reporting to identify products that are often purchased together and set them up as related products
Automate with an app like Nosto
Measure and iterate on your product relationships
Luna Metrics put together a very detailed article about identifying related products using Google Analytics that we recommend checking out.
Trust and Social Proof
The role of both trust and social proof are often overlooked components of a professional looking and high-converting eCommerce website. Right now, you might be asking yourself what we mean by trust. Trust as it relates to eCommerce is any element you can add to your store that gives shoppers additional confidence in the reputability of your business.
Here’s what that might look like for you:
Displaying the badge of your SSL certificate to give shoppers confidence in your site’s security. The same process should covered for PCI compliance.
Displaying badges for any professional organizations you belong to like the Better Business Bureau or any certifications you have that are relevant to your online store
Adding these badges is usually a very simple process of copying and pasting an HTML snippet to your site footer.
Here’s a nice example of both trust and industry affiliation badges from Zoey customer Furnillion:
You can also create a sense of trust by putting some effort into your About Us and/or Company pages. Use your About Us and/or Company page to tell the story behind your company and share the values that inform your business. What inspired you to get into the industry? What motivates you to come to work every day? What are your accomplishments? These pages are essentially a blank canvas for you to sell yourself and your expertise to potential shoppers.
We recently redesigned our website with an emphasis on better telling the story behind Zoey and have received tons of positive feedback from customers and leads. You can view our About Us page here: https://www.zoey.com/about-us
Social proof is a similar concept with regard to the end goal. You are trying to create a sense of trust in your brand that leads to less uncertainty and more purchases as a result. There are many different ways you can work social proof into your eCommerce store but most businesses will be best served by focusing on two: product reviews and customer testimonials.
Product reviews are hands down one of the best design elements you can work into your online store. Econsultancy found that 61% of customers read reviews before making a purchasing decision. So they can be a very effective tool for driving sales, because they provide unbiased feedback directly from customers. These reviews are also great for SEO as customers naturally use long tail keywords and natural language when discussing your products and services.
Here’s an example of reviews in action from Zoey customer NIHON ICHIBAN:
Action Items For You
Add trust and security badges to your site
Consider joining valuable professional organizations and adding their badges to your site
Add customer reviews to your site if you’re not using them already. Yotpo is a great app for that. It also has features that will get more reviews for your product
Strategic Placement of Sales and Discounts
Sales and promotions are the lifeblood of any intelligent eCommerce business. There’s no better way to save abandoned carts, drive revenue in a slow month or encourage shoppers to buy more per order than with a well-thought out promotion. The problem is that too many store owners overlook the design aspect of their discounting strategy. Visually communicating your offers to site visitors is a no-brainer way to improve their effectiveness.
Your homepage is a great place to promote your sale or discount. If your homepage design features a large banner image or image slideshow, use this real-estate to let site visitors know about the discounts and promotions you’re currently running. A big bold image with a descriptive text overlay is sure to capture attention and if you have a slideshow, you can run multiple sales and dedicate a slide to promoting each.
Here’s a nice example of this in practice from Zoey customer Furnillion:
According to BI Intelligence, unexpected or high shipping costs are the number one factor contributing to abandoned carts. This makes promotions around shipping costs an effective tool for driving sales and reducing abandoned carts. Much like with product or category based sales, you can advertise your shipping promotions in your banners and slideshows or just strategically mention the offer where relevant on your site.
Here’s an example of advertising a shipping offer with a banner image from Zoey customer Le Pain Quotidien:
Here’s an example of a simple text element advertising free shipping from Zoey customer Shop601. It’s a subtle design element, but by placing it prominently on the all pages of the site, it’s hard to miss.
Determine if your design supports promoting sales and other offers on your homepage or other site pages - consider changing your theme if it doesn’t
Review your catalog, customer data and product performance to create product based offers
Create banners advertising these offers and place them strategically throughout your site
Determine the cart threshold that will allow you to support free or reduced shipping
Craft an offer around free or reduced shipping and publish it visually on your site
If you’d like to grab a PDF download of this post so you can reference it later, just click here.
If you’re looking to start a business or want to move to a more flexible, powerful eCommerce platform, Zoey may be right for you. Zoey allows anyone to design a stunning store using code-free design tools, sell to mobile shoppers with a free mobile design and shopping cart, and launch effective marketing campaigns that drive traffic and sales.