How Do Website Colors Impact Conversion?

How Do Website Colors Impact Conversion? New research reveals 5 critical horrifying mistakes designers make with color (special Halloween edition)

#webclinic

#webclinic

Join the conversation on Twitter

#webclinic

#webclinic

Today’s team

Dr. Flint McGlaughlin – Managing Director, MECLABS

Flint McGlaughlin is the Managing Director of MECLABS Group. The organization has partnered with key market leaders including The New York Times, Microsoft Corporation, and Reuters Group. Dr. McGlaughlin also serves as the Director of Enterprise Research at the Transforming Business Institute, University of Cambridge (UK), as the Chairman of the Board of Governors for St. Stephen’s University, and as a Trustee for Westminster Theological Centre. Dr. McGlaughlin originally studied Philosophy and Theology at the University of London’s Specialist Jesuit College. Today, his primary research is focused on enterprise as transformative agent. His work has won multiple awards and has been quoted in more than 13,000 online and offline sources.

#webclinic

4

Experiment: Background

Background: A large sports entertainment provider sought to increase conversion on it’s main landing page. Goal: To increase premium signups Research Question: Which color scheme will result in a higher conversion rate? Test Design: A/B Single factor split

Experiment ID: TP1645 Record Location: MECLABS Research Library Research Partner: [Protected]

Research Notes:

#webclinic

5

Controlled Testing Environment (CTE)

Fully Optimized Page Goes Live

Test Cycle #1

Test Cycle #2

Control TRT 1 TRT 2

Control TRT

TRT 3

2 MECLABS

Certified Final

Get a MECLABS Controlled Testing Environment

Embed a Science Lab in the heart of your organization.

Your Marketing

Team

2 Your Creative

#webclinic

Experiment: Treatment Designs

• The control was a design with a dark background and white text.

Version A

#webclinic

Experiment: Treatment Designs

Version B

• The treatment was an almost exact color inverse of the control.

#webclinic

8

Experiment: Which Page Won? Version A Version B

#webclinic

10.66% Increase in account sign ups The inverse color scheme increased account sign ups by 10.66%

Experiment: Results

What you need to understand: By simply changing the background color to white, the treatment was easier to read and provided greater color flexibility with headlines and secondary information. The result was a 10.66% increase in conversion.

Design Lead Rate Relative

Difference Statistical Level of Confidence

Control (Black) 2.40%* - -

Treatment (White) 2.66%* 10.66% 95%

*Conversion rates have been anonymized

#webclinic

10

Why makes colors affect conversion?

F Key Principles

1. Marketers do not optimize web designs, they optimize thought sequences. Yet often, our web page design is NOT created with the intention of guiding the visitor through a clear sequence of thought.

2. There are primarily 5 design elements that enable a marketer to guide the visitor’s through a conversion process:

1. Size 2. Shape 3. Color 4. Position 5. Motion

3. Of the five elements, color is likely the most overlooked and misused.

#webclinic

11

Today, we are going to learn how to avoid the 5 most critical horrifying mistakes made with color.

Today’s Focus

#webclinic

12

MISTAKE #1: WRONG EMPHASIS HORRIFYING

#webclinic

13

Background: Site provides educational resources for health and fitness professionals who subscribe to one of their online memberships. Goal: To increase the amount of membership sign-ups. Primary research question: Which landing page will have the highest clickthrough rate?

Approach: A/B split test (variable cluster)

Experiment ID: (Protected) Location: MarketingExperiments Research Library Test Protocol Number: TP1187

Research Notes:

MISTAKE #1: WRONG EMPHASIS

#webclinic

14

MISTAKE #1: WRONG EMPHASIS

Before

• There is not distinction in emphasis between the offers.

#webclinic

15

• Offers have been simplified, layered, and sequenced using color.

After

MISTAKE #1: WRONG EMPHASIS

#webclinic

16

Subscription path CTR Relative diff v. control

Original 16.54% -

Optimized 30.00% 81.36%

81% Increase in clickthrough rate Radical redesign outperformed the control within 11 days

MISTAKE #1: WRONG EMPHASIS

What you need to understand: By strengthening the communication of the value proposition through color, copy, and layout changes, the treatment increased clickthrough by 81%.

#webclinic

17

MISTAKE #1: WRONG EMPHASIS

Not this But this

97% IN CONVERSION

#webclinic

18

Not this But this

MISTAKE #1: WRONG EMPHASIS

