Visualizing an E-Commerce Customer Experience Map

Warren Buffet, the greatest investor who ever lived, succinctly describes his investing strategy as ‘be long term greedy, not short term greedy’ in his autobiography. Even though his advice would have been related to investing in assets with a long term view the same applies to eCommerce in India which is expected to grow between $ 125 billion and $ 260 billion by 2024-25. When you are long term greedy you will try to treat the customers in the best possible way at each touch point so that you build a long term relationship with any customer who shops with you and it creates a virtual cycle where people comes back to shop with you again and again.
Nobody has championed this thought better than Jeff Bezos the founder and CEO of Amazon.com who detailed out on a paper napkin the value of superior customer experience which will help in increasing traffic, attracting more sellers and increasing the selection available to the customers helping to achieve lower cost structure and prices finally benefiting the entire ecosystem in E-Commerce.

If you look at this stage of growth of E-Commerce in India , the competition is on price in any commodity category. The good thing about lowest price is that there will always be takers for lowest price, especially with price conscious value seeking customers in India. The bad thing about lowest price is that in the long term, it’s a very difficult to build any business on low margins and below par customer experience.
That is why it is necessary that you sell not the product, but the complete experience to the customer who shops online.
Unfortunately ecommerce is one of the most competitive industries in the online space, so a good understanding of the customer experience in ecommerce is vital for improving the customer journey in order to reduce marketing costs and improve revenue for this you need to view each sale as the foundation stone for a long term relationship and not a one night stand. Most E-Commerce companies are structured in such a way that no single department is responsible for overall customer experience . Each department has their own goals. Marketing wants more traffic, Sourcing team wants more revenue, Product Management wants the “wow moments” within the product, Engineering wants to build stable scalable systems for long term, merchandising wants more product discovery and visual options, Delivery teams want systems that will help to deliver fast with real time tracking and delivering and so on. When the objectives of various departments compete with each other to get resources, it is natural that priorities collide there are breakages in customer experience funnel creating long term revenue losses and the whole organisation may miss the chance to learn from customer behavior — to create a virtuous cycle of repeated customer purchases and improved revenue performance in long term.
A good starting point is to look at the key areas of the customer experience journey so you can plan your resources accordingly and the customer experience map below has been adapted for E-Commerce and inspired by the customer experience map model created by Chris Risdon of Adaptive Path.

Planning & Product Discovery Stage
Customers will start considering your site only if it comes through a strong recommendation or if there is a compelling offer driven through a marketing channel and the focus in this stage, should be to drive customers to your site and engage with them. Site structure and content should be optimised to improve traffic from organic search but, before investing heavily, consider whether more traffic is really what you need.
Transactional ecommerce sites should ideally convert at least 2 percent+ of web traffic that should increase over time. If you’re not achieving this you may be wasting money on paid media (search and display) and should instead think about optimising site content and user experience rather than attracting more traffic. The conversion rates will vary from category to category and product to product based on seasonality and offers. Conversion rate is usually high for low involvement products like pendrives and books while it is very low for high involvement products like smart phones and DSLR cameras. Traffic from Google may have a very different conversion rate than traffic from a price comparison website like mysmartprice.com or a forum like desidime.com and you need to track each of these sources differently over time to check how well these are performing.
Detailed information points in product description, reviews and recommendations etc are almost hygiene now and going forward to help users you need to harvesting your efforts in creating a community through gamification, online reviews, ratings and recommendations play. This will play an increasingly important role in the decision-making process at this stage and and can help build trust for the site. But how will you decide whether to showcase a negative review or not which again boils down to the fact on whether you are long term greedy or short term greedy. Customers now expect you to engage with them on their terms so, rather than social/email-spamming fans when running a Facebook promotion campaign, make use of available customer information from their social profiles to personalise offers and improve the experience on the site. In fact, personalisation can have a major impact on conversions throughout the user journey. Collating user information is a priceless tool for marketers, as this information can then be used to increase sales through personalised targeting.
Implicit data such as user location, age and location can be used to tailor products based on demographics, whilst explicit personalisation, based on past purchases and searches for example, can be employed once you’ve been able to capture who they are. A personalised customer experience, where the site adapts to the visitor, – can give them confidence that you can deliver what they are looking for. If this stage is planned well any site can have a customer’s trust (and wallet) for life. One of the common mistakes that organisations make in this stage is to focus too much and do major monthly iterations on visual UI but as Steve Jobs once said Design is not just what it looks like and feels like. Design is how it works. In this stage customers will engage with you if it gives them pleasure and takes away the pain and any element that gives customer the pleasure of discovery is what you need to focus on to take the customer to the next stage.
Ordering Process
This stage of customer experience starts once the customer has clicked the Buy button of any product, typically the customer has shown the purchase intent and is ready to share a part of the wallet . This stage provides the lot of opportunities for for revenue maximisation .At HomeShop18 this is a stage that we concentrate a lot and changes in the form design and interaction has generated additional monthly revenues in eight digits. The simple way to optimise this stage is by figuring out modifications that can help in taking more customers to the next stage in the ordering process . The famous case study of USD 300 million button was in this stage of customer experience. Abandonment Tracking as well as Upsell and Cross sell if done intelligently can also help in adding more revenue at this stage.One of the best experiences in this stage has to be amazon.com and may be vistaprint.com is a great example for for upselling.
Product Shipping and Delivery
This is the most difficult stage to manage the experience , primarily because the customer has already shared a part of wallet with you and any experience bloopers in this stage may destroy the relationship. Timely Alerts, Fastest possible delivery time and delivering the exact goods ordered for are hygiene factors that can help in generating the trust in customers and one of the most difficult aspects of this stage is that the moment of truth when the product is delivered to the customer is typically owned by a third party like a courier service which makes it even difficult to manage.
Returns & Refunds
This is final stage which is a grey area that customers are exploiting by returning the products after usage within 30 days and none of the companies currently in India has been adventurous enough to offer a policy like Zappos.
India is still waking up to the potential of E-Commerce and the potential in disrupting offline business is huge. All online businesses are not even 1% of the offline businesses and still a large percentage of customers research online and buy offline. This will change with time and the leaders will emerge who follows the same strategy as Warren buffet- ‘be long term greedy, not short term greedy’.

