The ultimate guide to designing ecommerce websites

In the U.S. alone, e-commerce sales are expected to reach over $434 billion per annum by the end of the year; European sales are expected to hit nearly $250 billion per year by then, too. That’s a lot of money, and doesn’t take into account the rest of the world.

E-commerce is big business, and has been for a long time. While e-commerce sites were once treated with suspicion by many internet users, it’s become as common as checking email. While I’m sure there are some internet users out there who have never made an online purchase, they’re getting rarer by the day.

As a designer, you can’t afford to ignore good ecommerce design. Below you’ll find a comprehensive guide to creating great ecommerce sites, complete with examples.

 

Multi vs single product sites

One of the biggest differences in how to approach designing an ecommerce site is based on whether it’s a multi-product site or a single-product site. A site selling tons of products has very different needs compared to one selling only a single item (whether that be a physical product or a virtual one).

Single-product sites are often a single page. Sometimes they’re formatted like a letter (I think we’re all familiar with those, and while they’re not the best style from a design standpoint, they do tend to work in many industries).

Other single-product sites have multiple pages (particularly for higher-end and more expensive products), but are still relatively simple from an information architecture standpoint.

Site selling multiple products, on the other hand, virtually all have multiple pages. Just how many largely depends on the number of products beig sold. Smaller sites might only sell a handful of things, and therefore may only have a handful of pages. Other sites may sell thousands (or tens of thousands, or even millions) of items, necessitating many, many more pages.

Consider carefully how the information on these sites should be organized. A site with thousands of pages is going to have significantly different needs and systems in place to keep everything consistent and organized than a site with only a few pages.

 

The design process

While the design process for an e-commerce site isn’t terribly different from the process for any other kind of site, there are some additional things to consider and to figure out prior to actually designing and throughout the process until (and after) launch.

First of all, if it’s an established product line or store, then there are likely already going to be a lot of design constructs in place. Find out what these are right from the beginning.

Another thing to consider is existing product photos, and whether there is a budget for new ones. If every product photo you’ll have to use has a very minimalist look, then designing a very ornate site may not work (or may take some extra time to make work), and vice versa. Better to find out from the beginning than to wait until the design is finished only to be provided with photos that clash horribly (and therefore make the products themselves look bad and hurt the bottom line).

The sales funnel and how many pages exist between the site’s home page and the final checkout page is also a vital consideration, and should be mapped out from the beginning. But more on that later.

 

Three things every online store needs

A lot goes into building a successful online store, but there are three key elements that every site needs:

Trustworthiness: every ecommerce site out there needs to build a sense of trust among shoppers. If a shopper doesn’t feel like the site (and the merchant by association) is trustworthy, they’ll take their business elsewhere.

Simplicity and ease of use: an online store needs to be simple in the way that it functions, if not in the design itself. At no point should your shopper be left wondering what to do next.

Transparency: transparency goes hand-in-hand with trustworthiness, but it goes further. Transparency means you need to make sure that things like contact information and the merchant’s policies for things like shipping and returns are easy to find. It can also be tied into things like customer reviews on the site, and openly addressing any criticism that may come the merchant’s way.

Make sure that these three things are incorporated into every ecommerce site you design, along with the following best practices.

 

Best practices

There are tons of things to keep in mind when designing an e-commerce site. Some are dependent on the type of site, the company, and the products being sold. But there are others that are applicable to almost any site or product.

Here are some of the best practices you should keep in mind, most of which apply regardless of the type of product you’re selling.

Big images and lots of them

People want to see the products they’re buying prior to making a purchase. And since shopping online prevents them from seeing in person what they’re buying, they need images that give them as close to the same experience as possible.

That means there should be photos from every possible angle, and that those photos should be large (and preferably zoomable). There are a few ways to handle zooming on images, but the standard has basically become a magnifier over the image, displaying the zoomed image on the side or directly over the main image.

As a designer, make sure that you design product pages in a way that allows for a lot of images to be displayed.

Now, what if you’re selling a virtual product? How do you handle photos then? Screenshots are generally your best bet, and again: lots of them. People want to know what they’re buying before they buy. Never lose sight of that.

