Author Archives: kurtwmorrison


It’s Tuesday morning and retailers across the world are breathing a collective sigh of relief. Although the holiday shopping season still has nearly 4 weeks to go, the high-stakes, ultra-stressful Black Friday and Cyber Monday are behind us.

For retailers, the last few days were all about executing on the strategies that have been carefully planned for months. According to a piece in the Washington Post, a common goal this year was to win over a coveted new breed of omnichannel shoppers who “ping-pong from physical stores to laptops to smartphones, and a purchase can come via any of these avenues at any time.”

For most retailers, mobile is their “problem” channel – the one they haven’t perfected yet. That’s bad news, because today’s shoppers rely heavily on their mobile devices. During the holidays last year, approximately one third of all eCommerce purchases were made on a smartphone (source), due to a major spike in mobile traffic – a trend that seems to have continued throughout 2014.

To make matters worse, shoppers are especially fickle when they’re on the mobile device. According to Google, 40% of mobile customers have turned to a competitor’s site after a bad mobile experience. That’s especially harsh considering that a decent chunk of mobile traffic comes from people who are physically in a store already.

So which of the top retailers seem to have pulled it off?

Today, we’ve looked amongst the biggest online retailers in the US to find the best and worst mobile designs – as rated objectively by the EyeQuant A.I.

EyeQuant is trained with large amounts of data from user studies and eye-tracking research to provide instant, objective insight into how real people are likely to react to certain designs. Screenshots of the designs were captured during Cyber Monday.

The analysis results you’ll see below are combinations of the EyeQuant Perception Map and Clarity Score. The perception map shows which content will be most eye-catching in the first 3 seconds of a user landing on the page (the illuminated areas), while the Clarity Score shows how users would rate the design on a 0-100 scale (0 being extremely cluttered, 100 being essentially a blank page).

The Best


The struggling Chicago-based retailer has made major investments in eCommerce user experience over the past couple of years, and it’s really starting to show. When shoppers arrived on the mobile site on Cyber Monday, they immediately saw a banner prompting them to “view Cyber Monday deals” with no distractions (see attention map). The page is extremely “clean” according to the Visual Clarity ratings, putting up an impressive score of 91. Bonus points for an extremely accessible search bar.



Like Sears, the Japanese electronics giant has had a tough time lately with brick-and-mortar stores. 20 of 31 US retail locations have been closed – or will be closed – before January 1st. The official reasoning is to streamline costs and focus on existing partner relationships with other retailers. Online, however, Sony looks poised for great results this year – at least judging by the mobile experience. The first thing users see is an announcement that Cyber Monday deals are here, and the design puts up an incredible Clarity Score of 92.



The Framingham, MA giant – which traditionally has a cluttered and distraction-filled website, turned in an impressive mobile performance on Cyber Monday. The eye flow on this one is fantastic. Users see the announcement that Black Friday deals are here. Then they’re guided to a specific offer that rocks, and then users are given the opportunity to view more deals. Meanwhile, the clarity score is a respectable 78.


The Not-so-great:


There is no excuse for a top retailer not to have either a responsive website or to redirect users to a dedicated mobile site. But Macy’s, the retail giant founded in 1858, sends users to a scaled-down version of the desktop website. Not only does that make it harder to use, but the first impression suffers a lot. The big problem is the miserable clarity score of 31 – which was the worst score we saw amongst the major retailers. Meanwhile, user attention is initially dominated by 2 competing “sale” messages – both telling you to “hurry up”. Ironically, the part of the page that actually tells you WHY you should hurry up (the 15% discount) doesn’t really stand out that much because of a mediocre colour choice (black on red).


Victoria’s Secret

People coming to your mobile site on Cyber Monday are looking for deals, and they are moving fast. But what does the Victoria’s Secret site do? Immediately direct user attention towards a hero shot that conveys very little. Meanwhile – despite multiple sale offers -the words Cyber Monday aren’t used anywhere, which leaves the user wondering: “are these deals any better today than a normal day”? To top it off, the page puts up a weak clarity score of 48.

Victoria's Secret


Williams-Sonoma suffers from a mediocre clarity score (51), but the biggest problem is that users arrive on the page and are immediately presented with what looks like an enterprise pricing table rather than a great deal on home furniture. The call to action isn’t visible, either.

Williams - Sonoma

The good news is: no matter what happened this year, there’s always room for improvement next year! What do you think of these ratings? Let us know in the comments! Want to try out EyeQuant for yourself? Claim 2 free test credits here.

Prime Advice: How Amazon Could Improve its Prime Landing Page and Boost Subscriptions

