What do you understand by the layout of the two pages above? Sure, the one on the right seems easy to scan. You can most certainly make out that the title, picture and call-to-action button in the end are the most important elements on the page. And of course, this is followed by the subheadings and other supporting elements on the page.

In an ideal world, the page on the left would be as happily received as the one on the right. People would read every word on a web page. But if you talk about results in the real-world, a page like the one displayed on the left (in the above image) is a big fail.

Going through the whole page to figure out what is it about and what is expected of me, as a reader, is too much work in itself. Who has the time for that? I would rather switch to another website. Thank you very much.

Using Visual Hierarchy to Guide Thought Pattern of Site Visitors

So basically you only have a few seconds to grab the attention of your visitors and explain to them what your site is about and what’s the task you want them to complete. And this is exactly where visual hierarchy comes in.

In simple words, it all comes down to how you utilize subtle visual cues so that your visitors process the information the way you want, to take your desired action unconsciously.

This is the Control page (original page) of the test, which was also the homepage of their site:

The Business Need

As their name suggests, Underwater Audio, is an online store that establishes its USP with their unique range of aqua products, like underwater iPod, swimbuds headphones, and aqua goggles. As any other eCommerce store, the primary business need is to increase the sale of products through their online store.

Test Hypothesis

The hypothesis was that swapping the placement of the call-to-action (CTA) button and the testimonial bubble would visually reinforce the thought progression of title>quotation>action (because of the F-shaped eye scan pattern) of site visitors, making Underwater Audio’s case more compelling, which would increase sales.

The added benefit of this change was that this will also clear the main image of the product, which was otherwise hidden under the testimonial bubble in the Control page.

This is the Variation page after the CTA button and the testimonial bubble were swapped:

Result

As expected, the Variation beat the Control with a percentage increase of 35.6% in sales.

Here’s a Comparison image for you to quickly evaluate the change that was made:

This case study emphasizes that web design is not all about aesthetics. It is meant to communicate a message. How you adjust visual weight of various elements on your web page is what decides how clearly that message is conveyed to your visitors.

After all, it is the order created by Underwater Audio with proper alignment of their visual hierarchy that helped visitors connect the dots and understand the story that was present on the web page.

With right prioritization and organization of visual elements, they made sure that their qualified leads on the next page have read the testimonial on the webpage, which of course influenced their decision-making further down in the sales funnel.

If you notice carefully, this case also shows how wrong placement of CTA button can affect your sales. It seems quite likely that visitors who proceeded to the next page from the Control didn’t read the testimonial.

Overall this seems like a good landing page and follow many landing page best practices mentioned by Oli Gardener. Some other points that are otherwise same in both the versions but are still worth mentioning are -

The testimonial by a professional swimmer is absolutely relevant to their aquatic industry type.

The distinguished color of the CTA button makes it stand out even though its placement was switched from the whitespace in the Control to a relatively dense background in the Variation.

The larger font size is used to bring attention to the important part of the testimonial.

The more cautionary details, like the price are not mentioned on the homepage itself to avoid scare people off. Instead, it is reserved to be revealed at the next step once the visitor has shown some interest.

The most important category “Products” in the top navigation bar is reinforced by with bold text and increased font size.

Trust elements, like a clear display of their customer care number on top right and the security seal from Go Daddy on the top left, are used to add credibility to the site.

Free shipping, warranty period, and payment methods available are some other most basic concerns that are addressed on the homepage itself so that only the highly qualified leads proceed to the next step.

Finally, it is important to understand that for an effective visual hierarchy, you must first figure out the parts of the content and the goals of the web page that are most important for you, before you begin designing your page.

Tests that Underwater Audio Can Try

Adding a picture/website of the professional swimmer (whose testimonial is displayed) can lend more credibility to the testimonial. One of our recent case studies revealed a 58.29% increase in sales for an online watch retailer who included a Trust Pilot Review Widget on their website, which emphasizes the need to add credibility to testimonials and reviews on a website.

Since the customer support number mentioned on the website doesn’t clarify if it’s toll free, I guess it’s fair to assume that they might be losing out on thousands of non-US customers who might be reluctant to make an expensive international call. Live chat widget should be of great help for visitors when they are stuck somewhere in the buying process or if they need any clarification.

Your Turn

What’s your take? Do you have any test suggestions for Underwater Audio? Which one of the above mentioned tests do you think they should try? Share it with us in the comments section and we’ll sure forward it to them.