The ModCloth site, for example, generally features 4-6 images of their clothes, and even includes video at times. The images aren’t huge, but they do include a zoom feature for getting a better look.

modcloth

Highlight scarcity

Have you ever noticed how Amazon displays how many of an item are left in stock? It’s because scarcity compels people to buy. If someone is on the fence about purchasing a product, but they’re afraid it may sell out before they make up their mind, then they may just go ahead and buy it to prevent missing out. Especially if it’s a deal.

Draw attention to related products

Unless you’re only selling a single product, every product page should include links to other, related products. Selling dresses? Include links to matching shoes, handbag, or other accessories.

These should be given a prominent spot on the page, and be integrated into the design from the get-go, rather than something tacked on at the end. Here’s one example:

oak street

Make it easy to share

Social media sharing functions should also be made a prominent part of your product page design. Word of mouth is a powerful advertisement, and making it easy for customers to share their purchase (or pending purchase) is a valuable way to get essentially free advertising.

Make sure that you integrate share buttons on the product pages, as well as after the visitor has made their purchase.

Ensure product descriptions are detailed

A bad product description can make or break a sale. While as a designer you may not always be the one writing those descriptions, you should make sure that your design can elegantly handle descriptions of more than a paragraph without looking awkward (or breaking all together).

One solution here is to use a mini description or summary next to the product (and near the “add to cart” or other call to action button), while including a longer description further down the product page. Another option is to use a “read more” link that either opens a modal window to reveal the full description or reveals it in-page, moving other content down (or creating a smaller scrolling section). Just keep in mind mobile usability when designing these things.

The 20Jeans website is a great example of detailed product descriptions done right.

20jeans

With the basics overlaid on the product image and a more detailed description found below, complete with accordion navigation for things like care, materials, style & fit, and shipping & returns.

Simplify checkout

The checkout process should be quick and easy. Ideally, you’d have a single page that lets buyers review what’s in their cart and enter their billing and shipping information, with an additional page to confirm their order before placing it.

Some sites create a longer checkout funnel, with a page to review the cart, a page to enter shipping information, a page to enter billing information, a place to review the order, and an additional page to confirm before placing the final order. A checkout process that’s long and complicated can deter customers and make them abandon their cart.

One page you shouldn’t skip, though, is a page for customers to review their entire order before finalizing it and placing it. Shoppers are used to this step, and may hesitate more if they don’t have a final page to review before placing the order.

Don’t require an account

Requiring an account to make a purchase is generally a bad idea. There are exceptions, of course (like if there’s ongoing support included with the purchase), but in general, it’s just a barrier to making a purchase.

Instead of asking for shoppers to sign up for an account prior to purchase, give them the option at the end, after their purchase is complete. And if an account is absolutely necessary, integrate the signup with one of the other pages in your checkout process, like the billing or shipping information page.

 

The sales funnel

The sales funnel is one of the most important design considerations for any ecommerce site. The funnel generally consists of a home page, a search results page (or browse/category page) filled with products, individual product pages, and the checkout process.

The point of the funnel is to usher shoppers from one part of the site to the next, closer to the point of completing the sale.

There are a number of different ways to create the sales funnel, and it’s largely dependent on the type of product you’re selling and the selling price (a higher price may require more coaxing).

One technique that can be particularly effective on a single-product site is to get visitors in the habit of clicking through to the next step, throughout the sales funnel. So rather than having one long page describing the product, have a series of shorter pages that the user clicks through, leading directly into the checkout process. It develops a habit for the user of clicking through to the next step, lowering any psychological barriers that may exist.

 

Calls to action

The call to action on any ecommerce site is absolutely one of the most important elements of its design. Without an effective call to action, your sales are going to seriously suffer.

Now, there are two kinds of calls to action that you’re likely to find, depending on which kind of site it is. Ecommerce sites selling multiple products are going to have calls to action on each product page, as well as possibly a call to action for each product on search results or browse pages.

In either case, most are going to include terminology like “add to cart”. On occasion, you might find a call to action that says something like “buy now” instead.

Ecommerce sites selling a single product may have more than one call to action on the site, often with one on each page (or multiple in various places on a long single-page site).

 

