How to Design an Ecommerce Site to Maximize Sales




Daniel Alves is the design director for the small business web design division at the digital marketing and web design company 352 Media Group.

If you read the business news that followed Black Friday and Cyber Monday, you would remember that this year’s online holiday shopping season was predicted to be the biggest in history. Many reported that online sales were up a whopping 16% compared to 2010.

However, despite these impressive trends, ecommerce websites only convert 1-4% of their leads, on average. On the other hand, some of the best ecommerce websites convert upward of 15% of their visitors. So how do they do it?

While there are many factors that go into creating conversions, one thing is certain: Great ecommerce websites successfully connect a user to a product with a system that is efficient, easy and fun.

When designing your ecommerce website, keep in mind there are three basic steps in an online shopping experience. First, a user must find the product she wants. Second, you must showcase the product well. Third, you need to seal the deal with a seamless checkout process. Read on for more details.


1. Finding the Product


Believe it or not, the biggest reason why a shopper won’t buy something on a given website is not due to its price, your customer service, or a lack of buyer’s intent. Surprisingly, the biggest reason ecommerce websites fail is because shoppers can’t find what they are looking for.

So, why is it so hard for websites to guide users to their desired products? The key to understanding this phenomenon is understanding your users.

Great web design has the ability to cater to different user needs in a unified user interface. For the users who know exactly what they are looking for, your job is to help them find their desired product in as few steps as possible. Some users might need more hand-holding, while others just want to casually browse. Each type of shopper presents unique challenges, as well as unique opportunities.

  • The Power Shopper: Power Shoppers know exactly what they want, have sophisticated shopping strategies, and don’t want to waste time casually perusing your website. For these shoppers, your first priority is to provide them with an awesome search bar so they can type exactly what they want. In terms of design, you want to make sure your search bar is large and presented with enough contrast so it’s easily visible. Per conventions, place it in the top-right of your website and make sure it is consistent across the entire website.

    As for functionality, it’s pretty much expected that your search bar should provide suggestions as you type. This allows your shoppers to type a few characters and be presented with potential choices, without having to type out the product’s entire name. This auto-complete feature can also be leveraged to cross-market products related to the product users are looking for. If you do include these suggestions, make sure to clearly label them as suggestions, not actual results of the search.

  • The Recreational Shopper: If you’re not a recreational shopper, you probably know one. This type of shopper would prefer to spend an entire afternoon at the mall casually exploring any store that piques his curiosity. They don’t see shopping as a means to an end; they’re shopping for the experience.

    While these shoppers are more likely to jump ship and not purchase from you, they provide an incredible opportunity, due to their tendency to be more adventurous and impulsive in their shopping habits. Because these shoppers respond to visual cues, you need to wow them with dynamite photography, featured item showcases, unbeatable deals and the occasional unique surprise.

    Don’t worry, you don’t have to blow your marketing budget with a tricked out homepage to lure in shoppers. In fact, some of the best ecommerce websites accomplish an eye-catching and entertaining storefront with simple and creative techniques. A popular women’s clothing website, Free People, shows off a traditional model spread, but presents a simple, unique twist when you move your mouse over one of the images.

  • The Reluctant Shopper: This type of shopper is generally uncomfortable and nervous about shopping online. She is typically less tech-savvy and needs more guidance throughout the entire shopping experience. One of her biggest concerns is privacy and security; therefore, she responds well to promising statements of trust and customer service. Because online shoppers cannot physically touch the item they are buying, promoting return and refund policies greatly increases the likelihood they will do business with you.

    For finding products, these shoppers benefit greatly from gift guides or “Shopping Wizards:” The customer answers a few pre-qualifying questions, and the site provides suggestions that suit her particular needs.


2. Showcasing the Product


