Sometimes the best way to understand how to think about improving web conversion is to walk through an evaluation of an actual landing page. Today I’d like to walk you through my approach to landing page web conversion and evaluate the website www.heyviv.com, this site sells vintage 1950’s clothing to two different groups, costumers (for example student plays, Halloween, etc.) and vintage clothing collectors. Check out the site for yourself if you are in one of these two groups, the quality and authenticity of the products are top notch.

Before evaluating any landing page it’s important to understand the upstream traffic of where visitors are coming from, how the landing page is being used. What I mean by upstream is the click right before the visitor gets to your landing page, where did they come from? What are the primary the traffic sources for your page?

This landing page is being used in a few different ways:
1. As a page within the flow of the website from a “Costume Help” link
2. As a landing page from a Google AdWords search ad
3. As a page sent from email correspondence with existing and prospective customers answering questions to people who are doing a 1950’s style show or play.

By understanding where traffic is coming from we can get a better idea of what the visitors needs and motivations might be in order to see the page through their eyes.

In each case the visitor is coming from a different place upstream and has different expectations, motivations and needs. So for each point upstream the intent is different for each user type.

The expectation from the Costume Help link – needs a bit more hand holding and perhaps they don’t know where to start or what they need.

The expectation from the search ad – is to browse 1950’s Grease costumes. They may know what they want since they are searching for a specific keyword and have an immediate need for a costume for a play that is next week.

The expectation from the email visitor – might be for more clarity on specific details of the garments, but each email may be a different case depending on the email content and context.

Each of those expectations have to be dealt with, either on the page or as 3 separate pages.
It’s easier to deal with them on separate pages because you can really focus on a single goal for the page and really target to your traffic and optimize or improve your sales and web conversions. My first recommendation is to create 3 pages to deal with each traffic source.

So let’s take a look at the page with these 3 types of users in mind. Depending on which channel a visitor is coming from upstream (search, email or help link) remember, the motivation and intent of the user will be different for each upstream point.

For this post we’ll only be examining one upstream point for the sake of simplicity and the highest impact on web conversion for HeyViv, which is the user type with the highest likelihood to buy, so let’s take a look at the AdWords search traffic, starting with the ad.
Below is the AdWords copy that is driving the most visitors to this landing page.

1950s Costumes & Vintage
Outfits for plays, parties & events
All sizes, quick ship, discounts
www.HeyViv.com

1950s Costumes & Vintage
Outfits for plays, parties & events
All sizes, quick ship, discounts
www.HeyViv.com

The landing page for these ads needs to address costumers who are looking for 1950’s outfits for a production, dance, event or play. They are there to shop because they need something and usually fast.

These visitors need more reassurance about outfits for specific plays, maybe full outfits for different characters in the play. In general there are too many options that get the visitor off track. The page needs to be designed to help this visitor group buy.

The first way this page can go about accomplishing that is by reinforcing the key points used in the ads like the words “1950s” “Outfits for plays” etc. by reusing those keywords prominently as headlines and sub headlines on the landing page your letting the visitor know the page they are on has what they are looking for. This subtle form of reassurance provides verbal ques to the visitor to help orientate them. Once a visitor clicks their anxiety level goes up. It’s like they have just been dropped off on an alien planet. Your landing page design needs to relieve this anxiety as immediately as possible so as to keep them from bouncing.

Once their anxiety level has calmed down a bit, knowing they are in the right place for what they need is the perfect time to present a strong value proposition and answer why they should buy from you over all the other options they have. This further reduces they disorientation and anxiety however you’re not done yet.

Next, you need to address some of their buying concerns upfront. Remember all you’ve done so far if you followed the advice so far is slightly reduce their anxiety level; you haven’t begun to sell to them yet. At this point they need to know you have the 1950’s clothing they need, is it right for what they need it for and how much does it cost. Currently the landing page does not list any prices, forcing the visitor to pogo-stick back and forth from this page to the product detail page and vise versa. By forcing them to click back and forth you’re not making it easy for them to buy.