As most of you probably know, Amazon offers a premium membership called “Prime”, which allows you to get fast, free shipping on your purchases, as well as other benefits like streaming video and music. If you shop a lot on Amazon, it’s a pretty good deal at just $99/year, which is why many people (including myself) have signed up.

To drive these subscriptions, Amazon has a landing page set up where it offers users the opportunity to sign up for a free trial of Prime service. I decided to run a quick audit of this page and see if there might be some opportunity to improve it. For all the EyeQuant users out there, this is a good example of how you can use EyeQuant on your own sites.

OK, here’s what you’re presented with when you click through to the landing page:


With a page like this, there are really 3 key pieces of information we need to convey to users:

  1. Relevance (what is this about?)
  2. Value Proposition (Why should I care?)
  3. A Call to Action (Where do I go next?)

I like to call this the “3 Ws”, but I’ve also seen it referred to as the Conversion Triangle or Conversion Trinity (shout out to Bryan and Jeffrey Eisenberg).

The first step to optimizing any landing page is making sure that you actually have all 3 of those present. For the Prime landing page, the 3Ws are present in the header, sub-header, and call-to-action button. So far so good!

But users (especially online shoppers!) are busy. They’re distracted. They have 6 other tabs open. So when they land on the page, we can’t expect (nor should we) that they will invest much/any of their precious time in finding the information they need to convert. That’s why pages that immediately direct a person’s attention to the “good stuff” enjoy dramatically higher conversion rates.

Unfortunately for the Prime team – and even more unfortunate for would-be Prime customers, this landing page falls quite short on this criterion. Here’s an EyeQuant Perception Map of the page. It shows which content people are likely to look at during the first 3 seconds of landing (with 85%-95% accuracy):

httpwwwamazoncomAmazonPrimeOneYearMembershipdpB00DBYBNEE-1 - Perception Map - Engaged Visitor

Users are immediately looking at the imagery rather than the offer. On top of that, the content that people are paying attention to is all about Prime Music, which is a secondary benefit for most prospective Prime customers (correct me if that’s wrong).

Let’s look at how this page could be tweaked to do a better job of conveying key information right away, and converting prospective users to the free trial.

All else equal, people look towards the top left of the page first, so let’s see what happens when we put the important content in that spot.

Looking at the Regions of Interest map in EyeQuant, we can see that by reversing the content positioning between the hero banner and the offer itself, we’ve effectively made the offer, value proposition, and 6x more eye-catching. Yet the busy creative on the right is still hogging up a lot of initial eyeballs.

Screen Shot 2014-09-25 at 15.49.46

This is a big improvement, but a quick look at the Attention Map shows that the key message is still getting lost in the supporting imagery. So we’re not nearly done yet.

ScreenShot20140925at152010png-0 - Attention Map - Engaged Visitor

Bold, high-contrast content is more likely to be seen, so let’s see what happens if we tweak the contrast levels of the offer, benefits and CTA.

Here, I took the gradient background and made it a solid color, using the darker hue, while using a bolder typeface for the headline. Then, I darkened the CTA button to the exact colour we see on the Amazon logo. This one made a big difference. If we look back to the Perception Map, we can tell now that users are seeing the key offer in the headline within 3 seconds of landing.

ScreenShot20140925at175810png-0 - Perception Map - Engaged Visitor

The attention map shows that the imagery is still very strong – and is taking up valuable attention that we’d prefer to direct towards the 3 Ws.

ScreenShot20140925at175810png-0 - Attention Map - Engaged Visitor

Since we’ve got some very strong visual imagery here that’s distracting users from key content, let’s try toning down the imagery a bit.

First, I moved the tablet image to the right side – further away from that prime left-side real estate. Then, I got rid of a lot of the small, floating album covers, which didn’t convey a particularly strong message, but were visually grabbing. Instead, I simply showed one, larger image of the tablet with the Prime interface on the screen. Next, I turned down the contrast levels on the images. From the Attention Map, we can see that this dramatically shifted attention towards the headline area.

ScreenShot20140925at183040png-0 - Attention Map - Engaged Visitor

Ok, so now we’ve got a lot of attention on the headline, and we’ve minimized the distractors in the images, but the sub-header and CTA, which contain important information, aren’t as salient as we’d like.

To make the sub-header and CTA stand out more (which are already well-placed and high-contrast), let’s try creating more whitespace around them.

Here, I moved the “give the gift” and referral links down, and centred the text and button to give the content a bit more breathing room, which tends to help attract eyeballs. Oh – I also changed the colour of the “Over a million songs…” header to a dark grey instead of black, so that it wasn’t so strong. The results were pretty great. We can now look at the Perception Map and observe that user immediately see the header, sub-header, and CTA – fulfilling our “conversion trinity”.

