HOW TO DESIGN AN INBOUND WEBSITE

#INBOUND13

HOW TO DESIGN AN INBOUND WEBSITE

Joshua Porter

“We provide communication strategies which create resolution to problematic aspects of effective communication.” 

“We help companies communicate clearly.” 

! What we communicate isn’t what we think we communicate.

! Too many cooks in the kitchen.

! Not enough testing or actual customer research going on.

! Haphazard decision-making process.

Common problems

In other words, we need a plan.

! Doesn’t ask “What do we want people to do?”

! Asks “What are people already trying to do?”

! Doesn’t produce content in terms of marketing.

! Produces content using the actual words of people.

! Doesn’t assume people are ready to buy.

! Nurtures people along at their own pace.

A plan that…

The plan

Map customer journey

Design in flows, not pages

Strangers Visitors Blog post

Landing page

Check out these talks today

Maggie Georgieva (HubSpot PM)

Julie Spatola (HubSpot IMC)

THE MARKETER’S 3 STEP CONTENT ROADMAP: ALIGNING CONTENT WITH YOUR BUYER’S JOURNEY

1:15PM - 2:00PM

STREAMLINING THE BUYER'S JOURNEY: MORE THAN MARKETING AUTOMATION

4:15PM - 5:00PM

1 Map your customer journey

Strangers Visitors Leads Customers Advocates Visitors Leads Customers Promoters

HubSpot Customer Journey

Strangers Visitors Leads Customers Advocates Visitors Leads Customers Promoters

How do I rank high in Google? How can I measure social? What should I blog about?

Lifecycle stage: Strangers

Actual questions:

Tools: Social, Blogging

Strangers Visitors Leads Customers Advocates Visitors Leads Customers Promoters

What is my SEO strategy? Should I invest in Twitter or FB? How often should I blog? What does HubSpot do?

Lifecycle stage: Visitors

Actual questions:

Tools: Landing pages

Strangers Visitors Leads Customers Advocates Visitors Leads Customers Promoters

What exactly is HubSpot? How much does it cost? What should an SEO tool have? Does HubSpot’s social media tool track LinkedIn? How does HubSpot compare with Google Analytics?

Lifecycle stage: Leads

Actual questions:

Tools: Email

Strangers Visitors Leads Customers Advocates Visitors Leads Customers Promoters

How do I use the Keywords tool? How do I schedule a blog post in the blogging tool? How do I set up lead nurturing? Who is my account manager?

Lifecycle stage: Customers

Actual questions:

Strangers Visitors Leads Customers Advocates Visitors Leads Customers Promoters

Who else is using HubSpot successfully? Does HubSpot have an affiliate program? Should I go to the Inbound Conference? When should I upgrade to the next product tier?

Lifecycle stage: Promoters

Actual questions:

Stage Technique

Strangers Get out of the office! Local meetups, industry events, etc.

Visitors Use chat technology, ask people over social, etc.

Leads Call them up! Get names from sales.

Customers Call them! Invite them to usability testing. Talk to them right after purchase.

Promoters Invite them to your office, events, etc.

How to gather this information

Stages Lead Customer …

Questions What questions do they have?

Doing What are they doing at this point?

Emotions How are they feeling?

Thinking What are they thinking about?

Website tasks What do they have to do on the website?

For each stage, fill out the following:

2 Design in flows, not pages

! Experience is not instantaneous, it happens over time.

! We spend most of our time doing the same small set of tasks over and over.

! These sets of tasks, or flows, are what we should design for.

Observations

Inbound flows

Blogging flow:

Landing Page flow:

Viewing landing page, downloading an offer, consuming the offer, taking a next step.

Reading a blog post, discovering more blog posts, subscribe.

Buyer flow:

Social flow:

Viewing a social message, visiting a website, taking a next step.

Researching a product, checking pricing, case studies, getting in touch.

Blogging flow

Blog post

More blog

posts

Subscribe to blog ?

Social Email

Search Link

Ideal blog post design

Grab attention

Get out of their way!

Offer a relevant next step

Grab attention (big headline, nice graphic)

Get out of their way! (nothing but text)

Offer a valuable next step (subscribe, add comment)

Alistapart.com

Visual Weight

Secondary sidebar options aren’t as heavy visually

! Purpose of blog post is to read the blog post!

! Let visitors finish reading the blog post before you ask them to do something else!

! Related posts and all-time best posts work well.

! Clear and relevant call-to-action at the end of the blog post.

Blog flow design

Landing page flow

Landing page

Thank You page ? Read

content

Blog Social Email

Ideal landing page design

Grab attention

Strong call-to-action Offer details

! Purpose of landing page is to communicate offer value.

! Don’t rush…tell people everything they need to know.

! Remove anything that doesn’t communicate value.

! Make the call-to-action obvious and clear.

! Bonus points: Get personal.

Landing page flow design

Next step

Other step

Final step

What we want people to do.

Current step

Next step

Other step

Final step

What people need to do.

Current step

Design for the next step, not the final step.

! Focuses on the overall lifecycle of your customer.

! Recasts your customer’s lifecycle around *their* perspective, not yours.

! Is essentially about answering the right questions in the right order.

! Focused on the next step, not the final step.

Good inbound web design…

Want help with design?

UX Station (in Club Inbound)

We’ll help review and provide feedback for your website, blog, and landing pages.

Thank you.