December 28, 2020

UX Mobile Design: +31% Conversion Rate

The Mobile Design Before and After

This image has an empty alt attribute; its file name is before-after-image.jpg
Before and After Website Designs

The main project my team completed for the company was a site migration. After the site migration, I began experimenting with new webpage designs. If you haven't heard of Google Optimize, it is simply amazing. While it does not have video recording, it does offer some valuable integrations with Google Analytics, such as the ability to segment the tests based on demographic data, and it offers additional conversion rate estimates using the Bayesian Inference model. The Bayesian inference model in Google Optimize basically takes Google's vast collection of data to make inferences on conversion rates. Standard statistical modeling may not be completely accurate, as the average user visits a site multiple times before making a conversion, the Inference model infers the probability of that conversion happening days later.

Google Optimize also allows you to make live edits to a site and A/B test based on demographics that you prefer. This takes A/B testing to a new level. Using this tool and a series of minor changes over a period of months, I was able to determine some key design elements that could potentially impact the bottom line. Some of these edits were as simple as removing words in the title, while others were changing the call to action on the page. In summary, though, the most effective tests came from modifying the above the fold content. Combining what I learned with design principles resulted in a successful re-design.

The Changes

The biggest changes were to remove the adjectives before the search intent phrase "Dumpster Rental", in various tests, one pictured above, removing all the words before "Dumpster Rental" could double the conversion rate of the page.

The second major change was in changing all the calls to action to direct to a phone number. The original version of the site had various calls to action leading either to the phone number or the contact page. Phone calls had a 1/4 chance of resulting in a sale, while email submissions had a 1/10 chance of resulting in a sale. This changed did not reduce total overall conversions but rather shifted the conversions from 50/50 Phone calls to Contact Form Submission to something closer to 70/30 Phone calls to Contact Form submissions. Increasing the bottom line.

The third change was in the design elements, we wanted the page to be mobile optimized, to make sure every part of the screen had some call to action and that every part was easily clickable. As you can see below, the overall design did not change by much. The Header size was reduced so the above the fold content included some text, instead of just an image.

What Changed?

  • The Adjectives before "Dumpster Rental" in the Title were removed.
  • Instead of listing the phone number, every reference became a "Button".
  • The mobile design was enhanced so that on every page you'd see at least one button and
  • All the elements were edited to be mobile-friendly.

Before and After

Results

A quarter over a quarter review of the newly designed CRO optimized template vs the original template, suggests that both sitewide and on a per market basis, these changes were quite successful. The results were a 57% increase in conversion rates for the Kansas City Metro Area, and a 31% increase in sitewide conversions.

More Sales with Less Traffic?

Because dumpster sales are cyclical, total sales volume usually goes down in the winter months. However one can see that total conversion volume in Kansas City was higher in the winter, even with less overall seasonal traffic, 368 calls from 3065 Users(before) vs 324 calls from 2366 Users(after).

This image has an empty alt attribute; its file name is Kansas-City-YOY-growth-1.png

Year In Review

On a 12 month Year over Year basis, traffic was up by a huge margin, roughly ~120%. Conversions were through the roof as well.

This image has an empty alt attribute; its file name is 124-yoy-growth.png
This image has an empty alt attribute; its file name is YOY-CRO-1.png

Leave a Reply

Your email address will not be published. Required fields are marked *

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram