An Effective Process for Design Optimization and Conversion Boosting: How Epson Uses EyeQuant

eyequant

How Epson uses EyeQuant An Effective Process for Design Optimization and Conversion Boosting

This document summarizes a case study presented live at IRCE 2014 by Kurtis Morrison from EyeQuant and Jered Goodyear from Epson.

eyequant

What is EyeQuant? EyeQuant is a software technology company that helps businesses make better design decisions with neuroscience. Our team combines research, big data, and machine learning to build predictive models of human reactions to visual design stimuli on websites.

The EyeQuant web service allows clients to upload screenshots of their designs (live sites and mock ups), and get statistically valid, data-driven feedback instantly. EyeQuant predicts which parts of the design are most/least visually attention-grabbing, where visitors are most likely to look when they arrive on the page, and whether they will perceive the design as being clean & well organized, or chaotic and busy.

eyequant

Why Epson Uses EyeQuant

Epson is one of the world’s largest manufacturers of consumer and industrial printers, projectors, and imaging-related equipment, with revenues exceeding $10 billion. On the Epson website, customers can buy printers, ink, paper, projectors, and other products. Epson’s eCommerce team is continuously running A/B and Multivariate tests, and were looking for an insights tool that could help them run smarter design tests. They turned to EyeQuant for help.

Epson now uses EyeQuant to analyze and improve designs across their entire eCommerce website, including category pages, product pages, and B2B lead generation landing pages, with the goal of increasing conversion rates.

eyequant

Identify Optimization Potential Learn More from A/B TestsPre-test Design Ideas

Steps to Success

57

73 78

91

TEST A

21%TEST B

5%

eyequant

Epson understands that user attention is a budget, so the first step they take

when analyzing a design is clearly prioritizing which elements on a page are

truly “must see” in order to get a conversion. The team uses a simple rule: the

three most important elements should be visible within the first 3 seconds of

landing on the page. Generally, Epson marks up the following pieces of

information on the page:

Identify Optimization Potential

2

1

3

Statement of Relevance (what is this page about?)

Value Proposition (why should the customer care?)

Call to action (where should they go next?)

eyequant

2Product benefits hidden

1

3CTA doesn’t pop

A quick test

Using the EyeQuant Perception Map, Epson is able to quickly

see if the most important content in the design catches

visitors’ eyes right away. On this product page, Epson learned

that the product benefits and call to action were being

overpowered by the imagery on the page, and not being

seen right away.


eyequant

1 Key content invisible!2

3

This perception map of the Projectors category page showed

that the imagery used in the banner was distracting users

from the more relevant and important content on the page.


eyequant

1

3CTA overpowered by imagery

2

Benefits ignored

On this lead generation page for High-Performance Dye-Sub

Printers, users are shown to ignore the benefits presented in

a “wall of text”, preferring the high-contrast visual content on

the right. The main CTA button is overpowered by a 2

competing calls to action, including a very salient (but likely

only relevant for a small group of visitors) offer to check out

the printers at a conference in Orlando.


eyequant

Drilling Down

Epson uses the EyeQuant Attention Map to dig deeper and

learn which elements on a design are attracting most and

least visual attention. For example, when analyzing the design

for Home Entertainment Projectors (category page), they

discovered that the image and tabs were particularly salient,

although neither were critical to the main goals for the page.

1

2

3


eyequant

10 23

Visual Clarity Map & Score Using EyeQuant’s Clarity Score feature, Epson is able to to identify pages that are busy/chaotic, by comparing their own scores with those of competitors and with the Alexa 10,000. The Clarity Map shows which areas of the page are the most cluttered.

Clearance Center Page Store Specials Page


eyequant


Steps to Success

57

73 78

91

TEST A

21%TEST B

5%

eyequant

Testing design ideas

Once the team has decided on a page with the right mix of importance and optimization potential, Epson mocks-up potential variants and uses EyeQuant to get important feedback before they ever write a line of code. In fact, they might test dozens of variations in the design before choosing the winning design(s) that they want to invest in. This allows them to experiment freely, quickly, and without involving any IT.

Following are several “quick tests” Epson ran on mock-ups of their Clearance Center category page, which is meant to showcase end-of-life or refurbished products available at steep discounts.

Pre-test Design Ideas57

73 78

91

eyequant

How big should the banner be?

The smaller banner does a better job of conveying key benefits right away, as well as a call to action. With the large banner, users are overwhelmed with the headline.

32

1

3

2

1


73 78

91

eyequant

Which should come first - “Featured Deals” or “Browse Deals by Category”?

Epson’s team preferred to place the “featured deals” above the “browse by category” section, but first used EyeQuant to check how that might affect the way the design is perceived. Thankfully, it actually improved the design’s clarity score, and still directed attention to the right places.

75 71

32

1

32

1


73 78

91

eyequant

What should our CTAs look like?

To design clean-looking calls to action, Epson compared potential alternatives according to their clarity score and map results. EyeQuant showed that a button-based CTA was perceived by users as being slightly cleaner than a text-based link.

75 73


73 78

91

eyequant

69 69

Visual merchandising: How many items should be displayed at once?

The team assumed there would be a trade-off between providing users with options and

keeping the design clean and focused, but found that as long as products were displayed in a

grid with minimal text, it didn’t have a serious affect on the attention map or clarity score.


73 78

91

eyequant

Final design shipped for A/B testing

The team ultimately decided on a design

that a) directed user attention to exactly

the right content, and b) did so in a way

that was visually clean, clear, and well

organized - achieving a clarity score of 78.

This is well above average for category

pages, and is a 68-point improvement on

the existing version of the page. The new

design was shipped for A/B testing.

78


73 78

91

eyequant

A/B Test Results

The EyeQuant optimized design significantly outperformed the original, and delivered:

• Over 20% more clicks through to the product pages for featured items. • Over 20% more clicks through to category pages. • Over 10% more clicks on the “buy now” buttons.

Original design New design (Winner)


73 78

91

eyequant


Steps to Success

57

73 78

91

TEST A

21%TEST B

5%

eyequant

Always be learning Epson has also used EyeQuant to analyze the winners of past A/B tests to gain more insight into why they performed better. In the A/B test results shown, the winning variant placed far more attention on trust seals. This provided valuable insight into the design strategy for future work on similar pages.

Learn More From A/B Tests

Original design Winning variation

TEST A

21%TEST B

5%

eyequant

Contact Kurtis Morrison VP, Client Services

[email protected]

+49 306 0989 9795

Data & Analytics

An Effective Process for Design Optimization and Conversion Boosting: How Epson Uses EyeQuant