Best Practices for eCommerce Checkout Design

Here is the harsh reality of e-commerce websites: according to recent e-commerce studies, at least 59.8% of potential customers abandon their shopping cart (MarketingSherpa puts it at 59.8%, SeeWhy at 83% and MarketLive at 62.14%). The main question is why do customers abandon their shopping cart so often? Is there some fundamental mistake that designers of e-commerce websites do very often? Are there any common guidelines or rules of thumbs that make it more difficult for our users to purchase products? And is there some meaningful way to improve the conversion rates for our products?
Well, that’s exactly what we wanted to find out. In 2010, we recruited a batch of Web users and conducted a usability study, focusing only on the checkout user experience, from “Cart” to “Completed order.” The study was conducted using the “think aloud” protocol and was documented by recording everything that happened on the computer screen. The behavior of the test subjects was then analyzed by scrutinizing these recordings at a later date.

The study has shown that it is often difficult to lead customers to the final step in the checkout process when the only thing left is to submit their credit card details.

In this article, I share 11 fundamental guidelines from that report with you.

1. Your Checkout Process Should Be Completely Linear

Issue: Having steps within steps confuses and intimidates customers as it breaks with their mental model of a linear checkout.
One of the worst usability violations that we discovered in our testing was non-linear checkout processes. Websites with a non-linear checkout process left several of our test subjects confused and intimidated. At the time of testing, both Walmart and Zappos had a non-linear checkout process.
The typical way to “accidentally” end up with a non-linear checkout process is to create steps within steps. This happens, for example, when the customer has to set a “Preferred shipping address” (Walmart’s violation) or “Create an account” (Zappos’ violation) on a separate page, and is then redirected to a previous checkout step upon completion.
Below, you can see Walmart’s checkout flow in thumbnails (click image for larger view). Notice that it’s non-linear because the “Preferred shipping address” sub-step directs the user to a previous step:

Walmart’s non-linear process. Large view.
Luckily, making the process completely linear is easy. In this case, a sub-step such as “Account creation” should never redirect to a previous step in the checkout process, but instead direct the customer to the next step in the checkout process.
This is critical because the mental model of most customers dictates that a checkout process should be linear. Upon seeing the same page twice, most customers would conclude that the website has an error, because this is what happens with validation errors.
As one test subject said, “This looks suspiciously like the page I was on before. Is there something I didn’t do correctly?”

2. Add Descriptions To Form Field Labels

Issue: Without descriptions, many form field labels can be ambiguous.
“What does this “Address line 2” mean?” a test subject mumbled. Other test subjects were confused by “Billing address.”
The vast majority of test subjects had problems understanding certain labels. They varied in which labels they had trouble with. The problem was critical in a few cases, and one subject gave up a purchase because she couldn’t understand the label for a required field, making it impossible for her to complete the checkout process. Therefore, always provide clear instructions for each field.
One form that caused confusion belongs to HobbyTron, where test subjects had to guess what “First” refers to:

On Apple’s website, the majority of test subjects started typing their zip code in the field labeled “Area code”:

When you have form field labels without any explanation, some of your customers will likely be confused about what information is being asked of them. Alleviate this by adding short descriptions and examples next to labels. Because not all customers need the extra help, you may want to hide these instructions behind a “What’s this?” link, or perhaps slightly fade its color or reduce the font size.
Below are examples of how descriptions below form field labels can help customers understands what inputs are required of them:

Even unambiguous fields, such as “Email address,” are great opportunities to explain what you’ll use the data for. “Email address” may be a sufficient description, but most people would want to know how you’ll use their email address. Why do you need it?
Finally, for fields that users have to fill in by referring to a paper or card, illustrations can enhance the descriptions a lot (for example, an image of an expiration date from a credit card).

3. Avoid Contextual Words Like “Continue”

Issue: Contextual words such as “Continue” are ambiguous and tend to confuse customers.
Depending on the customer’s state of mind, a button labelled “Continue” in a shopping cart could mean one of two things:

1. Continue shopping
   Say, if the customer is also looking for a shirt to go with those jeans.
2. Continue to checkout
   If the customer has all the products they need and just wants to pay.

Another example is “Back.” Back to the last page? Back to the search results? Where? And how about “Proceed”? These are all contextual words that change in meaning depending on the context (i.e. the page) and the customer’s state of mind.
HobbyTron was one of the websites on which multiple test subjects clicked on the “Continue” button thinking they would continue to the checkout section:

