A look at web design for conversion - design and content planning techniques for kicking a website into action - converting site visits into real results. The presentation covers how to attract the right audience, engage their interest, convert interest into action, and achieve and measure results. It was presented by Carolyn King at the Brisbane Web Design Meetup on 21 July 2011.

1. Design for
conversion
(or how to kick your website into action)
www.credos.com.au

2. Why conversion should matter
to web designers
You’re NOT delivering websites…

3. You’re delivering results.

4. What do
web designers
design for?

5. Design for…
My beautiful website
…art’s sake
✗�

6. Design for…
Let’s have
lots of bells
and whistles!
…technology’s sake
✗�

7. Design for…
The Emperor’s
new clothes look
great on him,
don’t they?
…clients’ egos
✗�

8. Design for…
…a quick buck
✗�

9. Design for…
I want a
cool new Me too!
website!
Their website
Maybe ours will is cooler than
win an award
ours
…keeping up with the Joneses
✗�

10. Design for…
…conversion
(achieving website goals)
✓�

11. Design for conversion involves…
Attracting the right people
Engaging their interest
Converting interest into action
Achieving results ✔�

12. Calculating results
Web traffic
Conversion rate
x
= Success rate

13. SEO & conversion: basic maths
Web
traffic X Conversion
rate = Success
rate
100 X 0 = 0
0 X 100% = 0

14. Improving success rate
Web
traffic X Conversion
rate = Success
rate
1000 X 5% = 50
1000 X 10 % = 100
2000 X 5% = 100
What’s easier – doubling web traffic, or increasing conversion by 5%?

15. SEO & conversion: both matter
Web traffic Conversion rate
(SEO effort) (design effort)
• Takes time • Easy to do
• Always changing • Can give quick
• Needs constant results
attention • Small wins count

16. How to
design for
conversion

17. Start by asking “Why?”
Identify business objectives, for example…
• Increase market share/turnover/profit
• Attract higher value business
• Cross-sell related services What role will the
website play?
• Increase customer loyalty What do we really
want to achieve?
• Reduce support costs What’s the
• Boost brand reputation business case?
• Launch a new product or service

18. Start by asking “Why?”
Non-commercial organisations have objectives too
• Streamline processes, cut costs
• Raise the organisation’s profile
• Attract members/sponsors/donations
• Provide timely information/services, etc
What are the How can the How will we
justify the
priorities? website help? time/cost?

19. Turn objectives into goals
What can you measure? Some examples…
• Sales transactions
• Number/type of enquiries
• User registrations
• Sharing via social networks
• Contributions (comments/info)
• Viewing specific pages/media

20. Measuring goals
• Google Analytics – set goals
• Bounce rate
• Landing pages
• Exit pages
• Page visits/pathways
• Sales/e-marketing data

21. Design for conversion involves…
Attracting the right people
Engaging their interest
Converting interest into action
Achieving results ✔�

22. Attracting the right people
First, decide what you are REALLY selling
A 5mm
drill bit?
Or a 5mm
hole?

23. People don’t buy products & services.
They buy solutions to their needs
Hunger Security Shelter
Convenience Relaxation Adventure

24. So, what are YOU selling?
• Identify which needs you solve
• Turn your product/service into a proposition
that answers a need
• Turn features into benefits
• Think like a customer
• Identify what they’re searching for
• Find keywords relevant to your audience
• Broaden your market reach

25. An example…
Client: EzyLifter
Product: Floorboard lifting tool
www.ezylifter.com

26. What’s the proposition?
The needs it answers:
An easier life
Saving money
Business profit
Selling a means to: Health
Security
• Pull up decking & timber boards easily Environmental concern
• Reduce cost of home renovations
• Save time on demolition work
• Reduce back strain/injury
• Meet health & safety regulations
• Re-use or recycle timber

27. Keyword research
(using Google Adwords Keyword Tool)

28. Keyword statistics for the website
(using Google Analytics)
www.ezylifter.com

29. Where is your audience on the
awareness scale?
0
1
2 0. Don’t have a need
3 1. Recognise a need
4 2. Aware solutions exist
5 3. Know of your solution
4. See your benefits
5. Are convinced to buy

30. Using the awareness scale
(segmenting the target audience)
Ezy-Lifter target audience: builders, demolition contractors,
0
home renovators, decking specialists, hardware stores
1
0. Not relevant/concerned
1. Need to save time, reduce 2
back strain, recycle flooring
2. Aware there are tools 3
3. Have heard of Ezy-Lifter 4
4. See benefits of Ezy-Lifter
5
5. Are convinced to buy

31. The usual linear approach
Home
Products
videos gallery features benefits info
Customer
feedback
✓�
buy FAQs

32. Disadvantage of the linear approach
(one size fits all)

33. The concentric approach
1
Landing
page 2
Explain
1 need
Answer
need
1 2 Push
3 benefits
✓�
Home Convert
3 4
1 2
3
1 2
1 2
1

