E-commerce is big business, it has been for a long time and it is going to get bigger still. Putting your business online and selling your products to a National or International audience is essential for any successful enterprise.
As a developer, we can’t afford to ignore good e-commerce site design and below you’ll find a comprehensive guide to creating a great website to promote, market and ultimately sell your products or services. This is an indication of what we consider when we build a website and the choices available to you when we create your e-commerce platform.
ORGANISING YOUR WEBSITE
Right from the start of the design process you need to think about how your website will be organised.
For those sites with only a few products this process, although still important, has less meaning than a website with many thousands of products or items. The site will need to be maintained and having a well thought out and meaningful structure will pay benefits in the long run when you come to update or amend product listings and characteristics - never mind simply finding a product amongst potentially many thousands. Just take at look at Amazon for instance and at the inherent structure they have put in place with a heirarchical layering of categories down to individual items and options.
Single item websites or those with few products or services will have consequently fewer pages but may well be far more 'in-depth' in the descriptions and features they promote.
It is well worth spending a good bit of time in working out an architecture that your site will follow as this will be mimicked to some extent in the database structure and the systems needed to manage all the data.
THE DESIGN PROCESS
The overall process in the design of an e-commerce site isn’t so different from that of any other kind of site but there are additional factors to consider.
First of all, if it’s an established product line or well known store, there are likely already going to be a lot of design factors established and which the public have come to know over a considerable period - these factors should not be ignored. Nor should your new website take these established factors and change them out of all recognition after the years of effort you have made in getting them so well known. Find out what these are right from the beginning.
Another thing to consider is your existing product photos and promotional material. Are they up to the task of your new website? This material needs to fit into the design of your new site and if they don't or you find there is a clash then have you set aside a budget for new ones? Of all the things that make your website and your products appealing then good quality photographs of products are a major factor so don't stint on these otherwise your website and the product appeal will undoubtedly suffer. If need be and if you can find suitable images for your purposes then purchase royalty free stock images from the like of Shutterstock or Dreamstime sources. They will provide you with first class imagery until such time as you can produce your own in-house material.
Finally in the basic design concept, you should ensure the steps taken from the site's home page or product page to the final checkout page is minimal and this needs to be an important consideration in the site archtecture. There is more to be said on this further into this article.
THERE ARE 3 MAJOR ELEMENTS EVERY ONLINE STORE NEEDS
A lot goes into building a successful online store, but there are three key elements that every site needs:
- Trustworthiness: your website needs to build a sense of trust among your customers. If a shopper doesn’t feel secure when interacting with your site whether at the checkout phase or in simply subscribing to your newsletter then they take their business elsewhere.
- Simplicity and ease of use: your website and the shopping experience it provides, needs to be as simple as possible in its functionality. A real no-no is when a shopper is left puzzling over what do they have to do next to complete a process. Keep it simple at all times and 'signpost' well - key functions should stand out from the rest of the page.
- Transparency: transparency and trustworthiness could be said to be the same thing to some extent as it develops the sense of being in a 'safe' environment for your customer. Things like your contact information (telephone, emails and address details) and your shipping and returns policies should be easy to find and easy to read. Hiding these away in an obscure part of your site does you no favours and only exasperates an unhappy customer even more than they are already. This will lead to poor reviews and hurts you in the long run. Deal with crtiicism, complaints and poor reviews as they come in - quickly, efficiently and fairly. All your customers will take note..
We make sure that these three things are incorporated into every ecommerce site we design. We also adopt the following as 'best practices'.
There are a thousand things to keep in mind when building an e-commerce site. The type of site, the company, and the products being sold are high on the list but there are others that apply to almost any site or product. The following are points you should keep in mind regardless of the type of product you’re selling.
Quality Images - Big Ones - and lots of them
A website can be a wonderful shopping experience but it does have some sever limitations. There is no 'touchy feely' on a website. A shopper can't lift the item, inspect it, turn it around in their hands, smell it or taste it. To counteract these limitations there is only one answer and that is high quality images. Everyone wants to see the products they’re buying before they purchase and since shopping online prevents them having the real object in front of them, they need images that give them as close to the same experience as possible. I find it extremely annoying myself when visiting a website to see a thumbnail image with 'cick to expand' next to it and when clicked an image of exactly the same size appears. This one factor can determine if I purchase from that store - if the designer of the site can't be bothered to provide a suitable image then it can be treated as a pointer to some of the other philosophies the site owners probably have with regard to security and returns policies etc.
Photographs should be from every possible angle if possible, They should be large and preferably zoomable. There are multiple ways to handle zooming on images and the functionality is not hard to implement providing the base image is available to start with. This takes us back to site construction as you need to ensure there is sufficnet space around an image that won't conflict with other elements of the page. When it comes to virtual products (downloads) then photographs are replaced by screenshots and again these need to be of size that makes the product viewable. Perhaps you have a software solution for sale - then the screenshot of the administration pages needs to show the menu's etc and options within the admin and not just a miniscule image that depicts some colour and unreadable text.
Highlight Low Stock
There is a psychology behind this. When someone finds there are only a few left of a product which they are in two minds to buy, it can just be enough to sway them into making that crucial leap from prospective buyer to committed customer. The idea that they miss the opportunity to buy and that stock may not be replenshed for weeks or even longer is a real hook and especially if it is on offer.
Link to related products
Unless you’re only selling a single product then every product has the capacity to link to another item of similar properties or which has a 'connection' of some kind. Your customer buys a torch - show him the spare batteries or the tool bag or the other equipment they should think of buying as well. This feature should be intrinsic to the design and not an add on feature at the tail end of the checkout process. The customer will have committed mentally to buying the product and to introduce more items late in the pruchasing process will be not be as effective. Show the links with the original item so your customer can build their shopping list as they move through the product listings and not as an afterthought.
You must have noticed how many websites now provide you with an easy link to let the world know what you have just bought so you can tell all your friends on Facebook or Twitter or wherever. Social media sharing should be a prominent part of your product page as well as at the final checkout stage. Let your customer tell their friends of the new products they have just found - even though they may not have purchased themselves they may be keen to let their friends know about it. Word of mouth is a very important part of your advertising strategy so make it easy for customers to share their purchase (or pending purchase) and you 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 lose you that sale. As a designer we are unlikely to be the one writing these descriptions but we can advise our clients where they fall short and we try to ensure that descriptions don't looking awkward or misplaced on a page. Accuracy within the description is a key factor and what you describe must be what you provide. Technical details about a product or service can use a “read more” link that either opens a modal window or can be moved to a section further down a product page. It is important to remember mobile device usability when designing these things and sever clutter on a page does nothing to help your product listings appear functional on a small mobile device.
Quick and Easy Checkout
The checkout process should be quick and easy and ideally be 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. Having multiple checkout stages can be exasperating to many customers - 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. Its all just too much! If the checkout process is complicated and cumbersome then many customers will simply abandon their cart.
The one section you should not omit is the order review stage where customers can review their entire order before finaly placing the order. Shoppers are used to this step, and may hesitate more if they don’t have a final page to review before placing the order. One step you should defintely omit is when you add in costs at this final stage which have not been made apparent at any other stage of the purchasing process. An additional shipping charge, an additional tax levy or any additional costs that were not patently clear at an earlier stage will lead to some very unhappy customers and abandoned carts. Refer to 'Transparency' above - it is a critical factor
Why Have an Account?
Generally it is unecessary and just a bad idea to require someone to create an account just to make a purchase. Of course if your product requires a level of ongoing support or backup then creating an account is an obvious necessity but in general, it’s just a another hurdle in the way of 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 TRAIL
The sales trail (or sales funnel) is one of the most important design considerations for any ecommerce site. The trail 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 trail is to guide shoppers from one part of the site to the next and lead them along the path to the point of completion.
There are a number of different ways to create the sales trail but all have the same function to basically sign post and lead the way from product to cart.
CALLS TO ACTION
Having imperatives and 'Calls to Action' is perhaps one of the most important part of any ecommerce website. Not using this technique will seriously affect your sales. Large type 'Add to Cart' or 'Buy Now' are both calls to action. These may be placed on each product page and within search results or other 'browsing' pages.
The product page is where you inform the customer and provide them the 'shopping' experience making it as similar as possible to being in a real store. In a real store the goods will be on a shelf or on a rack or within a cabinet and perhaps just out of reach so the visualisation of a product is important even in real life shopping. In your online store the products are definitely out of hands reach so that means providing plenty of information about the products and the photographs, descriptions and specifications should provide as much detail as possible.
There are limited ways to navigate any ecommerce site and these are generally limited to 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. These filters allow shoppers to narrow down the product options, based on common features.
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.
WHERE HAVE THEY BEEN?
Analytics play a major part of your site design and provide you with an invaluable source of data on your customer's behaviour within your webpages. From where they land in your website to where they depart (especially if they don't purchase) and all steps in between. Do you spot a trend in these behaviours, does it suggest there is a problem with certain aspects of the site and if so where is the problem and how can it be resolved. Without the basic data on how a customer traverses through your website you will have little idea. Ensuring you have an anylysis application embedded into your website is very important whether this comprises of Google Analytics or some other proprietary system. It will take time to generate the data to give you a true picture but the information it can provide is invaluable.
FOLLOW UP MARKETING
Make good use of the newsletters and subscriptions models to keep in touch with your current customers and potential new clients. Introduce them to new products or improvements to existing products or services you have introduced. Keep them fed with a regular update on your business activities but not to the point of being a nuisance. There is a fine balance to be found but contacting your clients on a regular basis with details of important and authentic news or updates is a service that most customers value - a daily email of rehashed old news or of very limited interest is a sure fire way to get them to unsubscribe.
When a customer fails to complete a purchase then follow up with a reminder that their cart still retains their product selection and then perhaps offer them an incentive - a special deal, a discount or a top up offer. It may well be they have been interrupted in their buying process and simply need a jog to the memory to return and complete the process. Again, find the balance and don't hound your customer with daily reminders - once is enough for the most part.
USE ALL THE TOOLS AVAILABLE
There are multiple ways of getting your message out to the world so use them all. Facebook, Twitter and all the rest are ideal platforms to keep in touch with your clients and to keep them updated or informed. Interact with your customers on a personal basis - don't just sign off you Facebook messages as 'site admin' or the like - put a name and a face to the customer support people who maintain these social sites for you. Ensure when a customer complains or when you encounter poor reviews that they are addressed as soon as possible. There will be some customers who can never be pleased no matter what you do but the far majority will have justifiable reason to complain or report on what they perceive as poor service. Deal with these issues quickly, efficiently and fairly and all the other readers will see your reactions and judge you upon them.
These social networks provide you with other benefits in your overall SEO strategies and especially if you can produce unique material through blogs or other means. Google especially just loves authority sites and those with dynamic and unique content - as the mantra goes 'Content is King'. Your website may contain the same product listings for weeks, or months or even years with very little change and you need to use other means to provide that dynamic, ever changing element to your site. Blogs and support bulletin boards are a good means of achieving this. They take effort and are very time consuming but they do provide rewards in the long term. Be inventive in your outputs - provide answers to unasked questions, provide unique insights into the use or techniques employed with your products, provide information no one else does and you will generate a substantial following and word of mouth advertising because you are a valued and authoratative source and watch your website rankings rise on Google search.
SELECTING AN ECOMMERCE PLATFORM
There are many ecommerce platforms out there for you to choose from, so how do you go about choosing the right one for your 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 customisation, 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 customise? How many options does the platform have to customise 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?
- Integration with your other office software packages such as accountancy software or inventory software
- 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.
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 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.
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). This is the shopping application we install in our E-Commerce Package and for which we offer full support.
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.
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).
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.
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.
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.
WooCommerce, from WooThemes, is a great WordPress ecommerce plugin that’s got tons of features. You can sell anything with WooCommerce, i
ncluding 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 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 was designed specifically to work great on all digital devices. It includes a full CMS with slide show, image menu, p
roduct 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.
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 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.
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.
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.
The basic elements of good ecommerce design are something every designer should be familiar with. But it goes further as the medium in which we work is a fast moving, ever changing target with new technologies and new methods of transmitting information arriving every day.
In addition the customer is becoming far more adept and discerning. E-Commerce has come of age and the customer knows how to use it and what they expect to see and what they feel is a good online experience or a poor one. Keeping on top of this changing landscape if only a part of what we do to ensure your website design is kept abreast of this increasingly competative world.
Now you have read on what we put into a design concept and the practical elements we incorporate perhaps you now feel more confident in our abilities to provide you with the platform your business needs.