Design For Conversions - Designing your marketing website to connect with more customers
- 1. Using design to connect with customers Brian Casel · casjam.com
- 3. Restaurant Engine A web design service for Restaurants. RestaurantEngine.com
- 4. Design For Conversions My book Available in early November casjam.com/book
- 5. Design For Conversions? What is a conversion? Traditionally: A sale, an opt-in (newsletter, white paper, webinar, etc.) But also: New visitor to engaged reader, customer to evangelist, & more... What are we talking about today? Your marketing website. Design + marketing concepts = a website that performs Who is this talk for? Founders, Designers, Developers, Marketers Products or Services
- 6. Value • Your Value Proposition is Everything - No matter what business you’re in, you’re in the business of creating value. - Examples: Web Design Services, Basecamp • Purpose of your website: - Drive home your value proposition - Make it a “No Brainer” • Value Mindset: - See your site through the eyes of your customer. - Every design decision: Does this help my customer see the value?
- 7. Value Basecamp.com Lean heavily on social proof to convey the value their product brings to customers.
- 8. Value RestaurantEngine.com/pricing When I heard push-back on price, I added this graphic to spell out the value of the product.
- 9. Talk to One Person • Common mistake: Talking to a crowd • Know your customer - What do they care about? - What is their biggest challenge/pain? - How can you make it a WIN for them? • Be authentic - People buy from people - “I” vs. “We”
- 10. Talk to One Person 10000ft.com They know me. Speaking in terms that resonate with things that I care about (and struggle with).
- 11. Grab & Keep Attention • Is this worth my time? - We are are ruthless about our time— especially when we’re on a mission. - If you don’t grab & keep a 1st-time visitor’s attention, they will click the back-button (and probably never return). • Top Headline - Grab attention. - Make a short, bold statement. - Touch on a point that resonates. • 2nd headline (or paragraph) - Establish relevancy - Provoke curiosity
- 12. Grab & Keep Attention Kissmetrics.com The first headline grabs your attention, resonates with a pain (Google Analytics doesn’t tell you everything). The second headline goes deeper and provokes curiosity.
- 13. Copywriting Tips Benefits, not features Focus on the benefit customer receives, not the technical feature. Reduce friction Overcome customer’s natural resistance in online transactions. No risk, easy onboarding, secure AIDA Attention, Interest, Desire, Action
- 14. Copywriting Tips Benefits, not features. Balsamiq.com Focuses on the benefits/possibilities that a designer receives when using their app.
- 15. Copywriting Tips Reduce Friction Basecamp.com Emphasize “60-day unlimited free trial” No obligation, no credit card required.
- 16. Carve a Clear Path • A visitor should never ask themselves, “Where do I go next?” • Prioritize navigation. Don’t include all links to all pages. Separate and prioritize. • Set clear expectations (what will happen when this button is clicked?)
- 17. Carve a Clear Path • A visitor should never ask themselves, “Where do I go next?” • Prioritize navigation. Don’t include all links to all pages. Separate and prioritize. • Set clear expectations (what will happen when this button is clicked?)
- 18. Carve a Clear Path • A visitor should never ask themselves, “Where do I go next?” • Prioritize navigation. Don’t include all links to all pages. Separate and prioritize. • Set clear expectations (what will happen when this button is clicked?)
- 19. Carve a Clear Path • A visitor should never ask themselves, “Where do I go next?” • Prioritize navigation. Don’t include all links to all pages. Separate and prioritize. • Set clear expectations (what will happen when this button is clicked?)
- 20. Guide the visitor’s eye • Create a visual hierarchy - The order in which you want your customer to digest each part of your message. - Example: Explaining a new concept to a friend. • Visual weight - Size - Color (contrast) - Space (whitespace)
- 21. Guide the visitor’s eye • Create a visual hierarchy - The order in which you want your customer to digest each part of your message. - Example: Explaining a new concept to a friend. • Visual weight - Size - Color (contrast) - Space (whitespace)
- 22. Guide the visitor’s eye • Create a visual hierarchy - The order in which you want your customer to digest each part of your message. - Example: Explaining a new concept to a friend. • Visual weight - Size - Color (contrast) - Space (whitespace)
- 23. Guide the visitor’s eye • The Squint Test - Good way to test your visual hierarchy - The key concepts should be legible
- 24. Guide the visitor’s eye • The Squint Test - Good way to test your visual hierarchy - The key concepts should be legible
- 25. Call to Action • Be explicit. - Tell them exactly what action you want them to take. • Only one CTA per page - All the content should lead into that CTA • Set a clear expectation Instead of “Submit”, try “Subscribe Today” • Differentiate - Try using a unique color for CTA buttons • Reduce Friction - Free trial, no spam, etc.
- 26. Call to Action • Be explicit. - Tell them exactly what action you want them to take. • Only one CTA per page - All the content should lead into that CTA • Set a clear expectation Instead of “Submit”, try “Subscribe Today” • Differentiate - Try using a unique color for CTA buttons • Reduce Friction - Free trial, no spam, etc.
- 27. Call to Action • Be explicit. - Tell them exactly what action you want them to take. • Only one CTA per page - All the content should lead into that CTA • Set a clear expectation Instead of “Submit”, try “Subscribe Today” • Differentiate - Try using a unique color for CTA buttons • Reduce Friction - Free trial, no spam, etc.
- 28. Call to Action • Be explicit. - Tell them exactly what action you want them to take. • Only one CTA per page - All the content should lead into that CTA • Set a clear expectation Instead of “Submit”, try “Subscribe Today” • Differentiate - Try using a unique color for CTA buttons • Reduce Friction - Free trial, no spam, etc.
- 29. Design For Conversions Book available in early November casjam.com/book Brian Casel email: brian@casjam.com twitter: @CasJam web: casjam.com
Editor's Notes
- #2: {}