Testing Above-the-Fold Landing Page Concepts

Our previous booking flow wasn’t converting, something like a 90% drop off rate because it was upwards of 20 questions.  It was also clear that our customers preferred booking over the phone than online (60:40 split) which meant scaling up would be difficult.    

We needed a new booking flow for several reasons:

1. Decrease the number of phone conversions so that we could scale.

2. Create a path for customers to book any kind of move online with ease. 

3. Increase opportunities to upsell—packing services, etc.

4. Easily be able to change pricing package information down the road.

Because the primary goal for customers visiting the site was to get a moving quote, our product team designed an interface purely focused on that goal. Users could see a quote as quickly as possible and enter into the booking flow from the landing page. They could also see their location on the map right away.  

However, our marketing team thought that the map design presented by the product team was too utilitarian, too cold, to really convert.  They thought an image focused on our customers and the satisfaction after having their move completed would be more reassuring and would sell the benefits of our service more effectively.  It was also problematic as to how the booking flow integrated with the landing page.  It had to sit on top of the fold because CMS content was structured below it.

After talking with each team, product and marketing, it seemed to me that they were most concerned about first impressions.  Marketing cited a statistic from Google Analytics that our customers were leaving the site after only 10 seconds in some cases. I figured five-second tests would get at the first impressions of each design.  

I varied the order in which users saw each design, and I made sure to change variations significantly so that differences were easily detectable. I knew a qualitative instead of quantitative approach here would yield more insights into “why” instead of merely preference.

I worked with our principal designer to come up with more iterations to test, so I divided into two rounds of testing with one final “winner’s circle” round.  I also included a version very similar to our current design on our landing page.

I ran two rounds of testing showing users in our demographic each design for only five seconds. That way, I grouped users into two categories, those that “got it” (meaning moving as a service) and those that didn’t. After going through each design, I asked them to dig in deeper focusing on one at a time.

• What are you expecting to happen after you [perform some action] on this page?

• What are some words that come to mind when viewing this design?

• Do you feel you will receive a benefit from the page?

• Can you recall any words or phrases on this page that stood out?

• What do you like about this design? Dislike?

I also recorded their observations as quotes and listed them as pros/cons. At the very end of each test, I asked their preference and why.

Round 1 Findings

For each round, I made recommendations for conversion optimization. For the first round, shown above, I proposed:

• Get right into the booking—“skip a click.”

• Clearly communicate messaging about “moving.” (Only 1 user “got it” on the map design.)

• Include reassurances like “free cancellation.”

• Choose photos that provide more realism, are not forced/ “look stock” (e.g. customer on the couch).

Round 2 Findings

Round 2 conversation optimization recommendations:

• Play up emotions: Two people echoed the sentiment to play more with the emotions than time and efficiency to lighten the mood for a task most find “daunting.”

• Keep assurances and reviews top of fold.

• Increase font size for readability.

Round 3: Winner’s Circle

In summary, I made the following recommendations:

• 100% clarity: Make it clear immediately that we’re a moving company and seek to make it personal. For example, the map design isn’t clear that it’s about moving. 100% of our users should “get it” immediately.

• Go for emotions: All five users cited the actual image as more visually appealing than the map. “I can’t tell you what the text says [on the map], but I like that dog. These are the people I want to help me move. It feels more personal and warmer.” 

• Include reviews and assurances: All five users noted the “free cancellation.”

• Increase font size: This was a usability issue that came up when running these tests as I watched user after user squint trying to read body copy. You never know what you’re gonna uncover in an interview.

I would have also really liked just to skip this argument altogether quite truthfully, launched, then A/B tested it for more conclusive results, but unfortunately there wasn’t enough traffic to the site to get honest A/B results.

In the end, we built this div to swap out map for the photo, adding in assurances, and increased font size— micro wins but wins nonetheless.