ScreenShot20140925at184812png-0 - Perception Map - Engaged Visitor

There’s still a critical flaw on this page though: according to EyeQuant, people are still likely to consider this page “busy” or cluttered. It’s visual clarity score is a 61/100, which is generally below average for single-product landing pages.

To make the design cleaner, let’s trim down non-critical copy in the description of Prime Music to eliminate that “wall of text” feeling.

This shoots our clarity score up to 72 – effectively an 18% increase in visual clarity. More importantly, it’s now in the top 20% of all web pages in terms of design clarity (benchmarked against the Alexa 5000).

There are still ways to continue improving the clarity score, but without more information on which content is truly mission critical for Prime’s prospective customers, we’re satisfied with our 72.ScreenShot20140925at191527png-0

Let’s look at what we’ve accomplished here: with these relatively simple design changes, we’ve taken a page that was scattered, unfocused, and busy, and turned it into a laser-focused, relatively clean design, as measured objectively by EyeQuant. We even managed to stick with (presumed) brand guidelines.

Of course we don’t know for sure that this will perform better – we do need to verify our work here with a proper A/B test. But if you were a betting person, it would be wise to put your money on the data we’ve just seen!

Does Cleaner Design Improve eCommerce Sales?

Internet Retailer recently released its top 500 guide (note: paywall), which tracks the performance of the largest eCommerce sites in the world.

One of the most interesting parts of the guide is the list of the top 50 fastest growing eTailers. For anyone interested in user experience for eCommerce, these companies are the ones to watch. After all, these are the shops that are successfully taking customers away from their competitors.

But why are customers switching? Surely there are many reasons (conscious and unconscious), but is user experience one of them?

Here at EyeQuant, we were curious to see if there is any measurable connection between UX and revenue growth rates for these fast-growing companies. After all, if we can’t prove that investing in better UX does indeed lead to consumers “voting with their wallet”, then what’s the point?

We decided to investigate.


Quantifying user experience is a difficult task, but we’ve been working on several metrics here at EyeQuant that can help us objectively measure the quality of web designs based on how users will see and perceive them.

One of our most recent creations is the Visual Clarity index. As reported by Wired, it’s an AI that tells you if a design is likely to be perceived as visually clean, or cluttered and busy. It assigns a score between 0-100.

If you were to  show 100 people a pair of designs and ask which one is cleaner, EyeQuant’s predicted winner would match the ‘real’ survey results about 95% of the time.

Screen Shot 2014-07-21 at 17.25.12

Sample analysis: The Levi’s home page scores a 65. The red areas on this clarity map shows which parts of the design are more cluttered.

While visual clarity is only one factor in user experience, it’s an aspect that we can quickly and accurately measure. We decided to see if visual clarity seems to correlate at all with the growth rates of the companies on this list.

In theory, there should be a trade-off between clarity and content. A blank page would have a perfect clarity score (no clutter at all), but it surely wouldn’t create a great user experience. So is there a sweet spot?

To find out, we calculated the clarity metrics from the home page of each website in the top 50. While the home page is not a perfect representation of a website’s overall design clarity, our testing suggests it works well as a proxy. For example, websites that have cleaner home pages generally have cleaner category and product pages.

In the data, we found 3 main insights.

Insight #1: Amongst top-performing eTailers, sites with cleaner designs have higher growth rates.

growing (1)There is a correlation (r=0.27) between clarity and sales growth rates. Internet Retailer only includes 50 companies in this particular list so the data set is smaller than ideal, but this is very much an indicative result, as the p-value (0.06) is hovering around conventional levels of significance.

Clearly, there are plenty of other factors at work here, but the modest correlation implies that clarity is certainly one of them.

This supports a hypothesis that our team at EyeQuant has held for a while: clean, simple design is winning in eCommerce. We’ve seen lots of anecdotal evidence from our customers using the clarity score as a metric to improve conversion rates, but this is the first data we’ve seen that hints at a larger-scale relationship between clarity and cash.

Consider this: amongst the top 10 fastest growing eTailers in the US, the average Clarity Score (home page) was 69.1, which is about 16.4% higher than the list average of 59.36.

Screen Shot 2014-07-22 at 15.10.52

Uniqlo, the fastest growing eTailer in the United States, has embraced clean design. This home page scored an 87 in visual clarity.

