Collaborative Design for Everyone!

Slides to accompany the MinneWebCon 2014 workshop, Collaborative Design for Everyone!

Led by Heather Bryan and Beth McKeever on April 15, 2014

Transcript

2. bio heather bryan beth mckeever @linoleumtile @twin1
3. Who are you? • Name and what you do • What’s in your way right now?
4. Goals of this workshop • Collaborate! • Tips and techniques for collaborating • Get you ready to go home and start (or get more ideas if you’re already doing it)!
5. Agenda • Our story - benefits of collaboration! • Hands-on exercise • Get started - planning your session • Common concerns • Discussion
6. our story claim patient info claim claim patient info Doctor visit grouper What happened at my doctor visit? Few SMEs! High discovery! Tight timeline
7. our story grouper Launch 3 weeks ! ! Villain claim! type
8. people huddled around a computer for shared responsibility ! implementation story and UX QA UX
9. a year before we were here
10. Lean UX: definition “Lean UX is the practice of bringing the true nature of our work to light faster, with less emphasis on deliverables and greater focus on the actual experience being designed.” Jeff Gothelf for Smashing Magazine, March 2011
11. Lean UX: collaboration! “None of us is as smart as all of us.” ! -Kenneth H. Blanchard
12. why Benefits
13. common probs “That’s out of scope” “What’s going on?” “We don’t get that data back” “We already built it…but update the wireframes anyway” “We can’t do that” “uh…that’s a lot of work…” Exec. #1 “I want it like A.” Exec. #2 “I want it like B.” “I have a better idea…” “We already built it… but update wireframes anyway” “Did you know we can do X, Y and Z?” “What do you do?”
14. What do roles do? UX - “I bring together business goals and user needs . . “ Back end dev - “I write sustainable code to . . . “ Front end dev - “I create flexible front ends with HTML, CSS and Javascript “ Project manager - “I keep us on time and in scope . . . “ BA - “I find and analyze business needs and rules . .“ QA - “I validate that everything is working . .“ Business - “I analyze, plan and make money . . “ Support - “I help people use our products and services . “
15. What do roles do? We work together to create a high-quality product. BA UX Business FED Dev PM QA Support
16. (c) creative commons Tom Magliery
17. (c) creative commons luxomedia
18. No wirefram e change
19. creative commons woodleywonderworks
20. (c) creative commons Britt Selvitelle
21. (c) creative commons Kit
22. Shifts That’s your job That’s a dumb idea When will the wireframes be done? You didn’t specify that. This is our product Is this a better option? What do we need to move ahead? Did you also need ‘x’?
23. Agenda • Our story - benefits of collaboration • Hands-on exercise! • Get started - planning your session • Common concerns • Discussion
24. Let’s try it out! (c) creative commons girlsmeg.tumblr.com
25. Agenda • Intro - 7 minutes • Solo sketch - 7 minutes • Share / critique ideas - 5 minutes • Refine - 7 minutes • Share / critique ideas - 5 minutes • Refine with a partner - 7 minutes • Large group share / discuss - 15 minutes
26. Intro - 7 minutes (c) creative commons Wendy
28. Our design problem Users say they’d be willing to pay a couple of extra dollars to have food delivered to them. How might we create a service to let customers order food and have it delivered to their seats?
29. Brandon 37 years old Married 2 kids, ages 10 and 12 Bank manager Goes to 5 or 6 games/year Follows NBA at home • To pay a tip via credit card - he needs the cash for parking. • Accurate order delivered - and what to do if it’s wrong • To watch the game and enjoy it with his kids • To know the estimated arrival time - if it will take 20 minutes, it’s not worth it. • Special requests - his daughter hates having anything on her hamburger Needs / wants • Place the order for the family • Pay the whole bill for his family • Track arrival time for the kids • Tip the person who brings him the food ! Actions
30. Emily 21 years old Single College student At the game with 4 friends on college ID night • To pay separately from her friends. • To get her food at roughly the same time as her friends. • To know costs up front - her ticket was cheap but she’s still a college student. • To know if there are any “group” specials like buy one get one free. Needs / wants • Research options with an eye for prices • Place order • Pay for order • Tip the person who brings the food ! Actions
31. Ground rules • It’s not about the drawing, it’s about the idea. • There are no bad ideas. • Constructive critique • Respect the timer!
32. Solo sketch - 7 minutes • Use your 6-ups to sketch as many ideas as you can • Quantity, not quality • No idea is a bad idea!
33. Share - 7 minutes • Find a partner • Tape up your sketches • Share your ideas • Constructive critique
34. Refine - 7 minutes • Pick one idea you want to sketch more • Refine it on your 1-ups • Add more detail, explore it further
35. Share again - 7 minutes • Find another partner • Tape up your sketches • Share and constructive critique
36. Duo sketch - 7 minutes • Stay with your partner • Pick one of your ideas to work on together • Refine your design again
37. Discussion - 15 minutes • Tape up your sketches • Share with the whole group • Constructive critique • ID themes and concepts you want to pursue
38. Agenda • Our story - benefits of collaboration • Hands-on exercise • Get started - planning your session! • Common concerns • Discussion
39. workshop by the end of this workshop we want you to know these things
40. system for design (c) creative commons Paul Boag
42. Clear purpose Vision / strategy Specific design problem Does not need to be “web”
43. G G G P think Y MAKE O CHECK
44. (c) creative commons John Trainor
45. Sliding scale of formality Informal Formal
46. Planning your first session • When to have a collaboration session? • Attendess: know your users • Creating your agenda • Room setup and materials • At the session • After the session
47. When? vision hiccups start
48. Attendees
49. How many people to invite
50. Sessions with executives (c) creative commons Brian
51. Creating an agenda
52. Timing (c) creative commons William Warby
53. Concrete problem statement Swigert: ‘Okay, Houston, we’ve had a problem here.’ Houston: ‘This is Houston. Say again please.’ Lovell: ‘Houston, we’ve had a problem. We’ve had a main B bus under volt.’
54. Set ground rules • There are no bad ideas here • Ask questions. Be constructive with critique • Everybody participates • Respect the timer • Have fun!
55. Refine / critique
56. Solo vs paired sketching
57. Page redo. Rapid sketch with 12 folks (business and IT). Very limited scope. • 10 min - introduction • 10 min - solo connecting (high level) • 10 min - refine one of your concepts • 15 min - share with the team • 15 min - discuss Lesson: give paper cutouts when limited scope. Offer a vision session too!
58. • 7 min - intro • 8 min - Agree on 5 most important user tasks • 5 min - Review 3 assets on the existing page that are being removed and 2 being added. • 15 min - Split into 2 groups, each with a moderator. Using pieces of the site and your own sketches, design the page. • 15 min - discussion • 5 min - next steps Page redo. Limited scope. Hesitant partners. Used cutouts, 2 moderated groups. Set up testing.
59. • 10 min - introduction • 10 min - solo user need brainstorming • 15 min - discussion on current pain points (while tallying user need brainstorming) • 15 min - discuss tallied user needs and pain points to pick 4 concepts to sketch. • 25 min - break into small groups and sketch (with a UXer doing the sketching) • 15 min - share across groups, discuss Visioning with 20 executives. Goal: explore biggest areas for improving experience from their perspectives.
60. User needs worksheet with executives Vision stories As a user, I want to . . ! As a user, I need to . . Why? What’s my motivation?
61. • 20 min - discuss research! • 5 min - Intro and background to personas! –Split into groups of 4! • 7 min - Create primary personas! • 7 min - 2 groups share! • 7 min - Refine! • 7 min - All groups share! • Discuss – pick our 2-3 primary personas Ad hoc personas with 20 folks - business, IT, support, before writing user stories.
62. Persona worksheet (totally swiped from Jeff Gothelf) Portrait Behaviors Demographics / characteristics Needs / goals
63. Solving a mid-project problem. Rapid sketch with 25 people. Waterfall project. 8 min – Individual sketching – 6up! 5 min – Individual sketching – 1up! Form small groups of 3! 10 min – Present individual sketches to small groups, discuss as a group! LUNCH! (11:40 – 11:55)! 15 min – Sketch and build concepts as a group! 10 min – Each group presents to one other group, followed by discussion! 10 min – Refine concepts in small group based on feedback! 25 min – Each group presents to large group and discuss! 5 min – Next steps
64. Room setup and materials
66. what do you need paper pens pencils time description constraints examples research
67. At the session
68. At the session [visible agenda] Struggling participants
69. At the session
70. After the session Praise and next steps Feedback
71. After the session (c) creative commons Camron Flanders
72. After the session (c) creative commons Martin Fisch
73. Agenda • Our story - benefits of collaboration • Hands-on exercise • Get started - planning your session • Common concerns! • Discussion (c) creative commons Caleb Roenigk
74. I’m an introvert
75. bio heather bryan beth mckeever
76. What if there’s no interest?
77. (c) creative commons Edge (c) creative commons Amada44
78. We’re waterfall
83. (c) creative commons Guiseppe Zizza
84. Design by committee ‘The Process’ by The Mimeographer on YouTube
85. We still need documents We all knew what this meant
86. Stock your space office services open wall space?
87. Remote teams (c) creative commons astronomy_blog
88. twiddla.com - free company tools wiki over a drive Keep looking at what others are doing!
89. Agenda • Our story - benefits of collaboration • Hands-on exercise • Get started - planning your session • Common concerns • Discussion
90. Debrief • Feedback for us • What stood out? • Do you think you could do this?
91. (c) creative commons Josh Miller