for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building...
Transcript of for Building Better Websites Intro to User Journey Maps · Intro to User Journey Maps for Building...
![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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/1.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/2.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/3.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/4.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/5.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/6.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/7.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/8.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/9.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/10.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/11.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/12.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/13.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/14.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/15.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/16.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/17.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/18.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/19.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/20.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/21.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/22.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/23.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/24.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/25.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/26.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/27.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/28.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/29.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/30.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/31.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/32.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/33.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/34.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/35.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/36.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/37.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/38.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/39.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/40.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/41.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/42.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/43.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/44.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/45.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/46.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/47.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/48.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/49.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/50.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/51.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/52.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/53.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/54.jpg)
![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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/55.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052719/5f077a097e708231d41d2c63/html5/thumbnails/56.jpg)
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