design for conversion - web design to get results
DESCRIPTION
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.TRANSCRIPT
![Page 1: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/1.jpg)
Design for (or how to kick your website into action) conversion www.credos.com.au
![Page 2: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/2.jpg)
Why conversion should matter to web designers
You’re NOT delivering websites…
![Page 3: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/3.jpg)
You’re delivering results.
![Page 4: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/4.jpg)
What do web designers
design for?
![Page 5: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/5.jpg)
Design for…
…art’s sake
My beautiful website
✗ �
![Page 6: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/6.jpg)
Design for…
…technology’s sake
Let’s have lots of bells
and whistles!
✗ �
![Page 7: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/7.jpg)
Design for…
…clients’ egos
The Emperor’s new clothes look
great on him, don’t they?
✗ �
![Page 8: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/8.jpg)
Design for…
…a quick buck ✗ �
![Page 9: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/9.jpg)
Design for…
…keeping up with the Joneses
I want a cool new website!
Their website is cooler than
ours Maybe ours will win an award
Me too!
✗ �
![Page 10: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/10.jpg)
Design for…
…conversion ✓ �(achieving website goals)
![Page 11: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/11.jpg)
Design for conversion involves…
Attracting the right people
Engaging their interest
Converting interest into action
Achieving results ✔ �
![Page 12: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/12.jpg)
Calculating results
x Web traffic Conversion rate = Success rate
![Page 13: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/13.jpg)
SEO & conversion: basic maths
X Conversion rate = Web
traffic Success
rate
X X
0 100%
100 0
0 0
= =
![Page 14: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/14.jpg)
Improving success rate
X
What’s easier – doubling web traffic, or increasing conversion by 5%?
Conversion rate = Web
traffic Success
rate
X X X
5%
10%
5 %
1000 1000 2000
50 100 100
= = =
![Page 15: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/15.jpg)
SEO & conversion: both matter
Web traffic (SEO effort)
Conversion rate (design effort)
• Takes time • Always changing • Needs constant
attention
• Easy to do • Can give quick
results • Small wins count
![Page 16: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/16.jpg)
design for conversion
How to
![Page 17: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/17.jpg)
• Increase market share/turnover/profit • Attract higher value business • Cross-sell related services • Increase customer loyalty • Reduce support costs • Boost brand reputation • Launch a new product or service
Start by asking “Why?” Identify business objectives, for example…
What role will the website play?
What do we really want to achieve?
What’s the business case?
![Page 18: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/18.jpg)
• Streamline processes, cut costs • Raise the organisation’s profile • Attract members/sponsors/donations • Provide timely information/services, etc
Start by asking “Why?” Non-commercial organisations have objectives too
How can the website help?
What are the priorities?
How will we justify the time/cost?
![Page 19: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/19.jpg)
• Sales transactions • Number/type of enquiries • User registrations • Sharing via social networks • Contributions (comments/info) • Viewing specific pages/media
Turn objectives into goals What can you measure? Some examples…
![Page 20: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/20.jpg)
• Google Analytics – set goals • Bounce rate • Landing pages • Exit pages • Page visits/pathways • Sales/e-marketing data
Measuring goals
![Page 21: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/21.jpg)
Design for conversion involves…
Attracting the right people
Engaging their interest
Converting interest into action
Achieving results ✔ �
![Page 22: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/22.jpg)
First, decide what you are REALLY selling Attracting the right people
A 5mm drill bit?
Or a 5mm hole?
![Page 23: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/23.jpg)
People don’t buy products & services. They buy solutions to their needs
Hunger Security Shelter
Convenience Relaxation Adventure
![Page 24: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/24.jpg)
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
![Page 25: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/25.jpg)
An example…
Client: EzyLifter Product: Floorboard lifting tool www.ezylifter.com
![Page 26: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/26.jpg)
What’s the proposition?
Selling a means to: • Pull up decking & timber boards easily • Reduce cost of home renovations • Save time on demolition work • Reduce back strain/injury • Meet health & safety regulations • Re-use or recycle timber
The needs it answers: An easier life
Saving money
Business profit
Health
Security
Environmental concern
![Page 27: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/27.jpg)
Keyword research (using Google Adwords Keyword Tool)
![Page 28: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/28.jpg)
Keyword statistics for the website (using Google Analytics)
www.ezylifter.com
![Page 29: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/29.jpg)
0. Don’t have a need 1. Recognise a need 2. Aware solutions exist 3. Know of your solution 4. See your benefits 5. Are convinced to buy
Where is your audience on the awareness scale?
5 4
3 2
1 0
![Page 30: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/30.jpg)
0. Not relevant/concerned 1. Need to save time, reduce
back strain, recycle flooring 2. Aware there are tools 3. Have heard of Ezy-Lifter 4. See benefits of Ezy-Lifter 5. Are convinced to buy
Using the awareness scale
5 4 3
2
1
0 Ezy-Lifter target audience: builders, demolition contractors, home renovators, decking specialists, hardware stores
(segmenting the target audience)
![Page 31: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/31.jpg)
The usual linear approach
Home
✓ �buy
Products
benefits
FAQs Customer feedback
videos features info gallery
![Page 32: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/32.jpg)
Disadvantage of the linear approach
(one size fits all)
![Page 33: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/33.jpg)
The concentric approach 1
2
1
1 2
2
3
2
2
3
3
4
1
1
1
1
✓ �Home
Landing page
Explain need
Answer need
Push benefits
Convert
![Page 34: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/34.jpg)
Design for conversion…
Attracting the right people
Engaging their interest
Converting interest into action
Achieving results ✔ �
![Page 35: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/35.jpg)
Getting their attention
• Address your audience’s needs personally
• Confirm they are where they want to be
• Give them reasons to keep going
(use the right headline)
What’s in it for ME?
I’m in the right place
This sounds interesting
![Page 36: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/36.jpg)
Getting their attention
The easy way to pull up floorboards & decking
(use the right headline)
Renovate your deck in half the time
No more back-breaking work
Product information ✗ �✓ �✓ �✓ �
Which headlines engage interest?
![Page 37: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/37.jpg)
You’ll save SO much time (and your back will thank you too!) With Ezy-Lifter you can remove floor boards and timber decking in less than half the time.
Its patented ergonomic design means no more bending and straining, less chance of doing your back in, and more time to sit and enjoy your new floor or deck.
Getting their attention (it’s about YOU, not us)
Tell me more » More info »
Floorboard lifting tool Pull up old boards and decking
Ezy-Lifter is our patented board lifting device to help remove floor boards and timber decking.
Our tool reduces the back-breaking work of pulling up boards, giving time and money savings while reducing risk of back injuries.
(us) (you)
![Page 38: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/38.jpg)
Getting their attention (emotion before logic)
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
Example headlines…
![Page 39: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/39.jpg)
Getting their attention (design to be noticed)
• Size • Contrast • Boldness • Colour • Position • Space • 3D effects • Movement
www.ezylifter.com
Factors affecting noticeability of each page element:
![Page 40: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/40.jpg)
Getting their attention (design to be noticed)
Try the squint test – what stands out?
• Size • Contrast • Boldness • Colour • Position • Space • 3D effects • Movement
Factors affecting noticeability of each page element:
![Page 41: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/41.jpg)
Keeping them engaged
Affirm positive messages
Provide calls to action
Back up claims
Provide reassurance
Anticipate next steps
Address the audience’s perspective
Reinforce brand values
Use active language
Segment and layer the content
www.rockpeople.com
![Page 42: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/42.jpg)
Keeping them engaged
Be clear about the offering
Address concerns
Don’t be shy
Provide easy routes to goals
Reinforce brand values
Shout about successes
www.rockpeople.com
![Page 43: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/43.jpg)
Design for conversion…
Attracting the right people
Engaging their interest
Converting interest into action
Achieving results ✔ �
![Page 44: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/44.jpg)
Convert them.
Introduce a sense of urgency
(provide clear calls to action)
Provide clear choices to remove potential barriers
Buy NOW (not later)
Repeat action calls within the copy Use simple, active language Make it easy to find the phone number
![Page 45: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/45.jpg)
Convert them. (designing call to action links)
• Use active verbs • Be clear & direct • Say what will happen • Imply urgency • Include benefits • Address it to “you” • Command (nicely)
rather than asking
Sign up for a FREE trial Start sending files within minutes
Contact our team now and see how we can save you money
Try it for yourself - FREE
Limited offer – buy now
Download the full article
Yes, send me updates
![Page 46: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/46.jpg)
Convert them.
Yes, I’m ordering the right product
That helps - I can see how to order the right amount
www.quilterscloth.co.uk
Good, I know it’s in stock
I’m glad they explained the terminology
I can see what I’ve ordered
Great, they deliver overseas
I can see the delivery cost
(anticipate resistance points, address concerns)
I won’t have to wait too long
![Page 47: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/47.jpg)
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
![Page 48: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/48.jpg)
Design for conversion…
Attracting the right people
Engaging their interest
Converting interest into action
Achieving results ✔ �
![Page 49: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/49.jpg)
✓ �
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
![Page 50: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/50.jpg)
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
![Page 51: Design for conversion - web design to get results](https://reader034.vdocument.in/reader034/viewer/2022042714/54c812254a7959994b8b4640/html5/thumbnails/51.jpg)
Carolyn King | web www.credos.com.au | twitter @CredosAssoc