How Do Website Colors Impact Conversion?
-
Upload
marketingexperiments -
Category
Documents
-
view
3.764 -
download
1
description
Transcript of 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.