Once a shopper zeroes-in on a product, the conversion clock starts ticking. Your number-one goal at this point is to get the user to add the item to his shopping cart. While there are several different ways to arrange a product detail page, several important components will help retain shopper interest and make him more likely to commit to a purchase.

  • Photos: Humans are visual creatures and high-quality photography is the key to showcasing your product. If you can only give them one photo, make sure the product has a distraction-free, neutral-colored background. If you do show your product in a lifestyle-oriented setting, make sure the product is overtly emphasized, so as not to confuse the shopper and take attention away from the product.

    If your design doesn’t allow you to display the photo at such a large size, make sure you give shoppers the option to view the photo in a modal window. Don’t offer them a zoom tool that limits them to a small quadrant of the photo. There’s no reason to not display a large photo in its entirety.

  • Price: Price is perhaps the biggest reason why a shopper will abandon your website and look elsewhere. While determining prices is outside the scope of this article, you can do a few things to help sweeten the deal. First, display the price boldly and clearly. Don’t make users register or add the item to their carts before showing them the price. This will certainly annoy users and cause them to leave in droves. If your price is discounted from the suggested retail price, show them the discount because everybody likes to know you are giving them a deal.
  • Reviews: Social influences have a profound effect on our shopping behaviors. You can tout the virtues of your product with fancy and elaborate prose, but shoppers won’t believe one word of it until it’s been confirmed by an independent customer. While positive reviews will motivate users to take the plunge and purchase an item, negative reviews give you a unique opportunity to either make product changes or respond to customer concerns publicly. This open and proactive approach to giving and receiving feedback ultimately gives your website more credibility, which translates into loyal customers and repeat sales.
  • Add to Cart: Because your call-to-action entices the user to click on the “Add to Cart” button, you must give plenty of attention to optimizing it for conversions. Try the following tips to increase your conversion rate.

    Use the words “Add to Cart.” This may seem like a no-brainer, but shoppers can either be apprehensive about the commitment of “Buy Now” or confused when they see “Add to Bag.” The convention of the words “Add to Cart” is non-committal, and leaves them comfortable to keep on shopping. It’s your most important button, so don’t hide it. Use bold colors that contrast well with your design and attract attention. Try choosing a color that is not used anywhere else in the design to really set it apart. By making the button plainly visible, shoppers won’t have to wonder how to add items to their shopping carts. Any time spent searching for the “Add to Cart” button is time in which the shopper will reconsider her motivation to purchase.

    When your shopper clicks on the “Add to Cart” button, make sure to show her some indication that the item has been added to the cart. Don’t take her to the shopping cart. If you take her away from the product page and force her to the shopping cart, you lose the opportunity to cross-sell, and the user will be less likely to keep shopping.

  • Related Products:Offering shoppers suggestions gives you the opportunity to feature items they wouldn’t have stumbled upon otherwise. Some shoppers might not be savvy in searching, but are more likely to wander through your website based on the suggestions they receive. Because the biggest reason for a lack of conversion on ecommerce websites is not being able to find the desired product, this feature gives you the unique opportunity to customize the products your customers see based on their browsing history.
  • Deals: Without a doubt, shoppers are responsive to deals and promotions, and the king of all deals is free shipping. Marketing guru Seth Godin dedicated a whole chapter of his book Free Prize Inside! to Amazon’s success with its free shipping model. In order to offer this and still make a profit, make a minimum purchase amount, but don’t make it too high. A minimum purchase amount will encourage shoppers to spend a little bit more just to get free shipping.

3. Sealing the Deal


So, you’ve gotten your shopper to add a cornucopia of products to his shopping cart, but it’s not time to break out the bubbly yet. One of the biggest hurdles a shopper must overcome is the often plagued and cumbersome checkout process, beautifully portrayed in this video.

While shopping is fun, spending money isn’t. Your job is to get customers through the payment as quickly and painlessly as possible. I’ll offer some helpful tips.

  • One-page checkouts increase conversions. Long forms with many steps require the browser to load a new page, proving detrimental to a shopper’s patience. One A/B Split Test study determined an improvement of more than 20% when users were able to checkout with one click of the submit button.
  • Provide instant chat. A study by BoldChat found that 76% of shoppers want to have instant access to a customer service rep during the checkout process. Instant chat not only lets you help your users with technical problems, but it also allows you to encourage them to complete their order.
  • Follow up. If you’ve been keen enough to capture a customer’s email address in the first steps of the checkout process, you have a unique ability to recover a lost sale if she decides to jump ship.
  • Don’t require registration. A Forrester Research study found that requiring users to register before checking out decreases ecommerce conversions by a staggering 23%. While registering users is a great tool for identifying repeat shoppers and making the checkout process more streamlined, make this an optional step. Also, consider using Facebook Connect or other social media sign-in widgets. These tools allow shoppers to register with your site without having to create a unique account.
  • Use cookies. A cookie is a small amount of information a website puts in a user’s web browser so that it can remember something about him/her at a later time. You can leverage this simple tool to remember a user’s shopping cart or shopping history, so when they do visit your website again, they can pick up where they left off.

Selling online is as much an art as it is a science. You need the creative prowess of both a marketing and design genius to attract customers, and the keen eye of a usability guru to make conversions happen. However, implementing the suggestions provided above should help increase your conversion rate, and lead to happy and satisfied customers.

Image courtesy of iStockphoto, MarsBars

More About: Business, contributor, ecommerce, features, online shopping, trending, web design

For more Dev & Design coverage:


This entry was posted in business, contributor, ecommerce, features, online shopping, trending, Web Design and tagged , , , , , , , , , . Bookmark the permalink.