By comparison, the bottom 10 on the list (#41-50)  had an average score of 52.6. Keep in mind that these are still highly successful companies, so it came as no surprise that even the bottom 10 had (on average) a 9.5% higher score than the average of all sites in the Alexa 5000 (48.0).

Insight #2: None of the top 25, and only 2 of the top-50 fastest growing companies had a higher score than 90.

This supports the hypothesis that having an extremely high clarity score doesn’t actually improve performance. This makes sense intuitively, as having a score in the mid-to-high 90s requires you to have very little content on the page.That means that you might be withholding information that is important to your customers, which is unpleasant. This is a cautionary tale for minimalist designers. Cleaner isn’t always better if it means removing content that is critical to your users’ buying decisions.

Insight #3: The importance of design clarity seems to vary depending on your customer base and your brand.

The worst score of any site that we looked at was, which is a key property owned by eCommerce Outdoors, the 50th fastest growing eTailer in the IR 500.

TackleDirect scored a 7.

Screen Shot 2014-07-22 at 15.13.27

This home page from TackleDirect had the lowest score of all 50 designs that we considered.

Given the data, we’ve just seen, you’d think that such a cluttered, chaotic-looking website has absolutely no place on the top-50 list, and should in fact be struggling to stay in business.

Instead, they’re doing quite well for themselves.

But who buys fishing tackle? Typically it’s older men, who grew up consuming print advertising, where marketers traditionally aim to use up every single inch they’ve paid for.

It might be the case that improving the visual clarity of would improve conversion and increase sales, but this data suggests that maybe it’s not that critical for the specific type of person who buys on this website.

Also consider 2 European businesses that are enormously successful despite extremely cluttered websites: and Both of these companies have essentially made chaotic design a part of their brand identity.

Key Takeaways

1. For most eTailers, improving the visual clarity of your design today would increase sales (as long as you beat your competitors to it).

2. Don’t go overboard. As always, there are diminishing returns at high levels of visual clarity, and there comes a point where improving this metric would mean removing important content.

3. As always, there are exceptions to the rule. No matter what the averages say, there will always be a or a that breaks the rules and profits from it.

Want to see the clarity score for your own design? Try EyeQuant once for free here.

When You Want to Convert, Less is More

When I’m chatting with clients, partners, and prospects, I find myself talking a lot about the idea of “visual clutter”. My colleague Bitsy has written extensively on the topic of “attention-driven design”, but I wanted to add my take on the issue.

This morning I had a call with an EyeQuant user who’s starting a new conversion optimization agency in the UK. In his past life he was a SEO expert, so today he was analyzing some of his SEO clients’ websites with EyeQuant to spot some opportunities for improvement.

When we looked at the Perception Map for one particular website, the 3 most important pieces of content were seen right away. At first glance, EyeQuant was suggesting this was a pretty good page.

Not so fast, I said. Looking at the Attention map, we could see that there was an orange-yellow haze over many parts of the page. Visually, user attention was scattered across the page. The page was simply too busy.

Perception and Attention Map Examples

“Visual Clutter” annoys users. Time and time again, we see that focused pages outperform crowded screens.

Here’s my favourite (extreme) example. No disrespect to the folks at Cruise, but this is what their landing page looks like:

Cruise Homepage

You’re probably thinking “wow that’s busy”. EyeQuant agrees. Check out the Attention Map for this same page:

Cruise Attention Map

There is so much content competing for attention on this page, that users are almost surely overwhelmed.

And yet, when a website isn’t converting, many people rush add content. More benefits listed. More special offers. More options. More testimonials. It’s a natural reaction: “people aren’t convinced yet? Well what if I also told them that ……..”

So here’s my challenge to you: the next time you want to test one of your pages (which you should be doing right now), don’t change elements and don’t add new ones. Pick 3 of the less-important “things” on the page and delete them. That’s your test.

Here’s how I suggest you do it:

  1. Look at your page, think about which 3 things are most important. Usually that’s the 3 W’s: what is this page about, why should a user care, and where are they supposed to go next? If you can’t narrow this down to 3, you can cheat and pick 5 things. Not more.

  2. Go to and analyze the page. If you haven’t used EyeQuant before, your first test is free and your results will be ready in seconds.

  3. Look at the “Attention Map” – that’s the one that looks like a “heat” map. Excluding your 3-5 key content pieces, anything that has some red/orange/yellow overlay on it is a great candidate for deletion. Remember, you have to delete 3 things!

  4. If your page now looks ridiculous, make any small layout tweaks that might be necessary. Try not to do anything radical though.

  1. Run A/B test.

Did it work? If you try this, I’d love to hear from you. In fact, if someone has interesting results that we can share on the blog, I’ll hook you up with another 10 EyeQuant analyses! Just shoot me an email at or tweet me at @kurtiswmorrison.