Product pages

Your product pages need to create an experience as similar to shopping in person as possible. That means plenty of information about the products. Photos, descriptions, and specifications should provide as much detail as possible.

Here are some great product page examples to check out:

Levels

This Levels product page offers minimal information, but it’s everything that’s needed. It also offers just a couple of photos, but again, it’s all that’s necessary. The “Add to Cart” button is prominently displayed, along with related products.

Levels

 

Victoire Boutique

The Victoire Boutique product pages are simple, with a focus on the product image. There’s also a focus on related products.

Victoire Boutique

 

Article

Article offers up simple product pages with a photo slideshow of product images. The “Add to Cart” button is prominent. Product details are given immediately below the description, while similar products are displayed below that.

Article

 

Navigation

There are generally two main ways to navigate an ecommerce site: menus and search. Menus often incorporate drop downs with sub-menu items, depending on the size of the site and how many different kinds of products they sell.

While many sites incorporate basic search, ecommerce sites need more granular search and filtering options in most cases. Something like this:

kidrobot

These filters allow shoppers to narrow down the product options, based on common features.

 

Quick view

You should definitely consider incorporating a “quick view” feature into your website. This lets shoppers view a limited selection of product details right from browse or search results pages (usually in a modal window), rather than having to click through to the product page. Most of these also allow users to add a product directly to their cart from the quick view:

Anthropologie

Anthropologie’s Quick View feature pops up in a modal window that includes basic details, pricing information, sizes, and the ability to add a product to the shopper’s cart (“basket” in this case).

Anthropologie

 

Free People

Free People’s Quick View has very limited product information, with just photos, reviews, pricing, color, and size information, plus the ability to add the product to the shopper’s basket.

Free People

 

ModCloth

ModCloth’s Quick View feature offers a full description, plus product details in a tabbed format. Photos and pricing information are also included, plus the ability to add products to the shopper’s bag.

ModCloth

 

Selecting an ecommerce platform

There are tons of ecommerce platforms out there for you to choose from, so how do you go about choosing the right one for your (or your client’s) store?

There are quite a few things you should check out prior to deciding. Some of these include:

  • What programming language the platform uses. This is particularly important if you plan on doing a lot of customization, but it can also be important depending on what web host you plan on using (support varies widely for various languages).
  • Whether the platform is free or paid. There are tons of both kinds of platforms out there, with good choices in both camps. Paid platforms often offer better support than free ones, but otherwise there are fully-featured solutions in both categories.
  • Whether it supports the types of products you plan to sell (digital vs. physical products, for example).
  • The payment gateways the platform supports, particularly if you’re already committed to using a particular one.
  • The shipping services it integrates with.
  • How easy is it to customize? How many options does the platform have to customize out of the box? Will you have to dive into the code every time you want to change something or can you make changes from the admin area?
  • What’s the support like? Is it entirely community-driven or is there support straight from the developers? How much does it cost?

Take your time to explore the options out there, and figure out which platform best meets your needs.

 

Free platforms

There are dozens of great ecommerce platforms out there, with some paid and some free. The paid ones generally offer more support, and sometimes more features than the free ones, though there are some very full-featured free platforms, too.

PrestaShop

PrestaShop has well over 300 features, including one-page checkout, webservice integration, inventory management, downloadable product support, and much more. It’s free to download and totally open source.

PrestaShop comes with full documentation and tons of resources to get you started. There are (paid) modules to extend its functionality, as well as themes (also paid) if you don’t want to design your own site.

prestashop

 

Magento Community Edition

Magento Community Edition is the open source arm of Magento, which is used by more than 240,000 merchants worldwide. It’s scalable, so it can grow with you, and it’s flexible to meet your needs.

There’s plenty of community support to help you if you get stuck, as well as full technical documentation. There’s also a host of extensions available (and of course you can create your own).

magento

 

Spree Commerce

Spree Commerce is an open source platform that gives you full control and customization resources. It’s fully documented, though of course there’s paid support and training available.

Features include flexible and responsive site design right out of the box, with support for live video and animation. It has a comprehensive API for just about any aspect of the system, giving you even more control.

spree commerce

 

