56
Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 #DrupalCampCU @anthonydpaul

for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

  • Upload
    others

  • View
    8

  • Download
    0

Embed Size (px)

Citation preview

Page 1: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Intro to User Journey Maps for Building Better Websites

Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul

Page 2: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Which design is better? Which cost more?

Page 3: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Both are inappropriate in context (props to Jeff Patton for the cake metaphor)

Page 4: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Websites work the same.Who is it for?

Where are they using it?

How does it fit into their life?

Page 5: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

All of this affects the type of cake website we make.

Page 6: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

website

Page 7: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

journey website

Page 8: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

journey website

Page 9: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

journey website

People are complex

Thoughts and decisions

Tasks to perform

Discovery and advancement

Motivations and anxieties

Page 10: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Anthony D PaulDirector of User Experience

@anthonydpaul

Page 11: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Don’t assume you need this

Page 12: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Documentation is disposable.Document to ask and answer questions—to gain shared understanding.

Page 13: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

1. Who Audience groups

2. Why Motivations, anxieties, influencers

3. What / How Decisions, tasks

4. When / Where Devices, scenarios, entrances, exits

Use any fidelity to ask questions and provide answers

Page 14: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Sources for Audience Information

Page 15: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Interviews with clients and subject matter experts (SMEs)Pros: Usually easy to access

Cons: Can introduce stereotypes

Can pit internal politics (ranking opinions)

Page 16: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Interviews with customers (users)Pros: Best source of qualitative stories

Cons: Needs a diverse sampling

Can be a headache to get access and organize

Page 17: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Usability tests with customers (users)Pros: Best source of qualitative stories

Shortcut to recommendations

Cons: Needs a diverse sampling

Can be a headache to get access and organize

Page 18: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Usability test today’s site

Page 19: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Survey dataPros: Great quantitative content

Cons: Needs a diverse sampling

Needs to be analyzed

Page 20: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Web analyticsPros: Easy to access (if it exists)

Cons: Ambiguous, lacks context

Need to be analyzed

Page 21: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Google Analytics > Audience > User Explorer

Page 22: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Google Analytics > User Explorer

Page 23: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Market reportsPros: Often does the work for you

Cons: Level of specificity is hit and miss

May or may not map to your segments

Google > filetype:pdf

Page 24: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Google > filetype:pdf

Page 25: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

For best results, a blend of info sources

Page 26: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Example Documents

Page 27: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

1. Who Audience groups

2. Why Motivations, anxieties, influencers

3. What / How Decisions, tasks

4. When / Where Devices, scenarios, entrances, exits

Define and prioritize

Page 28: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Audience types

Page 29: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

1. Who Audience groups

2. Why Motivations, anxieties, influencers

3. What / How Decisions, tasks

4. When / Where Devices, scenarios, entrances, exits

Page 30: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Audience types (with motivations, anxieties, influencers)

Page 31: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Individual persona

Page 32: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

1. Who Audience groups

2. Why Motivations, anxieties, influencers

3. What / How Decisions, tasks

4. When / Where Devices, scenarios, entrances, exits

Determine order, optional, and required

Page 33: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

User scenario

Page 34: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Decision phases

Page 35: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Decision flow with UI conversations

Page 36: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Google Analytics > User Explorer

Page 37: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Session flow map

Page 38: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

1. Who Audience groups

2. Why Motivations, anxieties, influencers

3. What / How Decisions, tasks

4. When / Where Devices, scenarios, entrances, exits

Page 39: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

High-level ecosystem flow (email, 3rd-party systems)

Page 40: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Detailed ecosystem flow (login validation)

Page 41: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Multi-user journey map

Page 42: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Example Project

Page 43: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Summer Camp Website

Page 44: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Define and prioritize groups• Parents

• School groups and educators

• New camp counselors

• Sponsors/Donors/Partners

• Extra credit = Content administrators

Page 45: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Take one group and document “why”New Camp Parents

• Want child to learn during summer (motivation)

• Heard about camp from a friend (entrance)

• Find site via Google (entrance)

• May have a budget (anxiety)

Page 46: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Document decisionsNew Camp Parents

• How is this camp different?

• Are we eligible? Can we afford it?

• Is there availability? How do I sign up?

• Are there mobile driving directions?

Page 47: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Convert decisions into task flowsIs there availability? How do I sign up?

• Access seasonal calendar

• Filter by topic or grade level (e.g.)

• [See available]

• Use sign-up button

Page 48: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Single user and scenario journey map

Page 49: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Homework AssignmentSee Eric Meyer’s WC Northeast Ohio 2016 Keynote

Page 50: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Our instinct is to imagine someone like ourselves.So many of our users are nothing like us in any way.

Page 51: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Journeys help us understand real-world ”stress cases.”Journeys define who we care about.

Page 52: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Think about users who• Have accessibility issues

• Are sad

• Are in a life crisis

• Are hurried

Page 53: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

journey website

Page 54: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which
Page 55: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

Up next

1. Lean requirements gathering

2. User journey mapping

3. Information architecture

4. Usability tests

Page 56: for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building Better Websites Cornell Drupal Camp 2016 • #DrupalCampCU • @anthonydpaul. Which

SlideSharehttp://www.slideshare.net/anthonydpaul

WordPress.tv http://wordpress.tv/speakers/anthony-d-paul/

(my talks and blog) http://adp.rocks or http:// .ws or http:// .ws

Thank you

@anthonydpaul