Session 2 - 10000 Feet Up

1,411 views
1,356 views

Published on

Slides for my UX1 class at Seattle School of Visual Concepts.This week is all about looking at the problem space from 1000 feet up. Starting with the big picture makes it much easier to create a user experience that hangs together and make sense. Concepts covered: personas, design narratives, scenarios, user journey maps, user flows, storyboarding, sketchboarding

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,411
On SlideShare
0
From Embeds
0
Number of Embeds
474
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Session 2 - 10000 Feet Up

  1. 1. 1000 Feet Up: Analysis + Storyboards Session 2 - April 10, 2014 School of Visual Concepts - UX1 http://svc-ux1.leannagingras.com
  2. 2. Week 1: Introduction, process and interviewing what is UX? what does “doing UX” look like? Week 2: Analysis and storyboards how do we make sense of the bigger picture? Week 3: User-centered design techniques how do we go from good concepts to good designs? Week 4: Prototyping and guerilla testing how do we communicate and test design? Week 5: Measuring UX how do we measure UX impact and make UX actionable? ** tentative schedule. adjust to taste
  3. 3. Agenda ● Discussion: Interviews ● Analyzing interview data ● Exercise: Affinity diagramming ● Personas and scenarios ● Design narratives ● Studio: From personas to design
  4. 4. Discussion How’d your interviews go?
  5. 5. LEARNING FROM INTERVIEW DATA
  6. 6. WHAT DO WE DO WITH THIS DATA? The data we get from interviews gives us this information: ● Who are our users and what are we designing for? ● What are their key tasks and scenarios? ● How do they go about their tasks? ● What gaps and opportunities are in our product?
  7. 7. CONSOLIDATION: THE SIMPLE WAY ● When you have a good idea of the problem space ● When the objectives have clear next steps ● When you don’t have a lot of interviewees ● When “eyeballing it” is good enough
  8. 8. GO BACK TO YOUR OBJECTIVES “learn what information PTs and clients are sharing now” - usually following a program built for a specific purpose (marathon, climbing ability, get swole), range from 5 weeks to 6 months (Jeff, Chelsea) - pair reviews recent progress / numbers (all clients) - show #s on Fitness Buddy (Jason) or pad and paper notebook (Claire) - don’t track w gadgets gadgets because “they’re only good for cardio” (Jeff, Claire) - uses gadgets to share with friends, partner (Jeff, Claire) - PT uses history during consultation - keeps track of client with written notes (Jeff) or iPad (Jason) or memory (Liam)
  9. 9. PICK OUT PATTERNS & INSIGHTS “learn what information PTs and clients are sharing now” - Nobody currently using a targeted collab solution - all verbal / email - Personal trainers use individual client files, notes - trends are anecdotal / memory - Pain point: meticulous and difficult to track granular workout details (lifts, reps, weight)
  10. 10. FIGURE OUT NEXT STEPS “learn what information PTs and clients are sharing now” - Nobody currently using a targeted collab solution - all verbal / email competitive: are there already solutions on the market that are not being used? why not? - Personal trainers use individual client files, notes - trends are anecdotal / memory design: review file photos & map out what info they contain - Pain point: meticulous and difficult to track on-the-ground workout details (lifts, reps, weight) as well as program trends over time (rate of progress) group brainstorm: concepts for easy workout tracking - explore integration with gadgets eg Fuelband
  11. 11. CONSOLIDATING BIGGER SETS
  12. 12. AFFINITY DIAGRAMMING is super collaborative, and a great way to find natural clusters and patterns. 1. Record each note on cards or post-it notes 2. Look for things that seem to be related 3. Sort notes or cards into groups until all cards have been used 4. Repeat as many times as needed 5. Add labels to groups if appropriate http://wiki.fluidproject.org/display/fluid/Affinity+Diagrams
  13. 13. Affinity diagram of items at a grocery store From Indi Young’s Mental Models book groups of related items individual notes
  14. 14. MENTAL MODELS are a type of affinity diagram that model the user’s behavior. what are their needs? how do they accomplish something? From Indi Young’s Mental Models book
  15. 15. From Indi Young’s Mental Models book GETTING READY IN THE MORNING task timeline
  16. 16. From Indi Young’s Mental Models book GETTING READY IN THE MORNING stages
  17. 17. From Indi Young’s Mental Models book GETTING READY IN THE MORNING features activities
  18. 18. This is a model of how novices write research papers. This takes data from different users and consolidates and aligns it to a timeline. Stages are yellow, activities are green and blue, features are red and purple.
  19. 19. Exercise: Consolidation Everyone gets a pile of post-its and a sharpie. Break down how you did your last grocery shopping trip. How did you plan it and execute it? What did you use? Where did you go? Anything out of the ordinary? Next: We’ll break up into 2 / 3 groups, put everything on the wall, and consolidate our data!
  20. 20. THE HIGH-LEVEL UX TOOLKIT
  21. 21. START 1000 FEET UP Figuring out the overall experience first: ● gives you a place to start ● keeps your concepts anchored in reality ● gives you an idea of what you need to create ● helps identify gaps before you start designing ● gives you an idea of how it hangs together Image from http://www.wright-brothers.org
  22. 22. Dropbox’s auto camera upload feature is an example of improving at a high level. The folks at Dropbox probably saw a pattern in what people were saving to their Dropbox, and automated it to take out a few steps.
  23. 23. Amazon likes to make the path to your wallet as short as possible. Adding a feature like this requires looking at the entire experience from 1000 feet up.
  24. 24. Add to cart View cart Shipping options Payment options Review order Order confirmation Select address and add to cart Use default payment Review order Order confirmation Typical e-commerce workflow Amazon’s workflow Select address and one-click it Order confirmation Amazon’s one-click workflow
  25. 25. http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
  26. 26. THE UX TOOLKIT These are tools for getting started on a design. What you use depends on what you need. ● Personas and scenarios ● Experience maps ● Design narratives Warning: don’t get hung up on the distinctions between these things. They’re fuzzy sometimes. Just think of them as approaches for framing problems from 1000ft up..
  27. 27. PERSONAS
  28. 28. PERSONAS! Personas are fictional characters created to represent a user type and how they might use a site, brand or product. They are artifacts to help you in the building process. http://asinthecity.com/2011/05/13/explaining-personas-used-in-ux-design-%E2%80%93-part-2/
  29. 29. Personas don’t have to be fancy to get the job done. Content ● Photo or sketch ● Quick quote ● Demographics ● Key tasks, goals & needs ● Pain points
  30. 30. https://uxmag.com/articles/using-proto-personas-for-executive-alignment
  31. 31. Placeholder Lee will share some personas she’s using right now!
  32. 32. HOW DO WE USE PERSONAS? Personas make great straw men throughout the design and decision-making process! ● Making sure the team is all aligned on who they’re building for ● Communicating user goals and needs ● Guiding design decisions (“would Chelsea want this feature?”) ● Surfacing different groups using your product (administrator vs. content creator)
  33. 33. Sometimes personas are very direct and obvious
  34. 34. Every design project has a persona, formal or not. Who do you suppose Columbia designs for?
  35. 35. Grab ‘n Go Gus Savvy Sally
  36. 36. This section of the Rick Steves website is designed to help the tour persona evaluate and make decisions about tours.
  37. 37. David, Opportunistic Fan “My wife's from Portland and I'm from Seattle. We never miss the Sounders - Timbers game!" Goals: ● Get great seats as soon as sales open ● Follow a specific rivalry ● Jump on cheap last-minute tickets Frustrations: ● Too slow to buy tickets on his phone ● Doesn't care about following the whole season ● Missed opportunities to get playoff tickets
  38. 38. David, Opportunistic Fan “My wife's from Portland and I'm from Seattle. We never miss the Sounders - Timbers game!" Goals: ● Get great seats as soon as sales open ● Follow a specific rivalry ● Jump on cheap last-minute tickets Frustrations: ● Too slow to buy tickets on his phone ● Doesn't care about following the whole season ● Missed opportunities to get playoff tickets Generalizes user groups but is specific enough to be useful!
  39. 39. David, Opportunistic Fan “My wife's from Portland and I'm from Seattle. We never miss the Sounders - Timbers game!" Goals: ● Get great seats as soon as sales open ● Follow a specific rivalry ● Jump on cheap last-minute tickets Frustrations: ● Too slow to buy tickets on his phone ● Doesn't care about following the whole season ● Missed opportunities to get playoff tickets Provides context and motivations
  40. 40. David, Opportunistic Fan “My wife's from Portland and I'm from Seattle. We never miss the Sounders - Timbers game!" Goals: ● Get great seats as soon as sales open ● Follow a specific rivalry ● Jump on cheap last-minute tickets Frustrations: ● Too slow to buy tickets on his phone ● Doesn't care about following the whole season ● Missed opportunities to get playoff tickets Clearly identifies user goals and key tasks
  41. 41. David, Opportunistic Fan “My wife's from Portland and I'm from Seattle. We never miss the Sounders - Timbers game!" Goals: ● Get great seats as soon as sales open ● Follow a specific rivalry ● Jump on cheap last-minute tickets Frustrations: ● Too slow to buy tickets on his phone ● Doesn't care about following the whole season ● Missed opportunities to get playoff tickets Calls out pain points and frustrations
  42. 42. DESIGN NARRATIVES
  43. 43. SCENARIOS Scenarios (or user stories) are a narrative description of a problem or a key task.
  44. 44. SCENARIOS BAD: Diana wants to book a tour BAD: As a tour member, Diana needs a “buy” button so she can pay us BAD: Diana goes to the tours landing page and then clicks the primary CTA which takes her to the tour listing page which provides her with a radio button select of tour dates blah blah blah My rule of thumb: If you were explaining it to someone on the phone, they’d be able to follow along and it would be plausible as a real story.
  45. 45. BUILDING GOOD SCENARIOS Diana is an armchair traveler who lives vicariously through her globetrotting 23- year-old son. He put some pictures from Rome on Facebook, which sparked her curiosity about the Parthenon. This turned into hours learning about ancient Rome, watching TV episodes and reading articles. She’s always been nervous about travel, but now she’s inspired and wants to book a Rick Steves tour! Describe who the persona is
  46. 46. BUILDING GOOD SCENARIOS Diana is an armchair traveler who lives vicariously through her globetrotting 23-year-old son. He put some pictures from Rome on Facebook, which sparked her curiosity about the Parthenon. This turned into hours learning about ancient Rome, watching TV episodes and reading articles. She’s always been nervous about travel, but now she’s inspired and wants to book a Rick Steves tour! Describe their context of use
  47. 47. BUILDING GOOD SCENARIOS Diana is an armchair traveler who lives vicariously through her globetrotting 23-year-old son. He put some pictures from Rome on Facebook, which sparked her curiosity about the Parthenon. This turned into hours learning about ancient Rome, watching TV episodes and reading articles. She’s always been nervous about travel, but now she’s inspired and wants to book a Rick Steves tour! Describe what happens (not how)
  48. 48. BUILDING GOOD SCENARIOS Diana is an armchair traveler who lives vicariously through her globetrotting 23-year-old son. He put some pictures from Rome on Facebook, which sparked her curiosity about the Parthenon. This turned into hours learning about ancient Rome, watching TV episodes and reading articles. She’s always been nervous about travel, but now she’s inspired and wants to book a Rick Steves tour! Describe reaching a user goal (or solving a problem)
  49. 49. EXPERIENCE MAPS are a representation of the user’s complete experience, including context, needs, interactions and touchpoints.
  50. 50. Here, I mapped known user experience issues against the customer experience journey. This let us take a step back, quit playing usability whackamole, and hammer out a strategy for holistically improving the experience. (Issues were compiled from 23 studies including usability tests, Foresee surveys, Compete, and heuristic evaluations.)
  51. 51. USER FLOWS Step-by-step representation of completing a task or reaching a goal. They’re good for: ● showing where elements are are connected ● mapping out conditionality and decision points ● identifying screens to be considered in the design
  52. 52. User flow showing how librarians make purchasing decisions. This also shows contingencies and decision treeing.
  53. 53. Placeholder Lee will share some complicated workflows from a past project!
  54. 54. SCENARIO Diana is an armchair traveler who lives vicariously through her globetrotting 23-year-old son. He put some pictures from Rome on Facebook, which sparked her curiosity about the Parthenon. This turned into hours learning about ancient Rome, watching TV episodes and reading articles. She’s always been nervous about travel, but now she’s inspired and looking at Rick Steves tours! BREAK IT DOWN Let’s whiteboard this!
  55. 55. STORYBOARDS Storyboards take you from concept to design. Storyboards can have a range of fidelities, from box and arrow scribble to full out comics. Storyboard for fitting a new feature into an existing system and making it easy for users to discover and access. (ITHAKA/JSTOR)
  56. 56. Storyboard for a feature implemented in a single 2-week sprint. (JSTOR) Affected pages Persona Step by step scenario
  57. 57. Note this storyboard is a living document!
  58. 58. Less beautiful, more granular storyboard created to answer the question “what exactly does the hover functionality do?”
  59. 59. http://www.flickr.com/photos/rosenfeldmedia/3978305312/in/set-72157622384497663 Adaptive Path’s sketchboarding video: https://www.youtube.com/watch? v=iVFTBj_BYy0#t=21
  60. 60. Diana is an armchair traveler who loves to live vicariously through her globetrotting 23- year-old son! Maybe she’ll travel some day, but it seems scary! start by breaking down the scenario, step by step
  61. 61. Diana is an armchair traveler who loves to live vicariously through her globetrotting 23- year-old son! Maybe she’ll travel some day, but it seems scary! lay out what each step might look like for Diana ???
  62. 62. Diana is an armchair traveler who loves to live vicariously through her globetrotting 23- year-old son! Maybe she’ll travel some day, but it seems scary! fill in gaps and move around as needed
  63. 63. STUDIO: FROM PERSONA TO DESIGN
  64. 64. Studio: Split up into three groups. Each group gets a persona! Create a storyboard for your persona. Present. Discuss.
  65. 65. David, Opportunistic Fan “My wife's from Portland and I'm from Seattle. We never miss the Sounders - Timbers game!" Goals: ● Get great seats as soon as sales open ● Follow a specific rivalry ● Jump on cheap last-minute tickets Frustrations: ● Too slow to buy tickets on his phone ● Doesn't care about following the whole season ● Missed opportunities to get playoff tickets
  66. 66. Jacqueline, Rabid Senior "I don't like going on the group bus to Yankee stadium because the younger people don't think that seniors like me know the game. Whenever I talk about Mariano Rivera's stats they look at me funny." Goals: Go to Yankee Stadium to see Yankees games, via bus, without the hassle of parking and driving Frustrations: ● She is 70 and high energy but the chartered buses are full of younger fans who don't respect her substantial knowledge of the game. ● She lives 90 minutes away. She doesn't want to drive because of the cost of parking and stress of NYC driving. ● Public transportation to the stadium requires multiple stops (Drive, commuter train, switch to NY Subway, arrive at Yankee stadium)
  67. 67. Aaron, Ticket Day Trader “We set up alerts in our calendar that connect to StubHub. Sometimes people think I'm looking at my calendar during meetings, but I'm tracking price and seat changes real-time.” Goals: ● Get best ticket / seat value for today's Giants game ● Get advance tickets for key games when either a famous opponent or his favorite pitcher is playing ● Easy way to get tickets and settle payments for him & his crew (2 other guys) Frustrations: ● Non-negotiable: he wants good value, but if he goes to game, he must get there for the first pitch. ● Hates the back & forth of confirmation and payment when he gets tickets for the group
  68. 68. Jacqueline, Rabid Senior Aaron, Ticket Day Trader David, Opportunistic Fan
  69. 69. Homework: Personas & Workflow Consolidate your interviews. What did you learn? Create a proto-persona and scenario. Storyboard it out!

×