Top Design Tips for Improving Ecommerce Conversions

For three years now I have successfully avoided the Black Friday madness by shopping online on Cyber Monday instead of in stores. It seems that I’m not the only one either. This year many stores, such as Toys R Us, offered Black Friday deals online as well as in store fronts. This allowed me to get the best possible deals since different discounts were available for different items for each of the two events. Because of shopping online, I could easily jump from one online store to the next to compare availability and prices. The result? I bought way too many gifts for my kids this year simply because of the amazing deals available from multiple stores, all from the convenience – and safety – of my own home.

The second result? I’ve also started purchasing produce online from a local farmers’ coop, which delivers organic fruits and veggies right to my door. Before, I had to brave our overcrowded Walmart or poorly located local organic store up to once a week for fresh produce. Face products, vitamins, and other healthy food items I also purchase online due to the variety available and the fact that some of these stores offer an automatic monthly purchase option. So I don’t even have to think about re-ordering. And I keep wondering why I didn’t do more online shopping before. Was I just loath to jump onto the digital shopping bandwagon? Or was it because ecommerce wasn’t that great just until this year?

If you guessed the second reason, you guessed correctly. (Only a tiny bit of the first reason is a factor due to a weird combination of my love for new technology but also my fascination with the “olden days”.) Most online purchases I’d made in the past were a failure. Sometimes the product that arrived didn’t look at all like the images online. Sometimes it simply took way too long for it to arrive. And then most of the time, I left the website before purchasing either because the product information was lacking or the checkout was just way too complicated and time-consuming. And I almost never made a purchase from a small company online due to a fear of scams.

Web design has come a long way in improving ecommerce conversions, especially in the last year or so. Designers have found that specific design elements need to be included in an ecommerce page to gain the trust of a customer. All of my issues for making online purchases in the past, of course, first start with the actual company policies. But a web designer now has the responsibility of making sure these policies are front and center for consumers to see – and I’d go so far to say that designers also should suggest their clients adopt certain policies if these are not present. After all, it’s your job as a web designer to build a successful ecommerce website for your clients.

Make sure you as a web designer, or even an online retail business owner, knows just what an ecommerce website needs to improve conversions. The following list includes the top design elements (and, consequently, value offerings) that every ecommerce site should have to help consumers like me not only know exactly what they are getting with an online purchase but also feel safe making a digital purchase. For more inspiring ecommerce design examples, check out these 50 ecommerce websites.

Clean Design

A clean design is important for any website, but especially an ecommerce one. What exactly does a clean design mean for ecommerce? For one, it has to focus on the products. A visitor should be able to immediately tell what your client sells when visiting the site, so large product images on the home page is essential.

01-design-tips-ecommerce-brigitte

The Brigitte Bardot website is not only nicely organized and easy to navigate but it also looks uncluttered with a single, large image and simply tagline above the fold on the home page, creating a clean first impression.

Home Page Promotionals

The home page is also the place to advertise any current promotionals of the company, whether it’s a discount on certain items, free shipping, or storewide savings. And, of course, illustrate with product images and short, snappy descriptions.

Immediately on the home page of the Forever 21 website, visitors see the current sale details. The following images in the slideshow suggest other hot items.

Effective Navigation Menu

The navigation menu needs to always remain visible so that clients can jump from page to page quickly and easily. Be sure to keep the navigation menu simple using drop-down categories to help better organize clients with lots of products. A Search bar is usually helpful as well if your client has a huge list of products. And include a FAQ or Help tab in the menu so that customers can search for answers to popularly asked questions on the site.

For such a huge inventory of products, Toys R Us has an incredibly organized website. Their main navigation at the top of the home page includes drop down sub-items, and the product menu on the left side of the page allows customers to shop by different categories.

Recommendations/ Featured Items

Featured products on the home page are an excellent way to give customers an idea of what type of product you sell. If your promotional ad takes up the entire space above the fold, place popular items just below the fold for customers to see when they scroll down.

Amazon.com suggests items based on previous products individuals have viewed and places this list both on the home page and at the bottom of product pages. In addition, Amazon also includes a list of items others have viewed on each product page.

