tel aviv hug luke summerfield

WHO HERE HAS BEEN INVOLVED IN A WEBSITE REDESIGN?

WHAT CHALLENGES DID YOU RUN INTO WHILE REDESIGNING?

UNSPLASH USER TRISTAN COLANGELO

On Time? On Budget?

WHAT EMOTIONS DID YOU HAVE WHILE REDESIGNING?

Based on a 2016 survey conducted by HubSpot

Based on a 2016 survey conducted by HubSpot

Based on a 2016 survey conducted by HubSpot

FLICKR USER IMAGES MONEY

Observation One: Traditional web design is very risky.

TRADITIONALWEB DESIGN

UpfrontCosts

Resources& Time

(out of scope, over budget, late)

RISKS

#GrowthDrivenDesign @SavvyLuke

The website is live!

HOW IMPORTANT IS YOUR WEBSITE TO YOUR BUSINESS?

HOW IMPORTANT IS YOUR WEBSITE TO YOUR BUSINESS?

Based on a 2016 survey conducted by HubSpot

0 5 10Not Important Extremely Important

54%

13%

8%10%6%4%

2%2%

HOW OFTEN DO YOU MAKE IMPACTFUL IMPROVEMENTS TO YOUR WEBSITE?

2%

23%

33%

19%

23%

HOW OFTEN DO YOU MAKE IMPACTFUL IMPROVEMENTS TO YOUR WEBSITE?

Based on a 2016 survey conducted by HubSpot

- Sir Edmund HillaryOnly when we redesign

Yearly

Quarterly

Monthly

Weekly

Traditional Web DesignIm

pact

Time

2 Years

3 MonthRedesign

SITE

2 Years

3 MonthRedesign

SITE

SITE

Observation Two: Traditional web design produces poor results.

RISKS

TRADITIONALWEB DESIGN

UpfrontCosts

Resources& Time

Based onAssumptions

Static for2 Years

(out of scope, over budget, late)

POOR RESULTS

#GrowthDrivenDesign @SavvyLuke

THE TRADITIONAL WEB DESIGN PROCESS IS BROKEN.

FLICKR USER LUIS SARABIA

Luke… What are we suppose to do?

A SMARTER APPROACH TO WEB DESIGN THAT:

• REDUCE HEADACHES.

• MAXIMIZE RESULTS.

• INFORM OTHER DEPARTMENTS.

STRATEGY

STRATEGY

LAUNCH PAD WEBSITE

PHASE 1: FOUNDATION 45 - 60 DAYS

LAUNCH PADWEBSITE

STRATEGY

FLICKER USER NASAMARSHALL

Our launch pad website is live.

STRATEGY

LAUNCH PAD WEBSITE

CONTINUOUS IMPROVEMENT

FLICKER USER WADE MORGAN

Too many options with little direction.

WEBSITE HIERARCHY A roadmap to follow for building a peak performing site.

• Provide focus

• Clear expectations

• Measure progress to goals

GOAL: What we are trying to accomplish at that given step.

FOCUS METRIC: A single metric we are laser focused on.

LEADING INDICATORS: The “levers” you can pull that are highly correlated with increasing the focus metric.

AT EACH STEP:

GOAL FOCUS METRIC

Visitors to bring visitors R.R..>1.0 + TimePromoters

Items so valuable, user would pay Qualified lead genAssets

Users keep coming back User return in X DaysStickiness

Intuitive & easy to use Task completionUsability

Audience Fresh flow of new visitors M/M Unique Visitors

Value Solves some point of pain How useful? 1-10

Personalization Customized for specific users (revisit others)

Conversion Rate Optimization No friction in funnels 1st - last step %

UNSPLASH USER PIERRE ROUGIER

The Continuous Improvement Cycle

Promoters

Assets

Personalization

Stickiness

Conversion Rate Optimization

Usability

Value

Audience

CONTINUOUS IMPROVEMENTPLAN

PLAN 1. Audit your performance.

2. Determine which hierarchy step you’re currently at.

3. What parts of the site have the most leverage at the current time.

Usability

STAGE GOAL FOCUS METRIC

Usability Intuitive & Easy to Use Task CompletionHome -> Product

EXAMPLE: AREA OF FOCUS

Question

PLAN

Home PageHome Product

Usability

FOCUS AND DISCOVERY

Research

Question

PLAN

Usability

FOCUS AND DISCOVERY

Home PageHome Product

EXAMPLE: RESEARCH

Static .jpg graphic on HubSpot’s home page showing some of HubSpot tools

EXAMPLE: RESEARCH

Users were trying to click on each tool, but this was on a static .jpg

ACTION ITEM 2

ACTION ITEM 3

ACTION ITEM 4

ACTION ITEM 5

…

ACTION ITEM 1

Brainstorm

Research

Question

PLAN

FOCUS METRIC (task completion)

USABILITY

ACTION ITEM 2

