Oli Gardner - Co-Founder, Unbounce
The 7 Principles of
Conversion Centered Design

Dan McGaw - KISSmetrics - @danielmcgaw
!
Dan is the Director of Marketing at KISSmetrics, where he
get’s the opportunity to help the best marketers in the world
measure their marketing and business efforts. Prior to
KISSmetrics, Dan was VP of growth at Code School, where he
helped the company grow to over 500k users and $400k+ in
monthly revenue.
Oli Garnder - Unbounce - @oligardner
!
As Creative Director (and inventor of the name Unbounce),
Oli lives on a 30 whiteboard, pushing brand direction, wire
framing conversion experiences, and developing marketing
theories for conversion rate optimization. He’s the author of
Unbounce's "big content" and has a perverse obsession with
telling bad landing pages they suck.

@danielmcgaw#KISSwebinar
Join the conversation on Twi er

@oligardner #KISSwebinar
Join the conversation on Twi er

WATCH WEBINAR RECORDING NOW

what is
Conversion
Centered
Design?

is better
than
Red
Button
Green
Button
Conversion Centered Design is NOT…

is better
thanCTA
CTA
Conversion Centered Design is NOT…

is better
than
CTA
CTA
Conversion Centered Design is NOT…

7 PROVEN
DESIGN PATTERNS
YOU CAN USE
TO INCREASE
CONVERSIONS
CCD is

1. Attention
2. Coupling
3. Context
4. Congruence5. Clarity
6. Credibility
7. Continuance
THE 7
PRINCIPLES
OF CCD
THE 7
PRINCIPLES
OF CCD

1. Attention
2. Coupling
3. Context
4. Congruence5. Clarity
6. Credibility
7. Continuance
THE 7
PRINCIPLES
OF CCD
THE 7
PRINCIPLES
OF CCD

1. Attention
2. Coupling
3. Context
4. Congruence5. Clarity
6. Credibility
7. Continuance
THE 7
PRINCIPLES
OF CCD
THE 7
PRINCIPLES
OF CCD

1. Attention
2. Coupling
3. Context
4. Congruence5. Clarity
6. Credibility
7. Continuance
THE 7
PRINCIPLES
OF CCD
THE 7
PRINCIPLES
OF CCD

1. Attention
2. Coupling
3. Context
4. Congruence5. Clarity
6. Credibility
7. Continuance
THE 7
PRINCIPLES
OF CCD
THE 7
PRINCIPLES
OF CCD

1. Attention
2. Coupling
3. Context
4. Congruence5. Clarity
6. Credibility
7. Continuance
THE 7
PRINCIPLES
OF CCD
THE 7
PRINCIPLES
OF CCD

1. Attention
2. Coupling
3. Context
4. Congruence5. Clarity
6. Credibility
7. Continuance
THE 7
PRINCIPLES
OF CCD

how is it different to
User
Centered
Design?

User Centered Design is…
Designing flow, interaction, wayfinding and
navigation to create usable systems and
products.
Creating an experience where a visitor knows:
1. Where they are
2. Where they can go next
3. How to go back to a previous state
This is not ideal for maximum conversions.

CONVERSION
is all about
ATTENTION

YOUR {AD}
captures
ATTENTION

YOUR {HEADLINE}
holds
ATTENTION

YOUR {DESIGN}
focuses
ATTENTION

What grabs your
attention here?

How about now?

“Hey honey, can you text me a
photo of the toothpaste we use?”

“If you want high conversions,
stay away from peacocks
and toothpaste!”
!
— Oli Gardner, Unbounce Co-Founder

CCD Principle #1
ATTENTION RATIO
…the ratio of interactive elements (links)
on the page, to the number of
campaign conversion goals
(which is always one).