34. Design for conversion…
Attracting the right people
Engaging their interest
Converting interest into action
Achieving results ✔�

35. Getting their attention
(use the right headline)
• Address your audience’s What’s in it
needs personally for ME?
• Confirm they are where I’m in the
they want to be right place
• Give them reasons to This sounds
keep going interesting

36. Getting their attention
(use the right headline)
Which headlines engage interest?
Product information ✗�
The easy way to pull up floorboards & decking ✓�
Renovate your deck in half the time ✓�
No more back-breaking work ✓�

37. Getting their attention
(it’s about YOU, not us)
Floorboard lifting tool You’ll save SO much time
Pull up old boards and decking (and your back will thank you too!)
Ezy-Lifter is our patented board lifting With Ezy-Lifter you can remove floor boards and
device to help remove floor boards timber decking in less than half the time.
and timber decking.
Its patented ergonomic design means no more
Our tool reduces the back-breaking bending and straining, less chance of doing your
work of pulling up boards, giving time back in, and more time to sit and enjoy your new
and money savings while reducing floor or deck.
risk of back injuries.
More info » Tell me more »
(us) (you)

38. Getting their attention
(emotion before logic)
Example headlines…
Make your job easier – you deserve a break
Recycle timber – the planet will thank you for it!
Your clients will love you for saving them money
Are you putting your staff’s safety at risk?
Get ahead of the game - be the first to own one

39. Getting their attention
(design to be noticed)
Factors affecting
noticeability of each
page element:
• Size
• Contrast
• Boldness
• Colour
• Position
• Space
• 3D effects
www.ezylifter.com
• Movement

40. Getting their attention
(design to be noticed)
Factors affecting
noticeability of each
page element:
• Size
• Contrast
• Boldness
• Colour
• Position
• Space
• 3D effects
• Movement Try the squint test – what stands out?

41. Keeping them engaged
Use active
Affirm positive
language
messages
Reinforce
Anticipate brand values
next steps
Provide calls Back up
to action claims
Segment
and layer
the content
Provide
Address the reassurance
audience’s
perspective www.rockpeople.com

42. Keeping them engaged
Be clear about Reinforce
the offering brand values
Don’t be
shy
Address
concerns
Shout about
successes
Provide easy
routes to goals
www.rockpeople.com

43. Design for conversion…
Attracting the right people
Engaging their interest
Converting interest into action
Achieving results ✔�

44. Convert them.
(provide clear calls to action)
Buy NOW (not later)
Introduce a sense
of urgency
Provide clear
choices to remove
potential barriers
Repeat action calls
within the copy
Use simple,
active language
Make it easy to find
the phone number

45. Convert them.
(designing call to action links)
• Use active verbs Sign up for a FREE trial
Start sending files within minutes
• Be clear & direct
• Say what will happen Contact our team now
and see how we can save you money
• Imply urgency
• Include benefits Try it for yourself - FREE
• Address it to “you” Limited offer – buy now
• Command (nicely)
rather than asking Download the full article
Yes, send me updates

46. Convert them.
(anticipate resistance points, address concerns)
That helps - I can
see how to order
Yes, I’m ordering the right amount
the right product
I’m glad they
Good, I know explained the
it’s in stock terminology
I can see what
I’ve ordered
I won’t have to
I can see the
wait too long
delivery cost
Great, they
deliver overseas www.quilterscloth.co.uk

47. Convert them.
(factors that affect conversion rates)
• Entry path – relevance of site content to user need
• Audience awareness of need/solution
• Perception of brand – trust & credibility
• Language & tone of voice
• Quality of information
• Delivering right information, right time
• Page layout & design (clarity, usability, style)
• Hard evidence (or visual evidence, like videos)
• User ratings/reviews

48. Design for conversion…
Attracting the right people
Engaging their interest
Converting interest into action
Achieving results ✔�

49. Achieving results
(a tactical checklist)
 Have multiple landing pages, targeted at audiences
according to place on awareness scale
 Ensure inbound links relate to audience needs
 Make sure every page has a clear next step/action
 Strip out all content that doesn’t achieve goals
 Use “squeeze pages” to force people to action
 Convert the converted – reward goal scorers
(post-sales offers, up-sell, send to friend)
✓�
 Test & improve – A/B split or multivariate testing

50. Further reading
• “Convert!” by Ben Hunt: http://amzn.to/o4UXA9
• Goal-oriented web design: http://bit.ly/nblFxW
• Optimizing Conversion Rates: It’s All About Usability
(Smashing Mag) http://bit.ly/oeiQ9i
• Increasing Conversion with Web Design:
http://bit.ly/nO96tf
• A/B Testing: Usability From A to B:
http://bit.ly/ndLkMg
• How Hyundai increased requests for test drive by
62% using multivariate testing: http://bit.ly/nhYahw
This presentation: http://www.slideshare.net/cazazz
All the above links: http://bitly.com/bundles/cazazz/1

51. Carolyn King | web www.credos.com.au | twitter @CredosAssoc