48% IN CONVERSION

#webclinic

Primary Objective: To increase donations

Primary Traffic: Email Link

Page URL: http://bit.ly/Ssk2kb

Target Audience: Direct marketing list of donors who received an email linking to this page

United Way Toronto

MISTAKE #1: WRONG EMPHASIS Live Optimization

#webclinic

20

MISTAKE #2: WRONG AMOUNT HORRIFYING

#webclinic

21

Background: A consumer credit counseling service offering free debt consultation. Goal: To increase the amount of free debt consultation sign-ups without additional traffic. Primary research question: Which page will generate the highest completion rate? Approach: A/B split test of three different versions of a homepage.

Experiment ID: [Protected] Location: MarketingExperiments Research Library Test Protocol Number: TP1243

Research Notes:

MISTAKE #2: WRONG AMOUNT

Control

MISTAKE #2: WRONG AMOUNT

• Main objective of the page is lost in all the color of the page

• By creating a pop-up, the treatment effectively eliminated all color distractions.

Close [x]

Treatment

MISTAKE #2: WRONG AMOUNT

Conversion Rate Relative Difference Statistical Confidence

Control 14.06% - -

Treatment 22.95% 63.19%

63% Increase in Conversion Treatment outperformed the control by 63.19%

What you need to understand: The pop-up overlay version of the form received 63% more completions than the control.

MISTAKE #2: WRONG AMOUNT

95%

#webclinic

Logo

Company

Not This

MISTAKE #2: WRONG AMOUNT

Many colors competing for the attention of the visitor

#webclinic

Logo

Company

But this

MISTAKE #2: WRONG AMOUNT

Main call-to- action emphasized with color only.

20% IN CONVERSION

#webclinic

Primary Objective: To guide shoppers to best sub-category of jigsaw puzzles and complete the sale. Primary Traffic: SEO: jigsaw puzzles for sale, puzzle store, sunsout puzzles, ravensburger puzzles

Page URL: http://bit.ly/XTa3WG

Target Audience: Retirees, Seniors,Parents and Families

Puzzle Warehouse

MISTAKE #2: WRONG AMOUNT Live Optimization

#webclinic

28

MISTAKE #3: WRONG COMBINATION HORRIFYING

29

Background: A large artist community that offers paid subscriptions to more content. Goal: To increase clickthrough on homepage to offer page. Research Question: Which color scheme will result in a higher conversion rate? Test Design: A/B Single factor split

Experiment ID: TP1444 Record Location: MECLABS Research Library Research Partner: [Protected]

Research Notes:

MISTAKE #3: WRONG COMBINATION

#webclinic

30

MISTAKE #3: WRONG COMBINATION

The control featured a simple form and a button.

Control

[Brand]

#webclinic

31

MISTAKE #3: WRONG COMBINATION

The treatment was exactly the same approach but with a darker background to produce a higher contrast.

Treatment

[Brand]

#webclinic

32

Treatment Control

MISTAKE #3: WRONG COMBINATION

[Brand] [Brand]

#webclinic

33

Clickthrough Rate Relative Difference Statistical Confidence

Control 0.020% - -

Treatment 1 0.027% 19.5%

19.5% Increase in Clickthrough The treatment outperformed the control in clickthrough by 19.5%

What you need to understand: By changing the background color for greater contrast, the treatment outperformed the control by 19.5%.

92%

MISTAKE #3: WRONG COMBINATION

#webclinic

34

MISTAKE #3: WRONG COMBINATION

Not This But This

88% IN CONVERSION

#webclinic

Primary Objective: Conversions

Primary Traffic: Newsletter Email

Page URL: http://bit.ly/SekLCY

Target Audience: Newsletter subscribers who click on ad for free bonuses

VitalChoice

MISTAKE #3: WRONG COMBINATION Live Optimization

#webclinic

36

MISTAKE #4: WRONG MESSAGE HORRIFYING

#webclinic

37

Background: A large publication seeking to increase home delivery subscriptions. Goal: To increase home delivery subscriptions Research Question: Which color scheme will result in a higher conversion rate? Test Design: A/B Single factor split

Experiment ID: TP1693 Record Location: MECLABS Research Library Research Partner: [Protected]

Research Notes:

MISTAKE #4: WRONG MESSAGE

#webclinic

MISTAKE #4: WRONG MESSAGE

BRAND

BRAND

Version A

Version A utilized the current best practice “blue” look and feel.

#webclinic

39

MISTAKE #4: WRONG MESSAGE

BRAND

BRAND

Version B

Version B tested a new “green” look and feel.

#webclinic

40

BRAND

BRAND

BRAND

BRAND

MISTAKE #4: WRONG MESSAGE

Which color design increase subscriptions?

#webclinic

41

11.2% Increase in Subscriptions The blue color scheme increased subscriptions by 11.2%

Design Lead Rate Relative

Difference Statistical Level of Confidence

Version A 4.7% 11.2%

Version B 4.3% -

86%

MISTAKE #4: WRONG MESSAGE

#webclinic

42

BRAND

BRAND

MISTAKE #4: WRONG MESSAGE

Hypothesis to Test: The familiar brand colors actually carry with them the implied value proposition associated with the brand.

Why did the blue version win?

#webclinic

43

MISTAKE #4: WRONG MESSAGE

Not this

#webclinic

44

MISTAKE #4: WRONG MESSAGE

But this

13% IN CONVERSION

#webclinic

Primary Objective: To establish trust and further exploration of the site

Primary Traffic: SEO, Direct Mail and Homepage

Page URL: http://bit.ly/Rr6ZP8

Target audience: Moms with children ages 2-11

Academy of Music & Art

MISTAKE #4: WRONG MESSAGE Live Optimization

#webclinic

46

MISTAKE #5: WRONG FLOW HORRIFYING

#webclinic

47

51% IN CONVERSION

Not this

But this

MISTAKE #5: WRONG FLOW

By separating the call-to-action with a white background, the call-to-action looks unrelated to the banner ad messaging. This creates a division in the thought sequence.

Sub-brand

Credit Card Image

Main Brand

Organization Credit Card

Organization Initiatives

Credit Card Credit Card

Image

#webclinic

48

MISTAKE #5: WRONG FLOW

Not this

The main orange call-to-action is buried between a bright red seal and the price of the product (also in orange). While it may be the right color, it occurs at the wrong time on the page.

#webclinic

49

But this Not this

MISTAKE #5: WRONG FLOW

IN CONVERSION

41%

#webclinic

Primary Objective: To get visitors to fill out the contact form, phone call, purchase of plan Primary Traffic: Adwords, SEO, Craigslist

Page URL: http://bit.ly/Sbv0qQ

Target Audience: Small business owners

PC MediaOne

MISTAKE #5: WRONG FLOW Live Optimization

#webclinic

51

F Key Principles

SUMMARY: PUTTING IT ALL TOGETHER

1. Marketers do not optimize web designs, they optimize thought sequences. Yet often, our web page design is NOT created with the intention of guiding the visitor through a clear sequence of thought.

2. There are primarily 5 design elements that enable a marketer to guide the visitor’s through a conversion process:

1. Size 2. Shape 3. Color 4. Position 5. Motion

1. Of the five elements, color is likely the most overlooked and misused.

#webclinic

52

F Key Principles

SUMMARY: PUTTING IT ALL TOGETHER

Mistake #1: Wrong Emphasis

Mistake #2: Wrong Amount

Mistake #3: Wrong Combination

Mistake #4: Wrong Message

Mistake #5: Wrong Flow

#webclinic

53

Live Optimization

#webclinic

54

Learn how to: Create your own unique Value Proposition Optimize its impact and effectiveness on your audience Infuse it into all of your marketing collateral Watch the short promo video at:

MECLABS.com/ValueProp

VALUE PROPOSITION DEVELOPMENT COURSE NOW LIVE…

#webclinic

Primary Objective: To acquire new customers

Primary Traffic: Circ tiles/banner ads on website

Page URL: http://bit.ly/TTRsdx

Target Audience: CEO's, CFO's, MD's.

Wall Street Journal Europe

LIVE OPTIMIZATION

#webclinic

Primary Objective: To get people to choose a plan and call. Primary Traffic: AdWords: "local search for small business" "local small business marketing" "how to find new customers" "local customers"

Page URL: http://bit.ly/UdLkaz

Target Audience: Small business owners who depend on local customers coming into their business.

Slap it on the Map

LIVE OPTIMIZATION

#webclinic

MarketingExperiments.com/subscribe

MarketingExperiments Optimization Newsletter Free subscription to more than $20 million in marketing research

Join 98,000 of the top marketers from around the world as we work together to discover what really works.