Using design to connect with customers Brian Casel · casjam.com

Hi :)

Brian Casel

web: casjam.com

email: brian@casjam.com

twitter: @casjam

Restaurant Engine

A web design service for Restaurants.

RestaurantEngine.com

Design For Conversions

My book

Available in early November

casjam.com/book

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

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?

Value

Basecamp.com

Lean heavily on social proof to convey thevalue their product brings to customers.

Value

RestaurantEngine.com/pricing

When I heard push-back on price, I added thisgraphic to spell out the value of the product.

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”

Talk to One Person

10000ft.com

They know me. Speaking in terms thatresonate with things that I care about(and struggle with).

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

Grab & Keep Attention

Kissmetrics.com

The first headline grabs your attention,resonates with a pain (Google Analyticsdoesn’t tell you everything).

The second headline goes deeper and provokes curiosity.

Copywriting Tips

Benefits, not featuresFocus on the benefit customer receives, not the technical feature.

Reduce frictionOvercome customer’s natural resistance in online transactions.

No risk, easy onboarding, secure

AIDAAttention, Interest, Desire, Action

Copywriting Tips

Benefits, not features.

Balsamiq.com

Focuses on the benefits/possibilities that a designer receives when using their app.

Copywriting Tips

Reduce Friction

Basecamp.com

Emphasize “60-day unlimited free trial”No obligation, no credit card required.

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?)

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?)

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?)

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?)

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)

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)

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)

Guide the visitor’s eye

• The Squint Test- Good way to test your visual hierarchy- The key concepts should be legible

Guide the visitor’s eye

• The Squint Test- Good way to test your visual hierarchy- The key concepts should be legible

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 expectationInstead of “Submit”, try “Subscribe Today”

• Differentiate- Try using a unique color for CTA buttons

• Reduce Friction- Free trial, no spam, etc.

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 expectationInstead of “Submit”, try “Subscribe Today”

• Differentiate- Try using a unique color for CTA buttons

• Reduce Friction- Free trial, no spam, etc.

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 expectationInstead of “Submit”, try “Subscribe Today”

• Differentiate- Try using a unique color for CTA buttons

• Reduce Friction- Free trial, no spam, etc.

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 expectationInstead of “Submit”, try “Subscribe Today”

• Differentiate- Try using a unique color for CTA buttons

• Reduce Friction- Free trial, no spam, etc.

Design For Conversions

Book available in early November

casjam.com/book

Brian Casel

email: brian@casjam.comtwitter: @CasJamweb: casjam.com