ACTION ITEM 3

ACTION ITEM 4

ACTION ITEM 5

…

ACTION ITEM 1

HIGH IMPACT

MEDIUM IMPACT

LOW IMPACT

EXAMPLE: DASHBOARD

Scope capacity for that sprint

Promoters

Assets

Personalization

Stickiness

Conversion Rate Optimization

Usability

Value

Audience

CONTINUOUS IMPROVEMENTPLAN BUILD

ACTION ITEMS

HIGH IMPACT

For [Marketing Mary] visiting the [Home Page], we believe changing

[funnel tool graphic] into a [interactive & linked graphic] will

[increase home -> product page visitor flow by 5%]

HIGH IMPACT - ACTION ITEM 1

We believe this to be true because [research or previous experiment]

Hypothesis Statement

Expected Impact + Effort Required + Experiment Design

EXAMPLE: ACTION ITEM CARD

BUILD Everyone on the team will pitch in

and work together to:

• Implement the high impact items

• Setup experiments to test impact

Promoters

Assets

Personalization

Stickiness

Conversion Rate Optimization

Usability

Value

Audience

CONTINUOUS IMPROVEMENTPLAN BUILD

ACTION ITEMS

HIGH IMPACT

EXAMPLE: BUILD

LEARN After running our experiments, your team will take a step back:

• Review results

• What did we learn?

• Publish findings

Promoters

Assets

Personalization

Stickiness

Conversion Rate Optimization

Usability

Value

Audience

CONTINUOUS IMPROVEMENTPLAN BUILD LEARN

22% CTR Increase HubSpot.com to Product Pages 4,600 -> 5,600

40,000 Session Sample Size

EXAMPLE: LEARN

22% CTR increase from HubSpot.com to product pages

USER LEARNINGS: 1. Users like interactivity 2. Users are most interested in the CRM & analytics • Informs next cycle

EXAMPLE: LEARNING - ACTION ITEM CARD

Promoters

Assets

Personalization

Stickiness

Conversion Rate Optimization

Usability

Value

Audience

CONTINUOUS IMPROVEMENTPLAN BUILD LEARN TRANSFER

TRANSFER Collaborate between departments to:

• Share user learnings

• Create recommendations

• Ask questions

22% CTR Increase HubSpot.com to Product Pages 4,600 -> 5,600

40,000 Session Sample Size

EXAMPLE: TRANSFER

USER LEARNINGS: 1. Users like interactive

elements and graphics • Interactive infographic

2. Users are most interested in the CRM & analytics

• CRM related offer forthe home page?

• Newsletters and blogs

EXAMPLE: TRANSFER

Value & Features Social Validation Testimonial

REPEAT THE CYCLE Optimize each stage of the GDD website hierarchy.

• Repeat cycle • Continue to build action items • Hit “focus metric” threshold • Move to next step in the hierarchy

Promoters

Assets

Personalization

Stickiness

Conversion Rate Optimization

Usability

Value

Audience

CONTINUOUS IMPROVEMENTPLAN BUILD LEARN TRANSFER

Usability

Conversion Rate Optimization

STRATEGY

STRATEGY

LAUNCH PAD WEBSITE

STRATEGY

LAUNCH PAD WEBSITE

CONTINUOUS IMPROVEMENT

STRATEGY

LAUNCH PAD WEBSITE

CONTINUOUS IMPROVEMENT

Audience

Value

Usability

Conversion Rate Optimization

Stickiness

Personalization

Assets

Promoters

STRATEGY

LAUNCH PAD WEBSITE

CONTINUOUS IMPROVEMENTPLAN BUILD LEARN TRANSFER

Audience

Value

Usability

Conversion Rate Optimization

Stickiness

Personalization

Assets

Promoters

Traditional Web DesignIm

pact

Time

2 Years

3 MonthRedesign

SITE

2 Years

3 MonthRedesign

SITE

SITE

Traditional Web Design vs.

2 Years

3 MonthRedesign

SITE

SITE

2 Years

3 MonthRedesign

Impa

ct

Time

SITE

2 Years

3 MonthRedesign

SITE

SITE

2 Years

3 MonthRedesign

Traditional Web Design vs.Im

pact

Time

SITE

MARKETING & SALES

2 Years

3 MonthRedesign

SITE

SITE

2 Years

3 MonthRedesign

Traditional Web Design vs.Im

pact

Time

SITE

TRADITIONALWEB DESIGN

GROWTH- DRIVEN DESIGN

Data BasedDecisions

ContinuousImprovement

SpreadOver Time

Launch Quick& Improve

(agile, on time & on budget)

UpfrontCosts

Resources& Time

Based onAssumptions

(out of scope, over budget, late)

RISKS RESULTS

Static for2 Years

GROWTHDRIVENDESIGN.COMVISIT

(get the slides and presentation recording) - Luke@GrowthDrivenDesign.com