You see them everywhere these days—oversized images used for product hero shots, or a large photo as a background image in lieu of whitespace. Using images as background is one of the hottest trends in web design.
Over the last 6 months, this trend has gained major traction. Some of the biggest companies have already implemented this design style. If you aren’t sure what I am referring to, here are some examples of sites that currently use the mega image design:
KinderCare
Google Analytics
Criquet Shirts (A more subtle background silhouette)
Highrise
Note: Highrise was a very early adopter of this style
But, trendy web design does not always equal high converting web design. For example, web designers love adding slideshows to homepages—even though slideshows generally reduce response rates over static images.
So, when we at WhichTestWon noticed this image-as-background trend emerging, we immediately started digging for A/B split test data from everyone who was using it. Are oversized images helping or hurting conversion rates?
Why it’s popular
It is easy to see why this is becoming a regular practice among websites, it gives your site a very sexy look.
A good looking website is one of the first aspects of your site that your visitor responds to, both consciously and subconsciously. The background image, when used appropriately, is an easy way to give your site a sleek look without compromising major real estate.
A well-known conversion killer is stock photography, and the mega image trend requires companies to invest in quality, original photography. With a renewed focus on how photography impacts conversions, the mega image trend has eliminated one of the long-time conversion faux pas.
Mega-Image Split A/B Test data
We’ve researched some great examples from sites that tested their old page layout against the page with a mega image. Here are a few examples from our Case Study Library that will help you decide whether or not to test a mega-image for some of your own pages.
Contact Page Redesign Test
Dell wanted to increase the submission rate on their ‘Contact us’ page. The team had completed countless tests on the form itself, including form fields, step indicator inclusion, step indicator design, etc…
They got to the point where they needed a bigger idea to move the needle. So they decided to A/B split test a radical redesign of their champion landing page design (see below).
As you can see this page is well optimized. Dell’s testing and optimization efforts should be applauded, as this was a design that was developed and tweaked over various testing iterations during the already rigorous Dell testing schedule.
As you can see the page meets many of our industry’s best practices including no navigation, bullet points, no scrolling, and an easy to identify and complete form.
So, all in all it was already a very well optimized form page. Now, here’s the radical redesign Dell tested against it:
There were some very major changes made to this page, including adding prose in lieu of bullet points, using ‘knock-out’ white text on a dark background (not something we recommend), adding the mega image background, and re-stylizing the form.
All of these changes paid off. The tested variation decreased bounce rates on this page by 27% and increased form completions by 36%!
This test inspired Dell to try other background image tests on other pages, to which they have reported some major successes.
French Ecommerce Background Image Test
Salomon is a snowboarding ecommerce site based in France. The team wanted to freshen up the look of what was a fairly standard ecommerce site design. They opted to try out the mega-image approach and, needless to say, they were not disappointed.
First, here’s a look at the original, control design. It’s fairly clean and compelling.
The original layout used colors to set visual hierarchy for content, i.e., the content with lighter background are around the most important areas on the page. (For those who don’t know, eye tracking studies have shown that the eye is drawn to lighter areas.)
Although this page used a slideshow to present multiple images in the same space, they did not implement an auto-rotation. (Although many sites use it, auto-rotation is not a best practice from a conversion standpoint.)
From a merchandising perspective, the page focused on allowing visitors to navigate by six key categories—rather than calling out specific products or too many categories.
This also is a best practice. On a home page it is important to limit the number of decisions your customer has to make. Had they gone product-centric with a laundry list of products, this design likely wouldn’t have been as effective.
OK, now let’s look at the radical redesign version the site split tested against this control:
Even though the control variation fit many best practices (much like the Dell test), the new mega-background image made a huge difference. This variation increased sales by French shoppers by 39.8% and sales by global shoppers by 29.7% both at a 99.9% confidence rate.
Aside from the mega-image, other (smaller) changes included a more succinct and visible call to action, an altered top navigation design, and the button design in the merchandising grid.
Obviously all of these changes had to have some impact on change in conversion. So, next the team needs to run further test iterations, each focusing on split testing just one single element, to find out what made the biggest impact.
KinderCare’s Home Page Redesign
Although you may not have realized it, KinderCare is a heavily tested and conversion optimized site. Nearly every aspect of the site—from the number of fields on lead generation forms to geotargeted page paths—has been tested, with help from testing firm ISITE design.
So, naturally, when mega-images became the big new thing, KinderCare decided to test the idea on its home page using both A/B and multivariate tests to craft the most compelling imagery, buttons, and CTAs.
First, here’s the control homepage, which had already been conversion optimized with a number of tests.
Now, here’s the mega-image challenger variation. As you can see, it eliminated much of the white space in the background, used geotargeting to tell you how many centers were around you, used colored text boxes, and moved the search box to the bottom right instead of the top left.
This new homepage increased leads by 18%. Much like the other examples in this article, many elements changed during the design process. So, we can’t be sure how much of the overall lift was due to the mega-image versus the other changes.
Happily, KinderCare has the traffic volume to run more extensive follow-up tests to find out what elements should remain the same and what elements need to be tweaked further.
Conclusion: Four Mega-Image Rules
Fascinating fact: All of our Case Study examples above share another trend. The tests were run on pages that had already been conversion optimized and were performing well. The mega-image tests were not a last ditch attempt to save a badly performing page. Nor, were mega images added just because they’re trendy now.
Instead, the teams tested mega-images as part of their ongoing optimization programs.
As web design trends shift in future, we fully expect these sites to continue testing new trends and design tactics to improve conversions. If you visit any of these sites today, you may not see the design we show here, In fact, you may find yourself in part of a testing segment for a new idea!
This should remind you that you should revisit pages that have seen major lifts in the past; there is always room for opportunity!
Full disclosure, I am very comfortable with the radical redesign followed by further iterations approach. Some of my testing peers detest this methodology and advocate for a more ‘self-evolving site’ approach. Insofar as you aren’t drawing major conclusions until you test future iterations, I say test away!
Now, I know this article has been very ‘pro mega-image backgrounds.’ However, I do not recommend just blindly implementing this design schema without testing it first! We can’t guarantee this will help lift conversions, but it has been shown to have a proven track record.
Finally, if you decide to go this route, make sure you keep the following four rules in mind:
- Your photo should scale down responsively.
- Use a unique photo—no stock photography.
- Make sure your photo doesn’t cause eye tracking confusion.
- Test page design (I can’t stress this enough).
Good luck updating your site to keep up with the ever-changing design landscape. As always, if you have a finding you want to share feel free to comment or contact me directly!
