The Ultimate guide to designing e-commerce sites
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 a 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 some internet users out there have never made an online purchase, they’re getting rarer by the day. As a designer, you can’t afford to ignore good e-commerce design. Below you’ll find a comprehensive guide to creating great e-commerce 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 e-commerce website 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 e-commerce 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 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.
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, handbags, 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:
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 altogether). One solution here is to use a mini description or summary next to the product (and near the “add to cart” or another 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 on-page, moving other content down (or creating a smaller scrolling section). Just keep in mind mobile usability when designing these things. The basics overlaid on the product image and a more detailed description are 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 carts. 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 e-commerce web development. 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 e-commerce 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. E-commerce 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. E-commerce 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.
Navigation
There are generally two main ways to navigate an e-commerce 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, e-commerce sites need more granular search and filtering options in most cases. 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:
Selecting an e-commerce platform
There are tons of e-commerce 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 e-commerce 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, web service integration, inventory management, downloadable product support, and much more. It’s free to download and open source. PrestaShop comes with full documentation and tons of resources to get you started. There are (paid) modules to extend its functionality and themes (also paid) if you don’t want to design your site.
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).
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 live video and animation support. It has a comprehensive API for just about any aspect of the system, giving you even more control.
Zeuscart
Zeuscart
is a PHP/MySQL-based e-commerce platform. It’s simple to use and easy to customize without many 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).
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 implantable, with a usable default template right out of the box.
osCommerce
osCommerce
has more than 7,000 free add-ons, and 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 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.
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.
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 e-commerce platforms.
WooCommerce
WooCommerce
, from WooThemes, is a great WordPress e-commerce 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.
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.
TomatoCart
TomatoCart
was designed specifically to work great on all digital devices. It includes a full CMS with a 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. Many payment gateways are supported, including Amazon IPN, Google Checkout, PayPal, Western Union, and more.
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.
WP e‑Commerce
WP e‑Commerce
is a WordPress plugin 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 its functionality even further.
Jigoshop
Jigoshop
is a WordPress e-commerce 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.
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.
5 inspiring e-commerce examples
There are tons of wonderful, well-designed e-commerce 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.
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.
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.
Hovering over a product gives you the name, while clicking on it brings you to detailed product info, with photos, descriptions, and sharing links.
The features section on each product page is particularly interesting and well-thought-out.
Metta Skincare
Metta Skincare’s
store is minimalist at its best. Hover over a product and reveal the name and pricing information.
Click on it and you get taken to a product page with a lot more detail.
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.
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.
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.
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.
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 they should be).
The product pages offer a description as well as specs. One stand-out feature since this is a shoe store is a 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.
Conclusion
The basic elements of good e-commerce 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 the 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.
Content Credits: https://www.webdesignerdepot.com/2014/06/the-ultimate-guide-to-designing-ecommerce-websites/
