Analytics & … design?

Today we can gather all kinds of data points on our visitors.  Have you ever wondered how to best utilize that information in order to  increase the overall success of a design? Read on my friend.

No matter how awesome and user friendly a design looks like,  the success metric in 95% of sites will always be the conversion rate. We, as designers, say that we think of the user and we make it easier for them to complete the process, we say that  we lube up the conversion funnel as much as possible and that if our solution doesn’t convert it’s the contents’ fault. But, can you prove that with hard facts and numbers (and maybe a petty graph)?

If you ever wanted to present to your client that your design in fact is “user-centered” and that you have utilized every possible piece of information, here are a few examples of how to do just that:

Get the data – correct data!

Step one: Make sure you have the correct and most recent data. Ask nicely for access to your clients analytics platforms if you don’t have it already. It is useful to put together a very short justification explaining the  benefits out of which you should always highlight the increase in conversion i.e. revenue.

Step two: Know what you are looking for and where to look for it.  Following are three pieces of data designers should always consider before the first pixel is drawn.

Where’s the “fold”

“Above the fold” term comes from the newspaper and magazine stands. Since newspapers were too long to display in full on the stands, they decided to fold them in half. This set limits on what the person who might happen to take a gander can see but it also forced the people who made the layout to push the most significant elements to top.  In the digital world, if you have a scroll bar on your page you have above the fold and bellow the fold sections of your layout, and just as on newspaper stands, we must prioritize what we want the users to see.

So how do we figure out the specific fold size for our users? Easy, we go to our analytics platform and read it.

Please note that the screen resolution is not your fold. The metric we are looking for is browser height. What’s the difference a layman might ask. The answer is the browser height is the actual size of your page as it is displayed when the user opens the URL. The screen resolution on the other hand is … the size of users screen. The height of their screen is also used up by the browsers address bar, the tabs, the window itself. Have you ever wondered about the users who don’t have their browser maximized?

How do we use the fold? We can calculate the percentages for each height and present them to our client and with confidently assume  something along the lines of: “Everything bellow this line, which represents the height of 500px will not be visible to 52% of users so I strongly suggest we move the call to action above the fold.”

Or you can get a little carried away and make something like this.

Also here is a nifty tutorial on how to make this fancy fold overlay.

Knowing what to code for

Your analytics platform will also be kind enough to provide you with a list of most used browsers on your site. This is extremely helpful when you are deciding which browsers to cross test for:

or which devices to test for:

Let us presume that you want to include a functionality that you know is not supported by a “certain” browser or device, you can go to your analytics and say, well it is only 1.3% share of our market, so lets not give them that specific element option. Then of course you have to figure out an alternative presentation for a specific browser which can be a pain! Or in the worst case scenario, you want to implement an element which is not supported by a browser that represents a significant portion of your demographic. (Die IE6! Die you bastard! WHY WON’T YOU DIE ALREADY!)

Test, test and test some more

Results from A/B and multi-variant tests you or someone else conducted in the past on your visitors can also be of significant help. Someone might of ran a test to find out if the red button converts better than a green button and the results might have been overly favorable towards one side over the other. This helps alleviate some of those tough design decisions.

Imageabove  shows results from testing a mini application (first – last name, email) vs. an apply now button. Now we know which one converts better, so we can keep using it and improving on it via further tests lsuch as will the application perform better on the left or on the right side of the screen.

Putting a face to a project – Personas

Personas are very useful. Why? They help you put a face to the user. You can even name them. “Jane” is persona A on your site, and “John” can be the persona B. So your creative process will be effected by reasoning such as “Jane would like to have things categorized by brand name, but John will most certainly look for a price low-to-high listing since he is such a bargain hunter”  

Getting the personas actually right is a complicated process. Sure you can make some assumptions based on your analytics but data hardly ever captures emotions and what drives them. How do we get the actual personas?

Persona Interviews

Have a marketing agency do a persona review for your customers by conducting interviews. They can talk to your visitors and say they are conducting a “study”  of on-line behaviors, or on consumer opinions of your product (which isn’t really a lie.) This kind of a review can help you better understand what drives the users and what improvements would they appreciate.

Deep Deep Understanding

If you are fortunate enough to have someone like Experian / Hitwise analyze the data of your customers and give you info on what they like to shop for, what their anual income is, what their credit rating is like, how many children they have on average ( . . . ) That is simply invaluable data since you can really really optimize the design for them based on whatever criteria is useful to sell the product.

I rest my case

Learning from what analytics can crunch up will surprise you sometimes. It might prove that your design improvement actually lowered the conversion rate. However, design in general is a field where you must be extremely willing to accept you are wrong over and over again, until you get it right that is. And you get it right by learning on previous mistakes and being flexible towards utilizing all the data available.