Once product and price have been addressed on a newly redesigned landing page, the page still has even more work to do to make more sales. At this point your visitor has decided not to leave, at least not to leave just yet. You’ve gotten past the first 3 seconds, so it’s time to continue to reduce their anxiety and reassure them that buying form you is safe. You’re page design’s next step is to continue down the selling path by addressing concerns like – shipping policy, return policy, etc. Remember the visitor hasn’t decided they want to buy yet. Your design needs to accomplish all of these things on the landing page itself so as not to lead them off the buying path.

The key to increasing web conversions on your landing page is to put the visitors goals at the center of your design and help them buy from you. When you approach web conversion from the point of view of your visitors buying process you can clearly see what needs your visitors require and in what order you must satisfy them in order to increase your online conversion rate.

The Web has come a long way since the 90’s. Connection speeds are faster, pages load quicker, screen resolutions have expanded and visitors have become more web savvy. These and other factors contribute to the death of the page fold.

What is a Fold?
The term “fold” and “below the fold” come from the newspaper industry. Newspapers were really thick back then, most of them are still long and are folded in half to display. The concept was that you kept the most important elements above the fold since everything below the fold is not visible on the newsstand display. On the web the fold translates to any content that the visitor needs to scroll to in order to see it.

The Fold is Not Really That Important
Now you don’t need me to tell you that the web is different than a newspaper, but I’m going to anyway. The old mentality of the fold for a newspaper is based on catching your attention to get you to buy that particular paper among the stacks of others on display. In a world that’s moving away from disruptive advertising and more towards search driven awareness grabbing the attention of a web visitor is shifting beyond the awareness step and straight to the interest and possibly directly to the desire step of the AIDA formula. (Awareness, Interest, Desire, Action) In this new marketing world the fold is becoming less important.

cxpartners, a user centered design agency in Bristol UK has recently posed an article on their blog with evidence from user testing that proves the page fold is a myth. We’ve been telling our clients that for years, thank you cxpartners for qualifying this for us.

According to cxpartners: “Over the last 6 years with over 800 user testing sessions on only 3 occasions has the page fold been a barrier to users getting to the content they want.”

As a side note cxpartners eye tracking study supports a previous blog post of ours on how to Get More Sales With Effective Web Copy using an F pattern layout for maximum conversion rate marketing.

The Fold Is Kind Of Important, A Little Bit
The fold still exists on the web, it’s just a limitation of the height of your prospects monitor and screen resolution. Scrolling down on a web page is easy, so the barrier to scrolling is not as big as the second half of the front page of the newspaper that you can’t see on the newsstand.

However, scrolling below the fold will always be tied partly to the motivation of the visitor, how good your content is or how closely it is matched to their needs and how persuasively designed your page is.

The design of your page is connected to your conversion rates and that brings us to designing for conversion.

The Principles Of Designing For Conversion & The Fold
People are inherently lazy so you shouldn’t always count on them scrolling. You need to bake persuasion into your design to help your prospect get to the information they need in order for them to feel comfortable to convert to a customer.

Principle 1
Peek out a bit to let them know there’s more.

Let’s take a look at an example from Homedepot.com There’s a dangerously large amount of white space above the product details on this page. For a decision maker that is about to spend $800 on a snowblower you’ll want to know a lot more than just the information that HomeDepot shows you above the fold here. There’s so much white space at the fold line that a prospect may not feel there is more information below the fold.

How Can This Page Be Designed Better?
Building on the first principle of designing for conversion and the fold this page can easily be adjusted to take advantage of persuasion and help the future owner of an $800 snowblower to make his purchase with a bit more confidence and reassurance that he’s spending his money wisely.

I’ve redesigned some elements to reposition the product description as well as other tab information that a methodical decision maker who needs to think through his decision with all of the information presented to him to appear to peek out above the fold. By breaking the image at the fold line this persuasively lets him know there is more content down here that is important. Additionally by repositioning the customer rating box below the add to cart button, this design is also appealing to the skeptical decision maker, who needs to hear things from credible sources, such as third party non biased customer reviews. By aligning this element below the Add to Cart button we created a linear thought hierarchy in the mind of the visitor at the right point within the metal dialog of their online shopping experience.

Designing For Several Folds
You can’t ever be 100% sure where the fold will be on everyone of your prospects experience with your website. A good place to start however would be your web analytics data. Even in a free analytics tool like Google Analytics will tell you the screen resolution of the majority of your visitors. One strategy you could take is to design the fold for the largest segment of your traffic with this data.

Another approach, would be to design for several fold lines depending on various screen resolutions, which could very well drive your web designer crazy. The bottom line is you can’t control the online experience and you will never know exactly where the fold is for each of your prospective customers. With this in mind here are a few more guiding principles to design for conversion and the fold.

1. Use horizontal design elements sparingly, especially bold ones. See cxpartners Hotel Tropico Playa example for this. Psychologically horizontal lines cause web visitors to mentally stop, which could cause them to not scroll.

2. Use vertical design elements, especially for longer content pages. Vertical design elements will draw the viewers eye down the page. This can be accomplished with images, colors, shapes, copy, etc.

Buying a product online has always been an isolated experience. The closest it has gotten to social shopping so far has been reading reviews of other people you didn’t know. That was good and we loved it. The collective knowledge allowed us to get a better sense of the quality of the product and Amazon made it easy for us by comparing the worst review and the best review side by side. Don’t get me wrong, reviews and rating systems are great and they clearly have an impact for online conversion rates. But we’ve entered into the age of the social web and that’s going to change things. We have to change the way we think about social e-commerce shopping and online conversion. We need to  re-engineer persuasive design in this new social space.

As the web evolves into more of a social tool it will impact the way we decide which products to buy and from whom. Fundamentally this shift comes from better communication tools, which are spreading social influence. Social media is really just our pursuit for conversation and connections between people.

The social influence of friends on purchasing decisions is nothing new. We’ve always had friends or family members who were the resident “expert” within our group about some product category that we were considering buying at one point or another. Perhaps we asked the opinion of a friend before a purchase or even brought our expert friend with us to the store to help us buy because they knew more about choosing the best product than we did and their opinion has always carried a lot of weight. Social influence has and always will be a part of the buying process, perhaps more so for larger ticket items, but technology is enabling us to extend the reach and impact of our own individual circle of influence. The ability to communicate with our friends and family anywhere and anytime instantly is just the world we live in today.

The social web will change the way we buy and shop online.

A great example of this change, which we’ll be looking at in depth here, is BestBuy and Facebook. Best Buy is using some very interesting social online buying strategies that all e-commerce sites should take a look at.

They’ve incorporated their online store into Facebook with a simple Product Search feature. Nothing too earth shattering here but the strategy is what’s important. They brought the store to the people, instead of the people to the store. The importance of this will be more apparent in a bit.

The influence of a social online shopping experience is illustrated with two simple buttons, a SHARE button, and a GET ADVICE button. The share button pops open a pre populated message box with the product picture, a link to the BestBuy site and space to share what’s on your mind with your group of Facebook friends. Bravo to BestBuy for giving up control and allowing the people to express themselves, good or bad next to a product they carry and their brand. Giving up control and providing tools for communication is key to influence on the new social web. This allows a genuineness that is coming form someone you know rather than being forced on you from an advertisement. This is a big shift in mindset for marketing.

But how is this important to raising your online conversion rate?

The SHARE button taps into two very powerful persuasive techniques, commitment and consistency. Psychologists have long understood the power of the consistent principle on direct human action. Prominent theorists Leon Festinger, Fritz Hieder and Theodore Newcomb view the desire for consistency as a central motivator of our behavior. Essentially we fundamentally have a desire to appear consistent with what we have already done or said we would do. Once we have made a choice or taken a stand, we will encounter personal and interpersonal pressure to behave consistently with that commitment. Those pressures will cause us to respond in ways that justify our decisions. This pressure is amplified if we put it in writing and make it public.

