Case Study: How we designed our landing page using EyeQuant

Reading Time:

Case Study: How we designed our landing page using EyeQuant

Article read time: 2 minutes

We recently designed a new landing page on our website to promote our conversion optimisation services with which we use the EyeQuant eye tracking simulator.

The software analyses our designs to show us what a typical person will see whe they view the page, allowing us to tune the design for maximum impact before we have even written a line of code.  It’s fast and it is very powerful.

Our designers worked with conversion expert Richard Greenwood to optimse the page using the EyeQuant software. We thought it would make a good case study of how EyeQuant can add significant value in the web design process.

What were our objectives?

  1. We wanted people to see our brand, but not dwell too long on it
  2. We wanted people to see our main headline “Need more Leads & Sales?” to get people interested
  3. We wanted people to then see our offer of a FREE eye tracking analysis
  4. We wanted them to see the button so that it was clear how they can get their free report

So we designed a page that based on our experience of conversion optimisation and matching out own brand style should work well.  We were satisfied that the overall layout and messaging were effective, but would it achieve the above objectives?  Take a look at the eye tracking results:

Original Design

As you’ll see below, our logo was getting attention, but way too much.

Our logo is hogging the attention in the first 3 seconds

 

Regions of interest analysis showed the button was not performing

Final Design

We went through a series of changes, and tested each revised design again to see how it impacted visual attention.  By doing this we steadily shifted attention on to the things that really mattered.

  • We made our own logo darker (yes, that was a bit controversial here!)
  • We changed the headline background colour to a very light grey, and the text to a very dark grey, making the headlines stand out loud and clear
  • We desaturated the colours on the laptop screen so that they were less prominent
  • We faded the base of the laptop image to make it more subtle
  • We changed the button colour to an intense pink, matching the offer text

Take a look at the difference it made!

Initial attention flows smoothly through our 4 objectives – no distractions

 

Regions of interest show massively increased attention on key areas

 

Final Attention Heatmap The heatmap shows that attention is focussed just where we want it

Did we have to sacrifice style to make the page perform?  No.  The software helped us make the page easier to digest visually, and as a result it is also more pleasing to the eye (in our opinion).

So there you have it.  A real illustration of how eye tracking simulations can be used in the design process to make a web page more effective, and therefore more profitable before you even start coding it. 

Share This Post:

2 thoughts on “Case Study: How we designed our landing page using EyeQuant”

  1. Fabian says:

    Tom, fantastic work – totally made my afternoon here at the EyeQuant HQ in sunny Berlin : )!
    Your final version both looks super slick AND conveys its message immediately – a perfect marriage of form and function, art and science. Very happy to provide great tools for great craftsmen!

    1. Hi Fabian!

      Thanks for your comment. We’re really loving the EyeQuant tool as it fits perfectly into the design process, helping us to blend art with science, which is what we love to do!

      Now we just need a tool to send some of that sunshine over to London!
      Tom

Leave a Reply

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

Like what you see?

Give us a call

Or drop us an email if you are shy