Increasing Conversion with Web Design

by in Design on 24th Jan 2011 · Comments

There are a variety of elements on a website which can increase or decrease your overall conversion rates. Many are dependent upon the design of your website and should be considered very carefully when starting or re-designing any online store. Some of these elements are simple enough to start implementing today!

Bring a sense of urgency to your promotional creative pieces. Why would a customer want to buy something now, when they could wait until you offer a discount or sale? How will the product solve their problems today vs. next month? This can be done in a number of ways. Make a special offer ending date more visible by using bright colors that stand out from the rest of the creative. Use a callout badge or bug to make your end date really jump out at the customer.

Increasing Conversion with Web Design

Promotional Creative

Here are a few of examples of how this can be done:

Target - 4-day Sale

Target

REI utilizes their promotional banner to give a date callout on their winter sale.

REI

Bath & Body Works uses a red ribbon to show sale urgency.

Bath & Body Works

Another great way to increase conversion rates in promotional images is to showcase the solution to a problem. For example: Not only does this electronic book reader offer thousands of books in the size of one, it is lightweight and has a battery life that'll last your entire trip to Europe. Forget packing your charger too! Those days are gone! You could show a book reader inside of a suitcase or carry-on purse in this instance. Reminding holiday vacationers who love to read how this product could improve their life, thus getting them to make a purchase. Using this technique with a clear call to action button will help improve conversion rates by way of design.

Make sure your call to action buttons within promotional creative space shows urgency as well. Button verbiage could include statements such as: Shop now or buy now. Including the word now shows that sense of urgency.

Add To Cart Button Placement

Make sure your call to actions buttons, arrows etc., are large and in charge, especially when you want the customer to make a purchase. Placement should be high up on the page following or to the right of the product attribute options (color, width, quantity etc.). Use a color that shows action and wording that means business. What color should you use when creating a successful add to cart button? This will depend greatly on your color palette and the type of products you are trying to sell. Here’s a great guide to color usage from Kiss Metrics. Doing some A/B testing on colors is a great way to determine which color to select if you’re debating between two options.

A/B Testing

Test your website with users in your target market before launching. This will give you an idea of where you can improve before you show your website to the public.

Your customers shouldn’t need instructions on how to do anything on your website. It should be easy and fluid. If you would like to gather information on which specific element is performing better, such as the color of an add to cart button, A/B testing is a great way to gather such results.

A/B Testing

When running an A/B test, part of your customers will see one color, the other segment will view the other. Generally with a test of this nature you’d want to do a 50/50 split. Make sure the color is the only thing you are changing so you know for sure that is the reason for the different results. Testing can be tedious, but if one color will increase your conversion rates even a half of percent, it’s well worth the effort to find out.

Onextrapixel Resources

Photography

Show off the products! Give your customers multiple views of products that they would normally be able to inspect thoroughly if they were buying in a physical store. The more information you make available to the customer, the more likely they are going to make a purchase. If they can’t find out how many output jacks your LED TV has, chances are they are going to look elsewhere and buy something they know will solve all of their problems.

Crutchfield – Zoomed in photography – details are important.

Crutchfield

Engaging Landing Pages

Landing pages are great tools to drive your customer deeper into your website right from the start. They offer flexibility with promotions and give you the ability to efficiently optimize for specific search terms.

Here are 5 tips when designing a landing page:

  1. Use short and direct copy, customers like to scan, not read when they buy.
  2. Include a powerful call to action using a button or other clickable design element. Use verbiage that is more delicate such as Learn more or try it today. You don’t want to see pushy since this is most likely the first page your potential customer is seeing.
  3. Answer all questions in a simple fashion that the customer might have about the main purpose of the product or service.
  4. Show value vs. selling. Don’t hit your customer over the head with cheesy sales slogans. Make sure your copywriting speaks value first and foremost.
  5. Offer a promotion or discount. Landing pages perform best when there is a purpose. Offering a comparison chart is another great way to show purposeful content on a landing page. See example below from North Bay Trading Co.

North Bay Trading Co. Landing Page Chart comparing two types of products they offer.

North Bay Trading Co.

For the holiday season, a great idea for a landing page is a gift center! Here are a few examples of Holiday Gift Guides:

Macy’s Gift Guide

Macy’s Gift Guide

Carter’s Gift Finder

Carter’s Gift Finder

Kohl’s Gift Guide

Kohl’s Gift Guide

Checkout Design

Now that you’ve driven your customer to your landing page and they are intrigued by your valuable content, the next step is getting them to make a purchase. The most abandoned page of any ecommerce website is the checkout. Here are a few pointers to decrease abandonment rates:

Reduced Header & Footer

Simplify your checkout’s header and footer with only the necessary information your customer needs to see to feel secure about their purchase. Don’t offer promotions unless it directly correlates to the products they are purchasing. A good example of this type of promotion would be free shipping or a free gift when purchasing two of something already in their cart.

Easy, Condensed Checkout

Single or a multi-page checkout? There are a lot of differences in opinions on this topic. I’d love to know what readers think!

Reasons to Design a Multi-Page Checkout

  1. Some one-step checkouts can be slow to pull in information, depending on the technology being used. Sometimes a simple HTML series of short checkout pages is better than a fancy roll-up checkout page that pulls on more libraries than really needed.
  2. Including all of necessary information on one page is much more intimidating to look at then 4 short pages. If clearly designed, this can appear much more simplified than 20 fields on one page. Who really wants to fill all of that out? It’s often about perception and that depends heavily on the type of customer your site attracts and sells to.