Hobbytron’s Continue button. Large view.
After clicking a wrong button, one test subject said:
It was confusing because I thought, “I want to continue.” I didn’t think about continuing shopping, but rather I was continuing to checkout.
This is a good example of how contextual words, being open to interpretation, can confuse customers. Roughly half of the test subjects at least once clicked a wrong button because of contextual words.
Instead, use words that aren’t open to interpretation, such as “Check out now” and “Shop more.”

4. Visually Reinforce All Sensitive Fields On The Payment Page

Issue: Customers might hesitate if credit card fields don’t appear secure (regardless of actual security).
Many test subjects didn’t think about security until they had to enter their credit card details. In fact, several test subjects talked about certain parts of the checkout page in terms of being “secure” and “insecure” (typically related to credit card details).
Parts of the page with security icons, badges or text and a general “robustness” were perceived as being more secure, while parts without these visual cues inspired less confidence, despite the fact that these fields were all part of the same form on the same page. Technically, there was no difference in security. However, most customers don’t understand the technical workings of forms. All they know about your website is what their gut feeling tells them.
There is a clear divergence between the customer’s mental model of form-field security and the actual security.
As one test subject who had just abandoned their purchase said, “It didn’t look safe enough.” Her reaction wasn’t based on the technical security of the website, but rather on the perceived security of the fields.
Below is a quick mock-up I made to illustrate how you can visually secure your credit card form fields (version B). Notice the background color, padlock image and placement of the GeoTrust seal:

Mock-up of a visual reinforcement. Large view.
By adding visual cues (such as borders, background color, and security icons and badges) around the form fields for credit cards, you can increase their perceived security for non-technical customers.

5. Don’t Use An “Apply” Button In Your Form

Issue: Customers don’t understand “Apply” buttons for distinct sections of a form.
More than half of test subjects were confused by websites with an “Apply” button somewhere in the form; for example, to apply a shipping method to an order.
In almost every case, these buttons were either:

1. Not clicked, even if the relevant input field was filled out;
2. Mistaken for the main form submission button.

Test subjects simply didn’t understand the purpose of having a separate “Apply” button in a form.
Below is Newegg’s checkout, where only half of test subjects who filled in their zip code also clicked the “Go” button (problem 1 from above):