Homepage
`
Landing page
57:1 1:1
Homepage vs. Landing Page

ATTENTION RATIO
Example A/B test hypothesis
By removing available options, people
will be more inclined to click on the
thing you want them to.

1:16:1
3.71% 5.28% +42.3%
Webinar recording page

AS ATTENTION RATIO
GOES DOWN,
CONVERSION RATES
GO UP

Why use landing pages?
Landing pages
are the heart
of CCD.
1. Attention
2. Coupling
3. Context
4. Congruence
5. Clarity
6. Credibility
7. Continuance
One page,
one purpose.
Period.

Paid marketing
Adwords
What should you use landing pages for?

Paid marketing
Social ads
What should you use landing pages for?

Paid marketing
Retargeting
What should you use landing pages for?

Paid marketing
Display ads
What should you use landing pages for?

Content marketing
Ebooks
What should you use landing pages for?

Content marketing
Webinars
What should you use landing pages for?

Content marketing
Blog subscription
What should you use landing pages for?

Content marketing
Guest posts
What should you use landing pages for?

Events
Google Hangouts
What should you use landing pages for?

Events
Meetups
What should you use landing pages for?

Events
Conferences
What should you use landing pages for?

Launches
Company
What should you use landing pages for?

Launches
Product
What should you use landing pages for?

Launches
App
What should you use landing pages for?

Services
Consultant
What should you use landing pages for?

Services
Portfolio
What should you use landing pages for?

Services
Quote request
What should you use landing pages for?

Services
Appointments
What should you use landing pages for?

Ecommerce
Product pages
What should you use landing pages for?

Ecommerce
Long sales letters
What should you use landing pages for?

Ecommerce
Pay walls
What should you use landing pages for?

Email marketing
To all of the above
What should you use landing pages for?

QR code
destinations
What should you use landing pages for?

Contests
What should you use landing pages for?

Surveys
What should you use landing pages for?

“Every marketing
campaign needs a
dedicated landing page”!
!
— Oli Gardner, Unbounce Co-Founder

CCD Principle #2
CONVERSION
COUPLING
…the bond that exists between the pre-
click experience and the corresponding
post-click landing experience.

The Topher Grace effect - synergy

Conversion Coupling
is comprised of one or more of:
1. Message Match
2. Design Match

Matching the copy of your ad to the
headline of your landing page.
Easy right?
Of course it is. Unless you’re lazy or
brain dead.
Message Match

Project Management Software Without Deadlines
getitdone.com/whenever
Remove the fear of deadlines from your projects, and start
delivering as late as you want to. Deadlines are dead.
Consider an example PPC ad…

Footer
Call to Action
Your offer details
and a bullet list of
benefits.
!
1. Lorem
2. Ipsum
3. Otherum
Your offer details
and a bullet list of
benefits.
!
1. Lorem
2. Ipsum
3. Otherum
Your offer details
and a bullet list of
benefits.
!
1. Lorem
2. Ipsum
3. Otherum
Call to Action Call to Action
Call to Action
Get More Projects Done
With Less Management
Doesn’t match.
!
Perhaps this is a
homepage
headline.

Your homepage is brand central station

Let’s try that again

Project Management Software Without Deadlines
getitdone.com/whenever
Remove the fear of deadlines from your projects, and start
delivering as late as you want to. Deadlines are dead.

Social proof
Call to Action
Project Management Software
Without Deadlines
Your offer details and a
bullet list of benefits.
!
1. Lorem
2. Ipsum
3. Otherum
Form header
An exact match
with the
headline on
the ad.
!
Bravo.

Quality Score goes up!

Matching the design of your display
ad to ‘aspects’ of the design on your
landing page.
This is even easier.
Design Match

A Facebook Ad

*may cause
temporary
blindness
The destination landing page*

Let’s try that again

A Facebook Ad

The destination landing page

That’s
great
design
match

Conversion Coupling
Takeaways
By matching your landing page headlines
and images with your ads, you’ll get:
!
1. A lower cost-per-click
2. A higher ad position
3. A better ROI
4. Higher conversion rates!

CCD Principle #3
CONTEXTUAL
DESIGN
…an experience that demonstrates
awareness of a visitor’s environment and
showcases the offering as it applies to
it’s use in said environment.

Contextual Design In Action
What’s the experience on this page?

Contextual Design Research
Question: What do you think of our
templates?

A: How much are they?
C: Can I use them in Wordpress?
B: Where can I download them?
D: NONE OF THE ABOVE

What’s wrong?
The context is missing

The solution: Context of use
Show me how I would use this

The solution: Context of use
Pick from over 80 templates
In the Unbounce template library
Edit and publish your landing page
Inside the Unbounce page builder

The result?
+45% Lift in New Trial Starts
EPIC TEST WIN!!!
120 extra per month = 1,440 / year
Average lifetime value of a customer = $706
Total impact on lifetime revenue, over the course of a
year: $1,016,640

“High-converting
landing pages create a
conversation based on
context”!
!
— Oli Gardner, Unbounce Co-Founder

…matching the style and context of
the conversation* established prior
to a click upon arrival on the
landing page.
Conversation Context
*Which most often comes into play
when linking to a landing page from a
blog post, online course or email.

An example click source
The Smart Marketers Landing Page Conversion Course

*I get it
wrong too
1
1 Super
generic
headline
The
landing
page*

Disrespecting
the click
Losing interest as soon as you get
the click. Abandoning your visitors.
LAME.

Let’s try that again

The click source
The Smart Marketers Landing Page Conversion Course

Co-branding1
1
2
Contextual
welcome
2
Author
reinforcement
3
3
Conversion
Lift +77%
*Full of contextual
references
The
landing
page*

Great
conversation
momentum

Contextual Design
Takeaways
If you start a conversation with your visitors, make sure
you finish it.
Use imagery and video to demonstrate how your
offering will actually be used, in a context that is
relatable by your prospects.

Let’s talk CCD analytics
for a second…
Are we getting the right conversions?

Lots of A/B tests flat line.
What then?

sometimes
TOP-OF-
FUNNEL
CONVERSION
DATA
ISN’T
ENOUGH

Homepage long
vs. short A/B test
The results of the A/B test were
inconclusive, so we were faced
with making a choice between
the two.
Looking at KISSmetrics funnel
report, we were able to
determine that customers
from the long version
achieved “activated” status
24% more often than those
form the short version.

Measure the whole funnel
not just the top

Measure their retention
not just first conversion

LOG IN WITH GOOGLE
Start Your Free KISSmetrics Trial

CCD Principle #4
CONGRUENT
DESIGN
…aligning every element on your page so
it works in concert to produce a single
cohesive message.

Content Alignment
Does your page tell a story?
Do this…
Write down all of the copy for your page in
a single column.
Read it out loud as you walk around the
room.
As soon as something sounds wrong,
rewrite or remove.
The goal is to remove any incongruent
messaging.

Incongruence
Conversion killing copy
Avoid mentioning negative suggestive words
Spam

Incongruence
Conversion killing copy
Avoid mentioning negative suggestive words
Gimmicks

CCD Principle #5
CLARITY
…creating delightful and easily
digestible experiences that encourage
conversion, and keep your brand top of
mind for future opportunities.

White Space
Designing for delight

Content Hierarchy
Message before brand
Project Management Software Without Deadlines
getitdone.com/whenever
Remove the fear of deadlines from your projects, and start
delivering as late as you want to. Deadlines are dead.
Project Management Software
Without Deadlines
Project Management Software
Without Deadlines
No Yes

Too much me
Not enough you

Back to the analytics…
Are my tests actually winning?

Can you
always
trust
your
test
results?

“Improving” the clarity of a CTA
Homepage call-to-action test
>> CTA describes the desire-driven end goal

“Improving” the clarity of a CTA
Homepage call-to-action test
>> CTA describes what will happen on the next screen

New CTA increased click-throughs to the
pricing page by +80%.
Looking further down the funnel with
KISSmetrics, we uncovered surprising
results.
Our ideal customer acquisition KPI
($99 plan) decreased by -22%.
Hooray! Not so fast.

CCD Principle #6
CREDIBILITY
…leveraging trust signals, transparency
and verifiable social commentary to
increase conversions.

Demonstrating credibility
• Testimonials (case studies, quotes, tweets)
• Reviews (customers, professionals)
• Ratings (stars, scores)
• Accreditations (industry associations)
• Security badges (SSL)
• Social interactions (likes, shares, followers)

Testimonials: Text vs. Video
vs.
Video: +25% increase in new trial starts
A/B test case study

“Will visitors respond better to a
short description of benefits vs.
social proof where third party’s are
describing those same benefits?”
CLARITY VS. CREDIBILITY
A/B test case study

Clarity vs. Credibility

IT ALL COMES BACK TO CONTEXT
!
The source of traffic was an email list with people
familiar with the Unbounce brand. Therefore, one
can assume they require less credibility and more
clarity. It might be a different result for cold
prospects.
Credibility reduced conversions by -6%
CLARITY VS. CREDIBILITY
A/B test results

Pro Credibility Tip
Ask people to trust you.
Research* has shown that by simply
asking people to trust you, trust
indicators rise.
“You can trust us to do the job for you.”
Auto service firm customer ratings:
Fair price +7%
Caring +11%
Fair treatment +20%
Quality + 30%
Competency + 33%
*Journal of advertising 35, no.4 (Winter 2006):101-112

CCD Principle #7
CONVERSION
CONTINUANCE…leveraging the opportunity to ask fresh
leads for a second conversion.

Please sir, I want some more

Webinar registration page

The confirmation page

The result
2,500 Webinar registrants
1,100 New blog subscribers (40%)
The lesson
Don’t be afraid to ask for a little extra.

Conversion Centered Design Lessons
What have we learned?
1. Every marketing campaign needs a dedicated landing page
2. As Attention Ratio goes down, conversion rates go up
3. Coupling your landing page headline and images to your ads
creates a better experience and results in higher conversions
4. Context is king, and maintaining conversation momentum
leads to big wins
5. Incongruent writing can kill your conversion rates
6. Focus on message before brand
7. Always ask for a second conversion on your confirmation
pages
8. Dig deeper into your KISSmetrics analytics to verify test
results and performance

Questions
Oli Gardner
Co-Founder, Unbounce
@oligardner
Dan McGaw
DM, KISSmetrics
@danielmcgaw

THANK YOU!