DON’T MISS OUT

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:

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!

DON’T MISS OUT

Justin Rondeau leads the testing initiatives, editorial, training workshops, and event programming for WhichTestWon the top weekly publication in conversion optimization. More than 75,000 marketers each month visit WhichTestWon to research its extensive Case Study library featuring creative samples and results data for more than 450 A/B and multivariate tests.

18 COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

I think I agree with Ivan.
HUGE screen-filling photos create “work” for the Visitor – for little or no pay-off.
i.e. forcing scrolling to see REAL content instead of just a snappy slogan over a pretty picture.

For most of the examples shown I would click the Back button quickly due to lack of info in the initial view and / or CLEAR navigation.

i) The headline should NOT be HUGE – as this makes it harder to focus on what follows
ii) Sentences might not be read
iii) A list of Contents provides context for the central offering – and it also invites exploration
iv) How does the recent fad of “mystery meat” navigation help the Visitor?
e.g. plain text without borders or shading – or flat, monotone icons.
Surely navigation should be quickly distinguishable from passive text – and be framed as a “target”?

As for the “evidence”….
Perhaps other factors influenced conversion rate?
– newly created links
– marketing
– change in device used

Claims based on % change are notoriously unreliable – absent a base number and time period.

BTW – about this webpage:
As the article says – contrast is good – so what’s wrong with black text?
The text is grey – which on acres of empty white space is eye-straining.

(Aside from the over-large photos) the font is so large and line or paragraph spacing so wide that to read enough content (and reduce scrolling) the browser zoom has to drop to 67% – then back to normall, 100% zoom for other websites.
More “work” !

Unbelievable unprofessional article. It is clear to any conversion specialist that these background images cannot convert. How the stock images and a meaningless waste of screen real estate can convert?

Let’s start from the examples you mentioned in the beginning of your article. Let’s visit Google Analytics. Other websites you mentioned do not use oversized images anymore. They tested them and they avoided them…

I don’t agree. The point of cro is to avoid generalizations and test what works for your website and your audience. As for being unprofessional, sharing trends and ideas isn’t unprofessional at all. We cover the trends, and big background images have been a trend.

I feel that at least two of these test cases underwent redesigns that vastly improved the site’s look and feel; sure the background image deserves all the credit for the better conversions. This just in – better looking websites convert better!

Hi Zach, I agree with the better photos mantra. But, I take exception to the Stock v Real photos language. Stock photos are real photos, and real photos can often be stock photo’s. Not every small business can afford to commission a good photographer for a specific hero shot, nor do they know how. Every small business can afford $10-20 for a great stock hero photo from a reputable stock photo supplier.

Maybe you should put the knife to businesses that use photos found on Google image search with dubious copyright ownership. And, we all need to spend more time laughing at “man in suit thumbs up”, “shaking hands” and “girl wearing shorts halter top tool belt holding screwdriver” as the comic sans’ of the photo world.

I’m currently redesigning my site and though I don’t have the time or skills to put into rigourous testing i do appreciate your advice and other content writers as well as the wide range of service that are now becoming available to help me compete way above my one man band weight on the web.

Good points, Dale. I think the key is to be aware of what we communicate with our design choices and to try to be as authentic as possible. Love the reference to some stock photos as the comic sans of the photo world!

Thanks Kathryn, I’m glad. There is some truth to the comment as well. I’m really impressed at the awareness that typography has gained in the community in general. Almost anybody, even the aesthetic blind, will frown on comic sans. Once, not so long ago, it was the go to font for friendliness and casual, particularly in my industry, the trades and services.

Posts like this one can help promote good photography to the same extent. By the way great hero shot on your site. It’s difficult to portray the essence of marketing and make your hero shot contextual for a marketer and you did it well by avoiding all cliche. Although I am dissapointed not to see “thought map, funnel shaped, young woman in black suit and white shirt, bun hairstyle, sharpy, writing on glass wall, post-it notes, social media icons” 😉

I am a huge advocate for genuine photography on websites. Though this methodology can be costly in comparison to stock photography, it creates a better looking site and makes you look far more legitimate.

I am really hoping that more sites invest in genuine photography on their site in the coming years.

I’ve definitely seen similar results from my tests. Big, beautiful images tend to pull people into the site and have decreased my bounce rates almost universally.

From my perspective though, the MOST important decision when testing this concept is the choice of image for the background/hero. I did a version where I tested a guy smiling and looking towards my opt-in area (my hypothesis was that it would perform the best), compared to a version with a woman who looked sort of indifferent, and then also a control that was basically a product image and text. The control ended up outperforming the indifferent woman, but losing quite considerably to the happy guy. // It wasn’t the most fair test (and I later conducted one with a better picture of a woman), but it definitely helped me see the value in choosing and testing the right images when they are the central visual of a landing page.

Zach, like any marketing strategy having stunning visuals will never hurt you. It’s all about making things visually stunning so people will be more inclined to stay on your site. Doing all the right things can make a big difference 🙂