HOW TO DESIGN AN INBOUND WEBSITE
Transcript of HOW TO DESIGN AN INBOUND WEBSITE
![Page 1: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/1.jpg)
#INBOUND13
HOW TO DESIGN AN INBOUND WEBSITE
Joshua Porter
![Page 2: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/2.jpg)
“We provide communication strategies which create resolution to problematic aspects of effective communication.”
![Page 3: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/3.jpg)
“We help companies communicate clearly.”
![Page 4: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/4.jpg)
! 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
![Page 5: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/5.jpg)
In other words, we need a plan.
![Page 6: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/6.jpg)
! 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…
![Page 7: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/7.jpg)
The plan
Map customer journey
Design in flows, not pages
Strangers Visitors Blog post
Landing page
![Page 8: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/8.jpg)
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
![Page 9: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/9.jpg)
1 Map your customer journey
![Page 10: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/10.jpg)
![Page 11: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/11.jpg)
Strangers Visitors Leads Customers Advocates Visitors Leads Customers Promoters
HubSpot Customer Journey
![Page 12: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/12.jpg)
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
![Page 13: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/13.jpg)
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
![Page 14: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/14.jpg)
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
![Page 15: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/15.jpg)
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:
![Page 16: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/16.jpg)
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:
![Page 17: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/17.jpg)
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
![Page 18: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/18.jpg)
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:
![Page 19: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/19.jpg)
![Page 20: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/20.jpg)
![Page 21: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/21.jpg)
![Page 22: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/22.jpg)
2 Design in flows, not pages
![Page 23: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/23.jpg)
! 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
![Page 24: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/24.jpg)
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.
![Page 25: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/25.jpg)
Blogging flow
Blog post
More blog
posts
Subscribe to blog ?
Social Email
Search Link
![Page 26: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/26.jpg)
Ideal blog post design
Grab attention
Get out of their way!
Offer a relevant next step
![Page 27: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/27.jpg)
![Page 28: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/28.jpg)
![Page 29: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/29.jpg)
Grab attention (big headline, nice graphic)
Get out of their way! (nothing but text)
Offer a valuable next step (subscribe, add comment)
Alistapart.com
![Page 30: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/30.jpg)
Visual Weight
Secondary sidebar options aren’t as heavy visually
![Page 31: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/31.jpg)
![Page 32: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/32.jpg)
![Page 33: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/33.jpg)
![Page 34: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/34.jpg)
![Page 35: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/35.jpg)
! 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
![Page 36: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/36.jpg)
Landing page flow
Landing page
Thank You page ? Read
content
Blog Social Email
![Page 37: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/37.jpg)
Ideal landing page design
Grab attention
Strong call-to-action Offer details
![Page 38: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/38.jpg)
![Page 39: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/39.jpg)
![Page 40: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/40.jpg)
! 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
![Page 41: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/41.jpg)
![Page 42: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/42.jpg)
![Page 43: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/43.jpg)
![Page 44: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/44.jpg)
Next step
Other step
Final step
What we want people to do.
Current step
![Page 45: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/45.jpg)
Next step
Other step
Final step
What people need to do.
Current step
![Page 46: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/46.jpg)
Design for the next step, not the final step.
![Page 47: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/47.jpg)
! 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…
![Page 48: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/48.jpg)
Want help with design?
UX Station (in Club Inbound)
We’ll help review and provide feedback for your website, blog, and landing pages.
![Page 49: HOW TO DESIGN AN INBOUND WEBSITE](https://reader031.fdocuments.in/reader031/viewer/2022020704/61fb4ba22e268c58cd5c7b0b/html5/thumbnails/49.jpg)
Thank you.