HM.com includes a list of items both similar to a product as well as upsell items, such as accessories or shirts that go well with a pair of jeans.

Visible Testimonials

An actual page for testimonials is becoming a bit outdated. Instead, designers are incorporating testimonials right on the home page and/or product pages. Or, if a separate testimonials page is included, make sure to show previews of testimonials on the home page. Keep in mind that these are company reviews, not product reviews – two very different things. Testimonials should be about the satisfaction of the customer working with the company.

Bold King places a scrollable testimonials section near the bottom of their single page website, along with images of the customer who left testimonials.

A company review/ testimonial placed in a side bar or just below featured items gives consumers confidence in the business. If your client allows the option of customers leaving a review through a social media profile, such as Facebook or Google+, then you can also include the reviewer’s profile image, making the review much more believable.

Each product on the Born website allows for customers to leave a comment or review via Facebook, which encourages customer interaction.

Large Product Images

Every product will need several photo sizes for different pages. Make sure that images are large enough that the product is easily discernable, good resolution, but also are optimized for fast web page loading. Usually this means keeping images at less than 70kb, and really for the web you don’t need a higher resolution than this. Make sure your client has at least two angles for each product that you can place as thumbnails on the product page for consumers to view at a larger size if desired.

Another excellent feature for products on the Born website is that each come with multiple viewing angles and even videos. In fact, videos are becoming an excellent method for showing off products. Many companies are placing TV ads of products, videos of how the product was made, or even examples of how to use the product.

On the Budnitz website, visitors can view a film that was created using at Budnitz bicycle. You may notice that the video is embedded from Vimeo to save bandwidth on the website.

Organized Product Information

Some of your clients may only have one category of products, while others may have several categories. No matter how many different products a client has, though, always have a page/ pages that displays all products within a single category along with individual pages for each product. This way, you can more cleanly fit a product description, specs, the availability of the product, product reviews, price, customization options (such as size or color), recommended items to purchase along with this product, etc.

On Target.com, items are placed within categories, sub-categories, and even sub-sub-categories. This hierarchy of categories allows the website to stay clean and easy to browse through items quickly.

Another excellent way to help customers preview items more quickly is with a quick view option. When customers are browsing through a list of items on a category page, they can click on the preview/ quick view button and a window appears with all of the product thumbnails (which can be clicked on for a larger view), short product description, customization options, price, and purchase button.

Some websites, like Abercrombie, show a Quick View button when the pointer hovers over an item. Clicking on this button makes a Quick View window pop open that customers can quickly close down to continue searching. Others simply provide a Quick View button next to the Add to Cart button below each product in a list.

Clear Product Price and Shipping Costs

Nothing is more frustrating to consumers than to have to wait until the product page or (god forbid!) the checkout page to know how much an item will cost them. Be sure to place the price of the product everywhere you show the product (home page, category page, product page, etc). If your client offers fixed shipping costs for every product, then place this at the very least on the product page and quick view. If shipping costs are configured at checkout, then place a shipping cost button on the product page that opens a window or leads to the FAQ page and an explanation of how shipping costs are determined.

Nike shows their Free Shipping offer in the sub-header seen on every page. Their prices are listed next to thumbnail images and immediately under the title on every product page.

Another price affectant to display is a reward or points system. If this is something your client offers to customers to encourage loyalty, then display this information on the product page or in the header. For instance, when a customer logs in, next to their name that appears in the header, show how many reward points they have gained so far. You can also show the points on product pages.

Improved Call-to-Action/ Add-to-Cart Button

Depending on what products the website sells, you will need a call to action or add to cart button. Some web designers make the mistake of creating a fancy button that blends in with the color scheme or style of the website. DO NOT DO THIS. Yes, I am shouting at you – that’s just how important it is for add to cart or purchase button to stand out.

Notice that on this product overview on the ToysParadise website, the Add to Cart button has a dark green color and a unique font. It’s also larger than any other button on the page. Now, you can keep the button in the same style but use a high contrast color, just as long as it stands out from the rest of the page.