Zeuscart

Zeuscart is a PHP/MySQL based ecommerce platform. It’s simple to use and easy to customize without a ton of IT skills required to create a basic storefront.

The responsive admin dashboard is powered with Twitter Bootstrap, while the front end has a clean design that’s user friendly and looks great, with a large collection of UI components that work on all major browsers (including mobile devices).

zeuscart

 

OpenCart

OpenCart offers a ton of features, including support for unlimited categories, products, and manufacturers, support for multiple currencies and languages, free documentation, and more. It can also incorporate over 20 payment gateways and more than 8 shipping methods.

OpenCart also offers up support for product reviews and ratings, downloadable products, multiple tax rates, a coupon system, and much more. It’s fully templatable, with a usable default template right out of the box.

opencart

 

osCommerce

osCommerce has more than 7,000 free add-ons, and has a network of over 260,000 store owners and service providers. There’s an active community for support and help if you run into issues, as well as free and commercial support.

osCommerce has been around for 14 years, so they have a strong foundation on which to build your business. There are templates and themes available, too, so that you can customize the look of your site without having to start from scratch.

oscommerce

 

Zen Cart

Zen Cart is a free, user-friendly, open source shopping cart with tons of plugins and addons to extend its functionality. There are add-ons for admin tools, marketing, payment methods, pricing tools, and much more.

Zen Cart has excellent documentation, making it easy to take advantage of all the functionality it offers. There’s also a showcase of sites created with Zen Cart to inspire you.

zen cart

 

simpleCart(js)

simpleCart(js) is a free JavaScript shopping cart that you can integrate with your existing website. There’s no database and no programming, just basic HTML knowledge required.

It’s got an incredibly flexible design, supports multiple payment gateways (including PayPal, Google Checkout, and Amazon.com payments), and supports international languages and currencies. It’s also high performance, with an incredibly small footprint, especially compared to a lot of large ecommerce platforms.

simplecart

 

WooCommerce

WooCommerce, from WooThemes, is a great WordPress ecommerce plugin that’s got tons of features. You can sell anything with WooCommerce, including both physical and downloadable products. It even works with affiliate products.

It works with PayPal, BACS, and COD payments in the basic WooCommerce package, with tons of extensions for specific payment gateways. There are tools for managing inventory (digital or physical), shipping options, coupon campaign support, sales tax, and more. And there are great reporting features so you can keep track of incoming sales and reviews, stock levels, and more, right from WordPress.

woocommerce

 

Ubercart

Ubercart is a full-featured shopping cart solution for Drupal. It’s great for building a community around your store. You can sell premium content, paid file downloads, physical goods, and more.

It’s built as a module package, making it easy to integrate it fully with the rest of your Drupal site. And there are additional modules and themes to extend Ubercart’s functionality even further.

ubercart

 

TomatoCart

TomatoCart was designed specifically to work great on all digital devices. It includes a full CMS with slide show, image menu, product scroller, banner manager, and Google AdSense integration. It also offers catalog management, product management, and order management tools, too.

TomatoCart also includes customer and user management tools, including the ability to import and export customers, polling tools, and more. Tons of payment gateways are supported, including Amazon IPN, Google Checkout, PayPal, Western Union, and more.

tomatocart

 

X-Cart

X-Cart offers both free and paid licenses (with a one-time fee, rather than recurring costs). It’s easy to maintain and modify, with open source PHP code. There are hundreds of add-ons that you can access directly from your store admin area.

X-Cart has a Bootstrap-based responsive design so it works on virtually any device, from cell phones to desktops. You can sell anything with X-Cart, including products, services, and downloads, and even sell offline using the X-Cart POS system. It integrates with all the popular payment gateways and shipping carriers, too.

x-cart

 

WP e-Commerce

WP e-Commerce is a WordPress plugin that that works for physical products, downloads, and services. It’s completely customizable, with a streamlined checkout process that puts fewer pages between your products and checkout.

WP e-Commerce integrates with Stripe, PayPal, and more, and includes flexible shipping options. It works well with other WP plugins, supports WP widgets, uses shortcodes and template tags, offers tons of marketing tools, and more. There are plugins and themes available to extend it’s functionality even further.

