Case Study: How we designed our landing page using EyeQuant

Written by Tom Greenwood - October 4, 2012

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

Our logo was getting attention, but way too much. Regions of interest analysis showed the button was not performing.

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

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.