The SHARE function takes advantage of this persuasive principle brilliantly. BestBuy is hoping a prospect will share their intent to buy, a virtual real time wishlist. “I want this.” Which is both written and made public as a Facebook update to all your friends. Once you’ve committed to the product, you’re intent to buy has just been magnified and the invisible psychological pressure to be consistent with your commitment begins to build. Having brought the store to the people amplifies this even further if your friends reply to your post with a comment or “Like” click as a way to support your commitment. This would not be possible on the BestBuy website, only in the social space where you’re interacting with your friends can this persuasive principle be fully leveraged. You can then choose to take the next conversion step right inside the walls of Facebook and click to buy, which takes you to BestBuys site.

For as great as this is BestBuy should go one step further. Their strategy is spot on but are they truly tying the product and commitment with BestBuy? A prospect has publicly announced their intent to buy but who will they buy from? To fully leverage the power of the consistent principle there needs to be commitment to buy specifically from BestBuy. This commitment does not have to be to buy now, as you may not be ready to purchase, yet. But it does need to be added to the feed post in order to be public, which will start the psychological pressure for me to be consistent with my commitment. I suggest the addition of an optional check box or a dropdown with a few choices all geared toward buying from BestBuy at some point in the future. The simple click of that “Buy at BestBuy” or “BestBuy has the best price”, etc. would be enough to tie the commitment to BestBuy psychologically.

The GET ADVICE button spreads our sphere of influence and expands our circle of resident experts that influence our purchase decision. We no longer have to rely on that one friend who knows more about this product than we do and is available to come with us to the brick and mortar store. We can now tap into our extended social network. All of who can play equal roles in influencing our choice of product and purchase decision. Never has it been more important to have a quality product than now. You can’t hid behind marketing and advertising any more.

This social influence is extended even further with a gift ideas feature, where prospects literally reach out to the knowledge of the crowd for gift ideas. The social aspect of tapping into a collective consciousness is a new element in online shopping and we are only at the forefront of innovation in the social influence space online.

This is the beginning of the game changing social shopping experience in the new age of the social web. I encourage you to play with these new social tools, see how they work for you personally then let me know what you think.

The layout and position of your web copy is important if you want your website to convert browsers into buyers. Often web text is simply copy and pasted text from a company print campaign or placed into a web page after the design work is finished or at the comp stage.

Web copy is mistakenly treated as an after thought and really needs to be though of as part of the design and incorporated into a web page as a part of the whole. Treating web copy as part of your verbal design strategy will maximize your conversion rates. Assuming that is if your copywriter is writing for the web, which is vastly different than writing for any other medium. But lets be honest, most in-house marketing departments or ad agencies take the easy way out and reuse existing copy to save time and effort. Sure this will save you time but this form of laziness will get you no where when it comes to converting your visitors into revenue.

The main reason why web copy needs to be thought of in a different way than any other copy is partly due to the motivation of web visitors and partly due to how people read a web page. People read online very differently than they would a book or a brochure or magazine ad.

To start with, people scan copy on the web, which is why web copy should use headlines, sub headlines and bulleted copy, which you normally don’t find in print writing. In addition to writing in an inverse pyramid format, putting the most important information up front in the first paragraph.

Generally, visitors won’t read your entire web page, in fact they may not even get as far as they would in a magazine article, with the exception is perhaps a blog, that type of reading on the web is rare and will happen in some cases depending on the psychological personality type of the visitor and what stage they are in of their buying cycle.  

Moreover, reading print is linear vs the webs nonlinear format. The chief contributor to the non-linear type of reading is encouraged through hyper links. Imagine this scenario. A visitor lands on your web page in search of solving a problem. He’s interested in the page because your headline and sub headline support the problem he’s looking to solve because you chose the right words to use and designed them in the right place. You’ve effectively grabbed the reader, congratulations. He continues to proceed across and down the page, skimming through the copy your writer painstakingly wrote. He runs across a linked word that also cleverly supports the problem he’s looking to solve. He stops reading doesn’t make it any further down the page and clicks on the link, remember he’s on a mission, he wants to buy he just needs help converting. He needs to be sure your product or service will really solve his problem.