wp e-commerce

 

Jigoshop

Jigoshop is a WordPress ecommerce plugin that includes powerful marketing and SEO features, as well as simple management for both physical and downloadable products and services.

Jigoshop offers the ability to assign Store Managers for managing day-to-day operations, as well as comprehensive store management tools with an intuitive UI. There are free and paid extensions to further extend its functionality. Free extensions include YouTube Video Product Tab, ShipWorks Connector, Multiple Admin Emails, and much more.

jigoshop

 

eShop

eShop is an accessible WordPress shopping cart plugin. It offers up a range of merchant payment gateways and shipping options, among other features. It’s highly configurable, with options for cart and checkout, products, and more.

There’s very thorough documentation available online, including great troubleshooting information. There are even some video tutorials for extra help.

eshop

 

5 inspiring ecommerce examples

There are tons of wonderful, well-designed ecommerce sites out there to inspire you. Here I’ll take a look at just five, and point out what makes different parts of these sites great.

The People’s Pennant

The People’s Pennant offers up a design that’s part minimalist, part retro. The “Buy” buttons are prominent without dominating the design.

people's pennant

The individual product pages are well laid out, with easy-to-find share buttons. All the basic information is easy to find (size, material, edition, etc.), with extra photos also prominently displayed.

people's pennant

The checkout process consists of only two steps past the shopping cart, a very streamlined approach.

 

Greats

Greats has a simple design with prominent photos of the products on the home page. Interspersed between the product images, there’s additional information about things like pricing and shipping.

greats

Hovering over a product gives you the name, while clicking on it brings you to the detailed product info, with photos, description, and sharing links.

greats

The features section on each product page is particularly interesting and well-thought-out.

greats

 

Metta Skincare

Metta Skincare’s store is minimalism at its best. Hover over a product and reveal the name and pricing information.

metta skincare

Click on it and you get taken to a product page with a lot more detail.

metta skincare

Payments are taken care of via PayPal, and the overall checkout process is simple and streamlined.

 

JM & Sons

The JM & Sons store is minimalist, with a great product and feature slider on the home page that takes up nearly the entire screen.

jm & sons

Individual product pages have details about the products, as well as dimensions in a tabbed format. There are multiple photos of each product, displayed in a slideshow. Related products are included under an “Also Liked” heading.

jm & sons

One of the best features of the JM & Sons design is the slide-out shopping cart. Click on the cart icon at the top, and rather than a modal window appearing or being redirected to a new page, your cart slides out from the right-hand side of the page.

jm & sons

 

Lola Shoetique

The Lola Shoetique shop has a minimalist design that works well as a backdrop for the bright, bold images used on the site.

lola shoetique

The results pages for product categories are simple, with photos that blend into the background, giving it a very clean design that puts the focus right on the products (where it should be).

lola shoetique

The product pages offer a description as well as specs. One stand-out feature since this is a shoe store, is that fit guide that tells you how the shoes fit compared to standard sizing. While it’s not a design feature, per se, it is an incredibly helpful UX feature.

lola shoetique

 

Conclusion

The basic elements of good ecommerce design are something every designer should be familiar with, if only because it’s bound to come up with a client at some point. And ignoring this aspect of design is either going to result in clients who are unhappy with the work you end up doing for them, or clients who simply turn elsewhere.

0 shares
  • colinwiseman

    What a round up! Nice nice work. Thanks for sharing.

  • Gia Thinh

    Great article. Thanks

  • Tim

    The fourth thing every online store needs: security.
    Nice write-up.

  • T_G

    Great article Cameron. I think as a HTNL CSS coder I may try out Simple cart. Thank you

  • ConstantStrategies

    Lots of info, great post.

  • Dan Bohea

    Ubercart? Seriously? The go-to commerce solution for Drupal now and for the past few years is Drupal Commerce: http://www.drupalcommerce.org

  • http://www.titanmedia.uk.com/ Titan Media UK

    Great Info we love the info on trends! thanks for sharing!

    http://titanmedia.uk.com
    Marc

  • Macwill Information Systems

    Great writing, this blog really tell each and every detail. i loved it.