Milestone Webinar, Storytelling Websites That Convert

STORY TELLING WEBSITES THAT CONVERT

Milestone Confidential

Panelists

Jake Brennan Marketing Associate, Moderator

Zulema Romero Sr. Director of Client Services

Kyra McIntire Sr. Designer

Aastha TandonSr. Account Manager

Aaron Horowitz Digital Marketing Strategist


Agenda

1 Customer Journey & Your Story

2 Designing for your Audience

3 Programming Must Haves

4 Conversion Optimization & Measuring Success

THE CUSTOMER JOURNEY & YOUR

STORY


The Customer Journey

1About You &

Understand Your Audience

2

Personas & Behaviors

3

Put This Into Practice

4


WEBSITE

PAIDSEARCH

DISPLAY

TRAVELINSPIRATION

RESEARCH BOOKING ON PROPERTY POST-STAY

SOCIAL

EMAIL ORGANICSEARCH

REVIEWS REVIEWS

EMAIL EMAILWEBSITE

SOCIAL SOCIAL

The Customer Journey


Tell Your Story

About You

Your Audience

Challenges

Unique Selling Points

Your Business


Planning

Who Are Your Customers?

Young Free Spirit

Self Seeker

Bride

Experience Seeker

Couponing Family

Dream Tripper

Go for it Family

Frugal Boomer

Visiting Family Retiree

Bucket Lister

Search Engines

Wedding Directories

Wedding Blogs

Social Channels

Personas Channels

• 25-35 years old• Multiple jobs over

several years• 4+ trips a year• HHI @ $75K+• Very active on social

media• Likely to travel with

other friends

Actions

Recommendations, Engagement

RFP

• Dreaming moments• Planning moments• Booking moments• Experiencing moments

Compare and Qualify

Validate, Trust, Relevancy

Historic/ Art Deco Feel

Dining Outlets

Group/EventsModul

esUSP’s

Engagement

DESIGNING FOR YOUR AUDIENCE


The Top 5 Must-Haves Before you

Design

Site Architecture

Colors

Images

Content

Device / Audience


How We Define UsabilityUsability

Site Architecture

Page Layout

Categorization

Organization

Labeling

Prioritization

Navigation

Primary

Secondary

Third Level

Footer

Site Search

Bread Crumbs

Colors

Geography

Gender

Psychology

Legibility

Images

Original - Unique

Simple Focal Point

Real People Doing Real Things

Content

Legible

Scannable

Eyetracking

Heat Maps

Backend

Download time

Avoid flash

Avoid too many images

Avoid image text

Avoid too many scripts

Compatibility

Devices – I, Preview, Mobile, Handheld, Print

Browser

CMS

Social & Natural Search


Site Architecture & UsabilityUsability

Site Architecture

Page Layout

Categorization

Organization

Labeling

Prioritization

Navigation

Primary

Secondary

Third Level

Footer

Site Search

Bread Crumbs

Colors

Geography

Gender

Psychology

Legibility

Images

Original - Unique

Simple Focal Point


Legibility/ Eyetracking

Legible

Scannable

Eyetracking

Heat Maps

Backend

Download time

Avoid flash


Avoid image text


Compatibility


Browser

CMS


Company Logo


Color & UsabilityUsability

Site Architecture

Page Layout

Categorization

Organization

Labeling

Prioritization

Navigation

Primary

Secondary

Third Level

Footer

Site Search

Bread Crumbs

Colors

Geography

Gender

Psychology

Legibility

Images

Original - Unique

Simple Focal Point


Content

Legible

Scannable

Eyetracking

Heat Maps

Backend

Download time

Avoid flash


Avoid image text


Compatibility


Browser

CMS



The Psychology of ColorColors associated with trust: Colors associated with high quality:

Colors associated with cheap/inexpensive: Colors associated with fun:


Colors that Convert


Images & UsabilityUsability

Site Architecture

Page Layout

Categorization

Organization

Labeling

Prioritization

Navigation

Primary

Secondary

Third Level

Footer

Site Search

Bread Crumbs

Colors

Geography

Gender

Psychology

Legibility

Images

Original - Unique

Simple Focal Point


Content

Legible

Scannable

Eyetracking

Heat Maps

Backend

Download time

Avoid flash


Avoid image text


Compatibility


Browser

CMS



Images that Convert


Poor Use of Imagery

X X X

XX

X

X


Content & UsabilityUsability

Site Architecture

Page Layout

Categorization

Organization

Labeling

Prioritization

Navigation

Primary

Secondary

Third Level

Footer

Site Search

Bread Crumbs