Reasons to Design a Single Page Checkout

  1. Less steps and places for the customer to become confused or distracted and abandon the sale.
  2. No need to wait to see the shipping costs or where they might be able to enter their promo codes. It’s all in plain sight, no questions asked.

Checkout as a Guest

Give your customers the option of checking out as a guest or signing into their online account. Café Press has an incredible successful checkout process. Below you can see they give their customer the option to simply sign-in if they want the ease of not having to type in their information again. If not, the customer continues through their excellent one-page checkout.

Cafepress

The Key is to Simplify at All Costs

Is your Site Safe & Secure to Shop?

Security Logos and Certifications upfront and visible before the customer passes along their secure data. VeriSign, McAfee, cybertrust, Truste are a few companies that offer trust seals giving customers that extra sense of safety and trust in your company. Making sure your customer trusts your website can be crucial in closing a sale. Not only can these seals help increase that sense of trust, they also show that your site has in fact passed security checks and they can feel comfortable giving you their personal information.

Another way to give your customers a heightened sense of trust, is by having a well designed site. Why should your customers spend their money on you when you don’t look like you’ve spent money on your product? Yes. This includes your website too, not just your product. Remember your website is like looking into a store window. If it doesn’t look nice, your customers are going to look elsewhere.

Customer Reviews

Make use of valuable customer reviews throughout the site. Customers have the try it before you buy it mentality. The more information they can find out about something beforehand, the more likely they are to purchase it or not. Move reviews to a more visible area on the site. Add customer reviews in other places than just the product detail page. Be creative with the placement.

Here are a few ways to use customer reviews:

Zappos introduces customer reviews on the bottom of their category pages.

Zappos

Macy’s shows reviews on all product pages – not buried in a tab, but visible without having to click a second time.

Macys

Gander Mountain shows ratings on thumbnail pages. An easy way to introduce ratings on any website.

Gandermountain

Make sure on every product detail page you have the star rating high up on the page and clickable. It doesn’t need to be more visible than the add to cart button, but it should at least have a rating system and be underlined so your customers know they can read more reviews by clicking on the link. Here are a few examples of review placements on product detail pages:

Old Navy puts their ratings right below the product title and product image with a visible listing of all reviews directly below the product information.

Old Navy

Target uses a red link and star treatment directly below the product title to bring their customers down the page to where the reviews reside.

Target

Best Buy uses a tabbed approach but reviews are always visible first and foremost.

Best Buy

Site Performance

Image size can cause your visitors to leave your site, especially if the products they want to buy aren’t appearing immediately. If you aren’t able to optimize your images to a small enough size, don’t use Flash. Even as a designer, I don’t wait for cool Flash animations to play. I don’t like waiting and neither do your customers.

The number one reason for shopping online is ease of browsing products and saving time running to a physical store. Just because it’s cool looking, doesn’t mean you should use it. A great tool I often use is called Y-Slow for use with Firefox’s Firebug. It allows you to see the areas of your site in which you can improve upon in terms of performance.

Y-Slow for Firebug

YSlow

10 Examples of Successful Ecommerce Designs

Stoneberry
Excellent color usage for important elements such as the add to cart button and price per month (credit buyer focused)

Stoneberry

Gymboree
Allows users to select multiple products at once and view the product details (below) Great usage of orange for action items.

Gymboree

Multiple product details for ease of shopping.

Gymboree 2

Godiva
Large detailed photographs show the product up-close so you can almost taste the chocolate!

Godiva

Tumi
Interesting placement of alternate images. Photos are large and offer great detail to the customers and load quickly.

Tumi

Baking for Good
The overall graphics and style of this website are unique, fun and spot on for this business. The variety of photograph compositions is eye catching and is consistent with the variety of shapes found throughout the site.

Baking for good

Russell & Mackenna
The variety of colors is shown beautifully throughout the site using the product thumbnails. Many sites have a default color that shows first, but they showcase a large variety of colors. R & M also place their email sign-up right on the top of every page. Another great design feature!

Russell & Mackenna

TWC Imports
This site focuses on the ability to search and shop in multiple ways. They use a wine cellar, a creative way to compare wines. The search is always at the top of the page and doesn’t move locations, increasing its ease of usability.

Twc Imports

Oakley
This site is successful for its large photography and attention to detail (see below).

Oakley

The left-hand navigation is designed beautifully with slight variations in grey allowing the products to really stand out. They also use CSS3 effects when hovering over the thumbnails for that extra sense of quality and luxury; which is what Oakley is all about.

Oakley2

Sweet Beauty
The organic nature is carried through this site by using organic shapes and layouts and subtle colors throughout.

Sweetbeauty

The shopping basket design is simplistic and uses the color green to show actions.

Sweetbeauty 2

Eddie Bauer
Great use of large photography that loads quickly and really shows off the product details!

Eddiebauer

Mobile Conversion

Design should be carefully considered and planned out when moving toward a mobile solution for your ecommerce website. What interface elements should always remain? How will users be able to search your site? How do you design a checkout for maximum conversion on a mobile device? These are all great questions that will be addressed in: Part II. Mobile Apps: Design for Mobile Conversion.

Have a tip you’d like to share with our readers? We’d love to hear it!

Sarah Lynn is the owner of Sarah Lynn Design. A web designer and creative who digs pixels, paint & blogging. Her day consists of creating & designing email campaigns, soaking up CSS knowledge, building better user interfaces & websites and even the occasional print project.