Your visitor follows this pattern over and over on multiple sites skimming and clicking, skimming and clicking. Your web copy has to support this and be designed in such a way to not only allow this to happen but to strategically allow this to happen, so that your visitor can go down his own conversion path and when he is ready, he will buy. Do you see how a nonlinear writing format is something so different than any copy you may already have someplace else in your marketing arsenal?

But that’s only the beginning when it comes to the verbal design of your site to increase conversions. According to most eye tracking studies on the web, visitors consistently read web pages in an F pattern.  (Eye tracking studies are done with “heat maps” which is a graphical representation of visitor’s eye movements. Red areas represent the hottest areas, which is where visitors spent most of their time looking.) Visitors first read horizontally across the top or active window of a web page, this is the top of the letter F. Next visitors move down and then across forming the second horizontal bar of the letter F. Finally, visitors scan down the left side forming the bottom of the F shape.

The F shape-reading pattern has many implications when it comes to page layout and conversion.  For example most e-commerce shopping cart checkout pages don’t take advantage of this for cross-selling and up-selling offers. Cross-selling opportunities are usually placed in areas outside the F pattern; so most visitors are not even looking at them much less buying. Imagine how much this would increase the total order per customer if this one element of design were used more effectively.

There’s a lot that goes into designing a site for maximum conversion and we didn’t even get into half of it, perhaps in a future post.

There is a lot going on in your prospects mind when he or she is surfing your site. A lot of what goes on in their head keeps you from getting a sale and most of it is the fault of your website.

Often times a website is designed with too narrow of a view of what design is. There are several people to blame for this, web designers, programmers, copywriters, marketers; the list can go on and on. Each making changes and decisions based on color or something personal. Everyone is usually focusing on a subjective aspect of the look of a site or page. The subjective look and feel is what most people call design, but very rarely is anyone thinking from the perspective of your potential customer.

Web sites need to be designed around the thought process of your prospect, not just around your brands color and logo. This is why using personas to design is so important. Design needs to start in the mind of your prospect and be built around their goals, fears and desires if you want your website to do the hard work of closing a sale.

Lets take a simple example of an e-commerce site’s shopping cart page. Your prospect has added an item or two to the cart, notice the visitor is still a prospect not a customer yet since they haven’t entered their credit card info, shipping address, etc and clicked the complete purchase button yet. Don’t make the mistake of thinking that design has stopped at this point, this is when design needs to do some serious work. If you don’t believe me just ask a few million abandoned shopping carts scattered around the web. - Forrester Research reports shopping cart abandonment rates at 25 percent. eMarketer’s research shows the abandonment rate at 32 percent. NetEffect and Greenfeld Online report shopping cart abandonment as high as 67 percent. Shop.org research goes as high as 75 percent.

There is a lot going on in the mind of your prospects at this point and the design of the process on your site is directly weighing on their mind even though they don’t fully realize it. Don’t worry your web designer and marketing team didn’t realize it either. Yet your web page has to carry the weight of this success or failure to your company’s revenue.

External factors and internal factors, both of which are the responsibility of your web design to correct, are at the forefront of your prospect mind adding anxiety to their purchase decision and keeping you from a sale. Your prospect is wondering about quality, reliability, price, and security.

One way to reduce the anxiety your prospect faces at this moment is to use trustmarks to reduce some anxiety in the mind of your prospect and support their decision to buy from you. Trustmarks can include credit card security seals (Is this  a safe place to give my credit card information?) Credibility images like a better business bearer seal, Trust-e, Hackersafe, (Is this a legitimate website? Will there be a problem before I even get my product or after?) testimonials, guarantees, etc. These types of trustmarks all help to lower the anxiety level of your prospect but it’s not enough to just have them on your web page. They need to be designed into the thought process that is going on in the mind of your prospect at the right time, when they are concerned about it and in the right place. It doesn’t help to have them stuffed in the footer of your site on every page or in an area where your prospect needs to scroll to see them at the exact point in their buying process when they need them. These trustmarks need to be in close proximity to the area in which the anxiety rises. They need to be designed not just into the site but into the buying process. A single trustmark image at the right time and place can dramatically increase your sales and decrease your shopping card abandonment rates along with other cognitive psychological factors that should be at the core of all design.