Colors

Geography

Gender

Psychology

Legibility

Images

Original - Unique

Simple Focal Point


Content

Legible

Scannable

Eyetracking

Heat Maps

Backend

Download time

Avoid flash


Avoid image text


Compatibility


Browser

CMS



Content That Converts• Relate to your audience and solve a problem • Audience Challenge + USP = Conversion • Inspire user emotion and action

Make your home our extended stay suites in Joplin, Missouri.


Content that Converts


Adapting Design for Customer Intent

Don’t

make me

think!


• New Gestures• Jquery Swiping

(photo gallery)• Pixel Width of

average finger

DESKTOP SITE TABLET SITE MOBILE SITE

Responsive Websites: Design for the Device


Adapting for Mobile First

1. Sticky header

2. Search Function

3. Hamburger icon with “menu” visible

4. Phone CTA with visible Phone #

5. Element to show you can scroll

6. Book Now visible above the fold,

part of sticky navigation

7. Sticky Footer with soft CTAs

1 2 3

4 5

6


Consider Your Soft Conversions


Consider Your Hard Conversion

Milestone Digital Marketing Conference July 25-26, 2016 @ Hyatt Regency Chicago There’s still time to register!

PROGRAMMING MUST HAVES


Pre Site Launch ChecklistSpeed & Performance

Crawlability

Relevant Fresh Engaging Search

Optimized Content

Mobile Friendly

Speed & Performance

Minimize HTTP requests ( Reduce number of requests going to the server to improve page performance)

Minify JS & CSS (Source code on page should be kept minimum to reduce download time)

Optimized images (Reducing size of images reduces load time and increase page load speed)

Just one second delay in page-load can cause 7% loss in customer conversions!

GZIP components (Gzipping files reducing the size of the files sent from your server, reducing sizes of pages by up to 70%)


HTML CSS < > xml

Crawlablility

HTML validation performed on W3C to make sure page complies with HTML standards and helps cross-browser, cross-platform and future compatibility

CSS validation to ensure no errors found in style sheets and all browsers aim towards compliance with the existing standards

Link checker to ensure no broken links on pages and all links are properly working

Canonical tagsto avoid duplicate content issues and penalties

Sitemap XML for website & images submitted to Google Webmaster


Optimized meta tags are structured tags that go in page head section so the browser can understand it

Heading tags – H1, H2, H3 are present in body content

Photos, images and map optimized and indexed for image and map search

meta <h1>

Schemas for semantic web is micro data and rich snippets that helps search engine index most critical data fast and helps improve click-through rates

Relevant Fresh Engaging Search Optimized Content


Post Site Live ChecklistSpeed & Performance

Crawlability

Relevant Fresh Engaging Search Optimized Content

Mobile Friendly

Redirects In Place

Tracking Tools in Place

Conversion Elements Working

CONVERSION OPTIMIZATION &

MEASURING SUCCESS


CTA stands out

Clear, concise messaging

CTA above the fold


Trust symbols above fold


High-value content above fold


Relevant, effective hero image CTA included on hero image


Bullets to summarize important info


CRO Tools (Conversion Rate Optimization)Google Analytics• Tracks stats on user interactions with

your site• Data broken out by page/domain,

device type, region, etc.

Hotjar• Implement surveys, heatmaps, polls• Record and track users’ individual

sessions on site

Optimizely• Easy-to-use tool for implementing

tests• A/B testing, MV testing• Integrates very well with other tools

UserTesting• Testers record themselves using your

site• Live, narrated video w/feedback

Ptengine• Implement heatmaps and track use

by device type• Monitor web analytics

Google Tag Manager• Easily update code snippets on your

site.• Ensure multiple tools won’t impact

download speed


5 Metrics to Measure After Site Live

• How long are visitors staying on your site?

Time on site

• How deeply are visitors interacting with your site?

Pages per visit

• Are visitors spending more time on specific pages?

Time on page

• How frequently do visitors leave your site immediately after entering?

Bounce rate

• Are a significant number of users coming back to your site?

Repeat visitors


5 Key Takeaways

1. Connect your USPs to your client needs

2. Follow design best practices

3. Ensure your website is mobile friendly

4. Website is crawlable, fast, and relevant

5. Track all conversion points!


Thank You!Questions?

[email protected]

Milestoneinternet.com Milestonemktg

MilestoneInc

Milestone Digital Marketing Conference

July 25th-26thChicago, IL

mailto:[email protected]

Milestone Webinar, Storytelling Websites That Convert

Marketing

Transcript of Milestone Webinar, Storytelling Websites That Convert