This is what the original home page (the control) looked like:
The primary business need was to increase sales through the company’s online store.
The Underwater Audio team knew that it had only a few seconds in which to grab the attention of visitors, convey to them what your site is about and the value they will derive and how you want qualified leads to move forward (towards the purchase).
As the team considered additional elements that could be changed to drive engagement and sales, the concept of “visual hierarchy” was proposed. In essence, this is about using subtle visual cues to guide the thought pattern of visitors so that they process information the way you want them to- and take the action you want them to.
While visual hierarchy is a much talked-about subject, not many consider it as the basis for A/B testing ideas. But the Underwater Audio team decided to test this aspect of its website.
Specifically, the team wanted to test the hypothesis that because of the F-shaped eye scan pattern of visitors, swapping the placement of the call-to-action (CTA) button and the testimonial bubble would visually reinforce the thought progression of title>quotation>action. In turn, this would make Underwater Audio’s case more compelling, and thus increase sales.
An added benefit of this change would be that the main image of the product, which was hidden under the testimonial bubble in the Control page, would become more clearly visible.
This is the variation page after the CTA button and the testimonial bubble were swapped:
The A/B test was set up and run on the VWO platform.
The A/B test proved the hypothesis. The Variation beat the Control with a 35.6% increase in sales.
Here’s a comparison image that shows what changes were made in the variation:
This case study emphasizes that web design is not only about aesthetics. The relative “visual weight” of various elements on the web page is what decides how clearly it conveys your message to visitors.
In this case, the variation improved prioritization of visual elements. Right after telling visitors what product was available, the new visual hierarchy almost forced visitors to read the customer testimonials. This served to increase credibility by providing social proof and in turn, guided visitors’ decision-making further into the sales funnel. Thus, it was the new visual hierarchy created by Underwater Audio that helped visitors connect the dots and understand the story being told by the web page.
In the Control page, visitors who proceeded to the next page probably did not read the customer testimonial; this made the product and its value proposition less credible, and possibly impacted sales.
The redesigned landing page follows many landing page best practices mentioned by Oli Gardner, Co-Founder of Unbounce.
Some other aspects worth mentioning although they remain unchanged in both versions:
For effective visual hierarchy, before you begin designing your page, it is important that you first figure out the goals of the web page that are most important for you and those elements of the content that will contribute to those goals.
Thank you for your time.