Beside the product image, the call to action button should be the first graphic the customer spots on the page. So this also means placing it in the best location possible – on the right side of the page, opposite the image located on the left of the page. The only exception for this is during the checkout section. A purchase button should be placed at the very end of the checkout form.

Another consideration with the call to action button is the wording. Don’t get creative, unless the words on the button still tell the customer exactly what you want them to do. Most of the time, a simple “Add to Cart” is the best phrase to use.

Minimal Checkout Page

Studies show that 67% of customers leave during the checkout process. Why? Sometimes it is because the price and shipping costs weren’t displayed before the customer started checking out. Sometimes consumers leave because there is no option to check out as a guest. Other times, it is because the checkout page requires too many steps or even because it contains too many distractions. All of these problems are very easy to avoid.

Walmart.com gets the first step right with the option to checkout as a guest. The rest of their checkout process is easy and quick as well. For most of your clients, their checkout will have at least two and usually three or four steps. Just like Walmart, make sure you place a progress line at the top of each step.

The first page of the checkout procedure should be a login/ create new account option, but encourage your client to allow purchases to be made as a guest. If the customer is a guest, you will need a shipping and billing address, phone number, etc. Make it easy with a checkbox for “billing address same as shipping address”. Then you will need a billing information page. Again, have the billing address filled out for them already. Finally, you’ll need a review page that contains the Purchase button. Notice how on Walmart, the Continue button is the only large orange button on the page:

In every step, avoid adding in distractions, such as links to anything else not related to this purchase. Another bonus for customers is to have the estimated cost of the purchase on every page. If you do this, just make sure you include a fine print phrase below the Next button that explains that hitting Next does not confirm the purchase.

Unique Design Elements

This is where you as a web designer can show off your awesome design talents. Some would argue that creating a unique ecommerce design is just as important as the layout and placement of elements. Make sure to do your research, of course, and know the audience as well as the company image. And never allow a creative design ruin the ability of a customer to easily navigate or see products.

One page you can get really creative with is the About page. Encourage your client to create some professional videos that explain the company. Include their story in a voice unique to the company. Pictures of employees at work are also a great way for your client to gain the trust of new customers.

The Southtree about page is titled “Our Story” and is a recount of their foundation, mission, and values in a story format.

Value Elements in the Header

Make sure the header includes what can be called “value elements”. These are anything that adds value to a consumer’s purchase. Your client may offer free shipping with a certain purchase amount. Or they may have a stellar return policy. Anything that would be considered a perk and increases the value of the company, you should definitely include in the header.

At the very top of every page on the Skinny Ties website is an orange header bar that lists their current special offers. However, some ecommerce sites have too much going on in the header already and can’t afford extra space in the header such as Skinny Ties. When this is the case, placing these value elements somewhere above the fold line on the home page may work best, such as what Jenier does with value elements directly below the home page image.

The idea is to simply make sure that new customers immediately know the benefits of shopping with this company. Don’t forget to repeat these perks in an easy-to-see location on product pages as well.

Trust Factors in Header and Footer

Both the header and the footer should include the company phone number (if available) so that customers can call if they need help or have questions – and be sure to also list business hours next to the phone number. Live chat should also be placed in the header, if offered. Social media buttons in the header, such as what Inkefx lists, help to show a company’s legitimacy and also give customers some quick places to check for legitimate customer reviews.

In the footer, be sure to also include your client’s seals of legitimacy, such as BBB, TRUSTe, and VeriSign. Other great footer elements are logos of brands the company sells, logos of large organizations who purchase from the website, and credit cards the company accepts.

The Nutty Scoop includes all of these trust factors plus other media on which they’ve been mentioned in the bottom of their home page.

Final Considerations

Of course, the list above is not complete. As with any client, make sure to include vital SEO elements on every page. Keep in mind too that not every client will need all of the suggestions above, since every company is different. Use this list as a guideline, however, and hopefully you will gain the reputation of a web designer who knows what it takes to create an ecommerce website with record conversions.

Published January 7th, 2014 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.