Download - 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.