NewEgg’s Apply button. Large view.
The consequence of mistaking “Apply” for the main form submission button is that customers will be redirected back to the same page in order to apply the change, thwarting their expectation of moving to the next step and likely leading them to think that there’s an error on the page (as we saw in guideline #1). This happened to two test subjects, who were left to guess what the error was because no error message was displayed (since a technical error never actually occurred on the page).
Below is a form for American Apparel, where test subjects mistook the “Apply” button for the main form submission button (problem 2) and consequently couldn’t proceed with the purchase.

American Apparel’s Apply button. Large view.
If you really need to update a value before moving on to the next step, then auto-update the value using AJAX or the like, without showing an “Apply” button.

6. Format Field For Expiration Date Exactly As It Appears On Credit Card

Issue: Fields for credit card expiration dates can be tricky to decipher if they aren’t written exactly as they are on the credit card.
Some websites use month names, while other websites use a combination of month names and numbers, while still others just use numbers. Which is best? The correct way to format a field for an expiration date is to match what the customer sees on their credit card (i.e. numbers only). This minimizes confusion and misreading because the user can easily verify the field against their credit card.
Below are four examples of how not to format the fields for expiration date. Example D, with the month written as text and the year in four digits, is the worst.

The correct way to format the month field is to use numbers and to prefix all single-digit numbers (i.e. 1 to 9) with a 0, so that they appear exactly as they do on credit cards (for example, 03 for March).
The correct way to format the year field is to use just two digits, to match the number on the credit card (for example, 14 for 2014).
Our test subjects didn’t have any difficulties when month names were included, as long as they came after the digits. So, “03 – March” is okay, but “March – 03” is not. Whatever is on the credit card should appear at the beginning of each option.
You could put a forward slash (/) between the month and year fields to further match credit cards (so, 03 / 14 for March 2014).

7. Use Only One Column For Form Fields

Issue: Customers have an amazingly difficult time understanding the relationships between form fields in two columns.
Half of the test subjects had problems when form fields were in two columns. There were two typical scenarios:

1. One of the two columns of form fields was missed. It was either dismissed as unrelated or simply overlooked by test subjects.
2. Unrelated form fields were filled in and/or submitted, often causing validation errors.

Below is Perfume’s form for signing into and creating an account:

Perfume.com’s shipping form. Large view.
This form was interpreted in three ways:

1. All form fields should be completed in order to create an account.
2. The “Email address” field and the fields in the right column should be completed to use “Guest checkout.”
3. Either the left or right column should be filled out.

Another example is PetSmart. There, the most common behavior was to overlook the second column, with the “Credit card identification number,” resulting in an error message:

PetSmart.com’s payment form. Large view.
On two occasions, test subjects abandoned their purchase because they kept submitting the wrong data in the wrong column.
Our suggestion is to use a single column. None of our test subjects showed any difficulty with this.

8. Use Shipping Address As Billing Address By Default

Issue: Most customers order products to their home, so requiring both a billing and shipping address doesn’t make sense.
Customers typically order products to their home address. So, by default, you should use the same address for shipping and billing, unless you happen to record data differently for your store.
By defaulting the billing address to the shipping address, your checkout process will have many fewer fields, making it less intimidating for customers. Users also reduce the risk of misspelling their address if they have to enter it only once; they won’t rush through the form as quickly, and if there are errors, the customer will have to fix them only once.

NewEgg’s checkout. Large view.
Moreover, you should hide the billing address fields entirely. Disabling the fields isn’t good enough. On the one website that did this, most test subjects were confused by why the fields were grayed out, with some users clicking on them. Instead, show only the fields for the billing address, unless the customer explicitly asks to use separate shipping and billing addresses.
Some websites have a “Copy shipping address” button. The problem with this is that it also copies any errors, so the customer has to correct the same information twice. While the customer could just click the “Copy shipping address” button once they’ve corrected the error, all of the test subjects in this situation forgot to do so.

Apple’s copy shipping address feature. Large view.
Also, depending on the website’s layout, such a feature could be easily overlooked. On Apple’s website, half of test subjects overlooked the “Copy shipping address” link and ended up typing in the same address again.
A check box (or something similar) is better for this purpose because errors will have to be corrected only once. Amnesty International’s checkout page is a good example of how to do this right:

Amnesty International’s checkout. Large view.

9. Use Clear Error Indications

Issue: Customers overlook error messages, making them less likely to resolve the errors.
More than half our test subjects had serious problems finding or understanding error messages on the websites we tested.
When a customer has problems with a form, the likelihood that they abandon the purchase increases significantly. When a customer fails more than once, they will be inclined to leave the website altogether (whether because they assume they were blocked or the website has a bug or something else).
Below are four examples of a lack of a clear indication of error.
On American Apparel’s website, the yellow bar at the top is actually an error message, saying that the data in the phone field at the bottom isn’t valid:

On Walmart’s website, the two red arrows (next to “Ship to home” and “Site-to-store”) are actually error indicators:

On PetSmart’s website, the red of “State/Province” is not an error indicator, but rather just the style chosen for this particular label:

On Perfume.com’s website, the red does indicate an error in the “Phone” field:

Unless placed in close proximity to the relevant fields, error messages were likely to be overlooked by our test subjects. Many websites present error messages only at the top of the page, not next to the form fields.
Without this proximity, error messages can be difficult to understand. Some test subjects, seeing nothing wrong with the fields, tried to submit the form again, assuming the page didn’t load properly the first time. This, of course, resulted in the same page being shown again with the same error message.
If a customer doesn’t notice or understand your error message, they will not be able to resolve the error or proceed through the checkout process. In such cases, abandonment is inevitable. So, put time and effort into designing and wording your error messages.
Make sure your error messages:

• Are contextualized (that is, not at the top of the page but in close proximity to the relevant fields);
• Are clear and concise;
• Stand out so people notice them (provide high contrast and maybe even use arrows or other visual indicators).

10. Registration Should Be Optional

Issue: Customers strongly resent having to sign up for an account.
Customers dislike having to register for yet another account. This quickly became evident during our testing as every single subject showed great frustration when forced to do it. 30% of them ended up abandoning one of their purchases as a result.
There are many reasons for this resentment.
For one, customers already have a myriad of user names and passwords to remember and don’t want to create an entirely new account just to buy one or two products from an online store.

Another reason is that 40% of test subjects expected to be spammed with marketing material, even if they explicitly declined to sign up for a newsletter during the checkout process. These customers have a mental model in which Account = Newsletter. Or, as one subject described it: “If I create an account, they can send me spam from now on and forever.” Their prior experience on websites that check the newsletter box by default and obscure it likely led them to this conclusion.
Also, customers likely realize that you’re storing their information indefinitely. While most companies keep a customer’s information in their database regardless of whether they registered an account, most customers don’t think of this. It’s about perception, and some customers just don’t like the idea of a website storing their personal information.
Signing up for an account also takes time. It adds more steps and fields to the process—and complexity. Yet another reason to dislike it.
Finally, many customers just don’t understand why they need an account to buy a product. As one subject clearly put it, “I don’t need to sign up for anything when I’m buying a perfume in a regular [brick and mortar] store.”
Most test subjects didn’t mind having the option to create an account, but they found it illogical and annoying to be required to do so. Some said they would voluntarily create an account if they regularly bought from the website.
If you’re looking for an unobtrusive way to get customers to sign up for an account, then consider simply asking them after they have completed their purchase. “Would you like an account? Just enter a password in the field below.” You can set their email address as their user name and fill in the account information with their order details. This way, the customer isn’t forced to create an account but has an easy way to do so after completing their purchase. (Remember to explain the benefits of having an account.)

11. Don’t Require Seemingly Unnecessary Information

Issue: Customers feel that their privacy is being invaded when they are required to submit seemingly unnecessary personal information.
Refusing to give up their phone number, one test subject anxiously clamored, “Look, why do they need my phone number? What do they need that for? They don’t need it!” Every test subject at one point or another complained about a website that asked for too much personal information.
Being asked for a phone number when the website already had an email address was especially irritating when subjects were trying to make a purchase. The logic goes, if the store already has one way to contact them, why does it need another?

Apple’s checkout process.
If the information is necessary, at least explain why. What is obvious to you may not be obvious to the customer. They have learned to expect the worst when shopping online (usually spam email and phone calls).
Our test subjects were surprisingly forgiving, as long as the website explained why the information was needed. Here’s a tip: don’t hide it behind a link; state it directly in the field’s description. In fact, the test subject we quoted above provided their phone number to another website without any complaints because the store clearly explained that the phone number was needed so that it could contact the customer in case of delivery problems.
The more expensive the order, the more accommodating the customer will be. When buying a laptop, customers want you to be able to contact them. But this holds true only if you require the information in order to complete the purchase. On websites where the field was optional, our subjects weren’t comfortable giving their phone number and simply left the field blank. However, this means that required and optional fields must be clearly distinguished.

Designing A Better Checkout Experience

While there are many more subtleties to designing a good checkout experience, these 11 guidelines go a long way. If you adhere to them, your checkout process will perform well above average.
In a study that he conducted 10 years ago, usability guru Jakob Nielsen concluded that large e-commerce websites violated many basic checkout usability guidelines. It seems little has changed when you look at websites like AllPosters and Walmart.
While a lot of the big websites boast impressive features such as geo-targeting, address validation and state look-up, they don’t manage to get basic usability principles right, and they suffer greatly as a consequence.
With the latest improvements in Web technology and browsers, the potential to create an amazing user experience has increased dramatically. Yet, advanced features shouldn’t be the focus until basic usability guidelines are met. If we add the latest technology just because it’s new and exciting, then today’s abandonment rate of 59.8% is unlikely to decrease.
Things like meaningful flow (see guideline 1), good copywriting (2, 3), simple form design (4, 5, 6, 7, 8, 9), and privacy considerations (10 and 11) go a long way to creating a great checkout experience.
Do yourself and your customers a favor by following these 11 guidelines. Once you’ve covered the basics, you can venture into more advanced territory.

10 Checkout Strategies

Here are 10 key strategies for making the checkout process easy for even inexperienced shoppers.

1. Display steps. If your store uses a multi-page checkout, be sure to include steps on each page. This helps eliminate frustration by telling shoppers how many more steps there are. Ultimately, the checkout process should contain no more than three stepped pages.
   
2. Display payment icons. There’s nothing like completing most checkout fields only to find out the store doesn’t accept your preferred payment type. By providing this information up front, shoppers will be prepared and less frustrated.
   
   
   

   Checkout steps and payment icons tell the shopper what to expect.
3. Put instructions where they matter. Forget about including all page instructions in a header. Few people will read them. Instead, place instructional text in the same area to which it applies.
   
4. Denote processing times. Many stores have a cut-off time for processing orders. By telling shoppers that orders placed after a certain time won’t ship until the next day, you can avert their frustration, especially when they opt for overnight shipping.
   
5. Explain military addresses. People are still confused about the address format for shipping items to servicemen and servicewomen. All military addresses are U.S. – regardless of deployment locations. Also, include state selections of AA, AE and AP.
   
   
   

   Providing instructions next to appropriate fields helps lessen confusion and further guides the customer to a successful transaction.
6. Help with security codes. Show them where the CVV / CID is on their credit card. Don’t assume everyone knows where to find those 3- and 4-digit numbers.
   
7. Display a link to the shopping cart. During the initial step, be sure to give shoppers the opportunity to modify their shopping carts. This helps cut down mistakes, especially quantity-based issues (such as ordering two items when they meant to order only one).
   
8. Include any live chat links. If your store offers a live chat feature, include that information throughout the checkout process so customers can quickly get answers.
   
9. Clearly show errors. Display any errors in red, both at the top of the page and where the error is actually located. Don’t expect shoppers to hunt for the problem’s location. For example, if the credit card was declined, display the error at the top of the page and change the color of text for the payment fields to red.
   
10. Only required info should be required. Survey questions, order comments and gift messages should never be required. If customers want to tell you how they found your site, or that they experienced a problem, they will.
    

You should still be analyzing cart abandonment to help determine other problem areas. If you provide guidance, however, and require minimal effort from your shoppers, you stand to minimize cart abandonment.

The Complete Guide to A/B Testing

What is A/B Testing?

A/B testing (sometimes called split testing) is comparing two versions of a web page to see which one performs better. You compare two web pages by showing the two variants (let's call them A and B) to similar visitors at the same time. The one that gives a better conversion rate, wins!
All websites on the web have a goal - a reason for them to exist.

• eCommerce websites want visitors buying products
• SaaS web apps want visitors signing up for a trial and converting to paid visitors
• News and media websites want readers to click on ads or sign up for paid subscriptions

Every business website wants visitors converting from just visitors to something else. The rate at which a website is able to do this is its "conversion rate". Measuring the performance of a variation (A or B) means measuring the rate at which it converts visitors to goal achievers.

Why Should You A/B Test?

A/B testing allows you to make more out of your existing traffic. While the cost of acquiring paid traffic can be huge, the cost of increasing your conversions is minimal. To compare, a Small Business Plan of Visual Website Optimizer starts at $49. That's the cost of 5 to 10 Google Adwords clicks. The Return On Investment of A/B testing can be massive, as even small changes on a landing page or website can result in significant increases in leads generated, sales and revenue.
If you want to see proof of how others in your industry have benefitted from A/B testing, have a look at our Case Studies page. We've collected more than 70 examples of how online businesses have optimized key metrics through A/B testing.

What Can You Test?

Almost anything on your website that affects visitor behavior can be A/B tested.

Some elements that you can easily
test are:

1. Headlines
2. Sub headlines
3. Paragraph Text
4. Testimonials
5. Call to Action text
6. Call to Action Button
7. Links
8. Images
9. Content near the fold
10. Social proof
11. Media mentions
12. Awards and badges

Advanced tests can include pricing structures, sales promotions, free trial lengths, navigation and UX experiences, free or paid delivery, and more.

A/B Testing and SEO

Google cleared the air on the SEO implications of A/B testing in their blog post titled "Website Testing And Google Search". The important bits from that post are:

No Cloaking

Cloaking - showing one set of content to humans, and a different set to Googlebot - is against our Webmaster Guidelines, whether you're running a test or not. Make sure that you're not deciding whether to serve the test, or which content variant to serve, based on user-agent. An example of this would be always serving the original content when you see the user-agent "Googlebot." Remember that infringing our Guidelines can get your site demoted or removed from Google search results - probably not the desired outcome of your test.

Use 302s, not 301s.

If you're running an A/B test that redirects users from the original URL to a variation URL, use a 302 (temporary) redirect, not a 301 (permanent) redirect. This tells search engines that this redirect is temporary - it will only be in place as long as you're running the experiment - and that they should keep the original URL in their index rather than replacing it with the target of the redirect (the test page). JavaScript-based redirects are also fine.

Only run the experiment as long as necessary

The amount of time required for a reliable test will vary depending on factors like your conversion rates, and how much traffic your website gets; a good testing tool should tell you when you've gathered enough data to draw a reliable conclusion. Once you've concluded the test, you should update your site with the desired content variation(s) and remove all elements of the test as soon as possible, such as alternate URLs or testing scripts and markup. Remove all elements of the test as soon as possible, such as alternate URLs or testing scripts and markup.

The A/B Testing Process

The correct way to run an AB testing experiment (or any other experiment for that matter) is to follow the Scientific Method. The steps of the Scientific Method are:

1. Ask a question: "Why is the bounce rate of my website lower than industry standard?"
2. Do background research: Understand your visitors' behavior using Google Analytics and any other analytics tools running on your website.
3. Construct a hypothesis: "Adding more links in the footer will reduce the bounce rate".
4. Calculate the number of visitors/days you need to run the test for: Always calculate the number of visitors required for a test before starting the test. You can use our A/B Test Duration Calculator.
5. Test your hypothesis: You create a site wide A/B test in which the variation (version B) has a footer with more links. You test it against the original and measure bounce rate.
6. Analyze data and draw conclusions: If the footer with more links reduces bounce rate, then you can conclude that increased number of links in the footer is one of the factors that reduces bounce. If there is no difference in bounce, then go back to step 3 and construct a new hypothesis.
7. Report results to all concerned: Let others in Marketing, IT and UI/UX know of the test results and insights generated.

Your First A/B Test

Starting conversion optimization with Visual Website Optimizer is incredibly easy. Essentially, it is just four simple steps.

1. Include the Visual Website Optimizer code snippet in your website

Including the code snippet means we are now ready to run the tests you create on your website. For further ease, we have plugins for Wordpress, Drupal and Joomla that make the process hassle free.

2. Create variations using the WYSIWYG Visual Editor

Load your website in the Visual Editor and create any changes using the simple point-and-click interface. Advanced users can even make CSS and JS code changes.

3. Choose your goals

All A/B tests have goals whose conversion rate you want to increase. These goals can be straight forward (clicks on links, visits page) or could use advanced custom conversion code.

4. Start and track your test

And that's it, your test is ready to go live. Reporting is real-time so you can start seeing reports as soon as visitors arrive on a live test.

A/B Testing Success Examples

201% increase

Redesigning category webpage increases leads generated

Majestic Wines revamped their category page design to increase online enquiries for their Wedding services by 201%.

144% increase

A/B testing between different pricing structures increases revenue by 114%

Server Density A/B tested between per unit and packaged pricing plans. The winning plan reduced free signups but increased the Average Order Value (AOV), and consequently revenue by 114%.

111% increase

Redesign of ecommerce product page increases conversions

Conversion Optimization Agency Trinity Insight used Visual Website Optimizer to test a better version of the ecommerce product page. This led to a 111% increase in conversions.

15 eCommerce A/B Testing Ideas to Make Your Cash Registers Ring Faster Than Ever

If you love A B testing, eCommerce sites should be your favorite playground. These sites have so much happening at every level that you can never test too much.
Amazon, the market leader, is well known for its habit to test everything. Following its footsteps, when you run short of ideas, here is a checklist for 15 eCommerce A/B testing ideas you can save for reference:

Homepage Test Ideas

1. Add Trust/Award Badges

Many sites have started adding the Trust Pilot customer reviews widget or badge on different steps of the funnel. Express Watches used it on their homepage which increased their sales by 58.29%. You can see how Webtogs display the Trust Pilot Badge on their homepage with other award badges:

Although this looks great, I think a more prominent position of these badges might help improve conversions for Webtogs.
Our customer, Bag Servant, also increased their conversion rate by 72.05% when they added the esteemed “WOW Winner” badge, won by them, in the header of their homepage.

2. Test Your Drop-down Menus

One of our clients replaced its drop-down menu with an elaborate product category page for better usability. Result? Their revenue increased by 56.43%. Read the complete case study here.
Eye tracking studies have also shown that drop-down menus can annoy users. You should especially consider this option if your target audience is from older age group or users with disabilities.

3. Tell Them If You Ship to Their Location

I came across this website named, Threadless.com, while randomly surfing the Internet. I would have never explored it any further if their message “Yep, we ship to India” hadn’t been displayed. I would have thought that it’s probably a US/UK based site that doesn’t have any shipment policy for India (like most websites).

As a Visual Website Customer, you probably know that setting up this test in our tool wouldn’t take more than a few minutes with our Behavioral & Geo-targeting Feature.

4. Remove Your Image Carousels

Image sliders may seem attractive on a homepage, but their reputation in the conversion optimization industry was tainted long ago. Let’s hope you listened and removed those distracting rotating banners. But what next? Check out this post for three ideas you can use to replace your carousels and improve conversions.

5. Give Them Live Chat Assistance

A Forrester Research study found that 44% online consumers want live chat assistance when they are in the middle of a purchase. Practical Commerce reports a case study where live chat boosted conversions by 17% for SupplyGeeks.com. To know more about how you can use live chat better, you can read this awesome article by Kissmetrics.

Product Page Testing Ideas

6. Create Urgency

The time is running out. See how the timer is used by Express Watches on their product page to create urgency:

7. Add Product Videos (At Least for the Popular Products)

Videos are the closest experience users can get online to buy a product. They help people imagine how they will feel when they have the product in their hands. Simply Hike has videos for every product:

According to this report by Reel SEO, visitors who do not watch the video but still have the option to watch them, convert at a higher rate than those who don’t have the option. An article on Smart Insights quotes Matt Lawson, the conversion expert for Appliances Online, where he mentions:

“We have tested and proven that when someone watches our video reviews they’re 120.5% more likely to buy, spend 157.2% longer on the site and spend 9.1% more per order.”

You got the gist. Read my post on how to use videos to boost sales.

8. Price Match Guarantee

See how Webtogs display their guarantee seals and even explains (below the seal in the header) the value of that guarantee to win trust of visitors in an instant.

Bonus points to this site for providing the option to convert prices in different currencies on the product page. Below is the pop up that shows up when you click the option to change country on the product page.

9. Provide 360° View of Products

Larger product images increase conversions. But you probably know that already. Go one step ahead and provide 360 view of your products. Let your customers have no doubts. Give them a closer real life experience with 360° view of products. This will give them the confidence to buy products.
Due Maternity added the 360-spin to their images which increased their conversions by 27%.
Jabong puts this into action pretty well:

10. If You Do Not Provide Free Shipping, Reveal Shipping Fee on the Product Page

We all know charging for shipping is a big conversion killer. But we all have our financial constraints. If you charge for shipping, mention that cost upfront. Ozscopes goes a step ahead and provides a shipping calculator on their product page:

A comScore study revealed that 47% of customers will abandon the cart if they saw that they are being charged for shipping during the checkout.
Sometimes the revenue difference between cheap shipping and free shipping can be huge. There’s no way you can beat the charm of “free shipping.” So if at all you can consider offering free shipping, it can increase your average order value too, in case you haven’t realized it. You can read this article for more information on this.

Checkout Testing Ideas

11. Use Recognizable Security Seals

A survey was conducted to know the security seals that are most effective. The responders were asked which single logo gave them maximum assurance. And these names stood out to be clear winners:

• PayPal (29%)
• Verisign (25%)
• McAfee (23%)
• BBB (7%)
• TRUSTe (3%)

Having security logos that are not recognized or trusted by customers are almost like having no logos at all.

12. Use Reassurance Text

If you do not want to pay for pricey security seals, you can also try adding some reassurance text. Like you can see how Wiltshirefarmfoods.com pulls this off perfectly in the image below (and pass out on any security seals whatsoever):

But one thing you must take note here is, your website’s usability and design should be exceptionally brilliant for this to work.
The text version can sometimes work even better than security seals if your target audience is from an older age group, who do not understand or recognize these security badges.

13. Make Them Generate Promo Codes

All credits to the conversion expert, Craig Sullivan, for this one. The trend is, you ask customers if they have a promo code in the checkout process. And give them a blank box to enter this code if they have it. There are SO many sites who do this to increase sales. But this one can often backfire. Majority of customers leave the site to google for active coupons. Often they get distracted with other stuff they find and never come back to complete their checkout.
Here’s what Craig suggested you can do about it:
Step 1 – Create a link that says “Got a promo code?” instead of a blank box that asks you to enter the promo code.
Step 2 – Once the customer clicks on that link, open a collapsible div that shows two options:
a. Enter the promo code (for those who have it)
b. Generate promo code (for those who do not have it)
You can see this in the image below:

Like it is mentioned in the above image, the promo code generated by customers will only be delivered when they complete their current transaction. This will avoid people leaving the site to find the coupon code if they do not have it. Plus, it will also motivate them to complete their current order, which should reduce your cart abandonment rate.

Thank You Page Testing Ideas

14. Post-Purchase Social Share

Thank you pages are often ignored when people talk about increasing the conversion rate of a website. But not optimizing your thank you page is like asking people to leave from your home (or, website in this case). Sure, they have just bought something and might not be ready to buy something immediately.
But this is where you can tell them what you want them to do. Amazon provides their customers social media options to share the stuff that they have just ordered:

This is great because chances are people in the same network often have similar interests or age group. And if something appealed to one person, it might be liked by other people in their circle too.

15. Ask Them If They Would Like to Participate in a Survey

Knowing your customers always pay off in future. Ask them if they would like to participate in a short survey and get some useful insights from them.
For more ideas on how you can optimize your thank you page, you can read my article here.
Finally, don’t take my word for it. AB test them to see which of these ideas work for you.

Top 9 E-Commerce Usability Guidelines

 



e-Commerce websites are increasing at an incredibly fast rate. There are no boundaries and any geographical restrictions have long disappeared, allowing shopping enthusiasts to shop at their convenience. In spite of these advantages, most e-Commerce websites are performing poorly. e-Commerce websites often fail in their primary objective of making purchasing easy for customers. This article explains common pitfalls and provides a set of e-commerce usability guidelines that can help you make your site more usable.

1. Navigation: Keep it simple. Don’t confuse your customer

Is your navigation structure a complex maze hidden under complicated series of clicks? If yes, this is the biggest strategic blunder in an e-Commerce website. A neat navigation structure will allow smooth and effortless browsing, which ultimately encourages visitors to continue explore the site and turn them into regular site visitors. You need to give tactical thought to the navigation structure of your website to ensure that customers are able to locate information, compare products, and make payment with minimum clicks. To improve the navigation of your e-commerce website, you can head over to this article.

 

2. Homepage: Get it right the first time

Your homepage often creates first impression on the minds of visitors – at least for those who have commenced browsing your site by going through the door. It is imperative that site visitor must find exactly what they’re looking for the moment they arrive. e-Commerce websites need to display numerous product offerings rather than just displaying one or two products on homepage. By displaying very few products on homepage, you are narrowing down customer’s choice from the word go.

3. Product Page Font Visibility: Grab visitor’s attention

Right color combination, font size, and font color ensures that visitors do not have any problem viewing product details and that they find relevant information they are looking for in the shortest possible time. So, every element should be designed to achieve this goal.

4. Add to Cart Button: Final action just a click away

Very often, the ‘Add to Cart’, the final action button in an e-Commerce website is either not well designed or strategically placed to grab prospective buyer’s action. The selection of shape, color, font typography, and button content all trigger the final action. Make sure the ‘Add to Cart’ button is obvious, bright, and prominent in comparison to other features on product page such as wishlists, view product, email to friend, or check out buttons. Less important functions should be lighter colored buttons or simple text links.

5. Font Visibility: A Costly mistake

Another often overlooked e-commerce usability guideline is selecting right typography. Deciding on what font type, font size, and font color to use can be very tricky. You may spend thousands and thousands of dollars on cutting-edge e-Commerce platform and hire most expensive developers for its robust performance, but your site just won’t work if this very basic and crucial aspect of website designing is neglected.


 

6. Primary Navigation: Quick access guaranteed

It is equally important to have an intuitive and engaging primary navigation so that users can find information they are looking for quickly with minimal clicks. For those who are not aware, primary navigation controls are present in a sidebar to the left, right, or top of a page on inner pages. These controls allow users to surf effortlessly on the site. The easier and interesting you make it for your audience, the more likely they are to stay on your site, buy the product they are looking for, and return to your site in future. Dull and mundane primary navigation just won’t work.

7. Trust: Key lies in winning customer’s trust

e-Commerce websites run on the fundamental principle of trust. In order to win customer’s trust it is very important that you study customer psychology. Lack of secure site (https) or lack of a certification by an Internet trust organization can prevent customers from buying from your store. Online businesses must provide security against misuse of confidential information and clearly display privacy policies. Providing guarantees as will client testimonials of actual clients (fake testimonials will hurt you more) will help in improving credibility of your site. It is equally important that you mention details for contacting your organization such as physical address and phone number.

8. Special offers: Don’t save best offers for last

Customers are looking for special offers, discounts, or best deals. Don’t shy away in flaunting such offers at the home page. It is most likely that customer will review special offers and it will strike a chord on the first attempt. Remember the goal of e-Commerce website is not just better user experience, but also to increase sales and improve bottom-line results.


 

9. Breadcrumbs: Where am I?

What is a breadcrumb? It is text-based navigation that shows your current location in the site hierarchy. If your existing e-Commerce site does not have breadcrumbs, it might result in customer discomfort. Customer might feel lost in the maze of product links and rattled if unable to find exact location in site. Highly time-effective, breadcrumbs help in reducing site abandonment and prevent consumer from going off track while placing an order.
Please see an example of breadcrumb below:
Home>>Brands >>Women>>J. Renee
Not only does it give your location within the site, but it also provides shortcuts within the site hierarchy. It is a standard navigational element in most of the robust and successful e-Commerce websites.





 

Conclusion

Success of e-Commerce websites lies in improving user experience, keeping it simple, and winning client’s trust. This will not only result in converting potential clicks into final transaction payment, but also strongly influence the customer to revisit your website in future.