The Collaborative UX Designer's Toolbox

16,316
-1

Published on

Materials from "The Collaborative UX Designer's Toolkit" workshop presented at UX London, May 30 2014. http://2014.uxlondon.com/speakers/lane/#workshop

You can find the opportunity statement and persona 4x4 worksheets at bit.ly/uxl-worksheets, and the set of six UX Recipe Cards at bit.ly/ux-recipe

Published in: Design, Technology
2 Comments
131 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,316
On Slideshare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
0
Comments
2
Likes
131
Embeds 0
No embeds

No notes for slide

The Collaborative UX Designer's Toolbox

  1. 1. The Collaborative UX Designer’s Toolbox #UXLondon May 30, 2014
  2. 2. @thinknow Lane Halley lane@lanehalley.com @thinknow
  3. 3. @thinknow • Stimulate necessary conversations • Advance with a shared vision • Create engaged teams • Generate trust • Cultivate a culture of learning How can we...?
  4. 4. @thinknow Who are you? What’s your work context?
  5. 5. @thinknow Agency Enterprise Startup Coach Small team Distributed Large team Freelance Co-located Enterprise Work contexts
  6. 6. @thinknow What are the qualities of satisfying work?
  7. 7. @thinknow Trust Ownership Creativity Empathy Fun Empowerment Flow Communication Productivity Satisfying Work
  8. 8. @thinknow Good work comes from good teams Good teams collaborate effectively
  9. 9. @thinknow What are the challenges of collaborative design?
  10. 10. @thinknow Attention Distance Time pressure HiPPO Confusion Ego Changing mandate Lack of ownership Silos Collaboration Challenges Lack of information
  11. 11. @thinknow The way we work now
  12. 12. @thinknow “Software is eating the world.” Marc Andreessen photo: Peter DaSilva
  13. 13. @thinknow • More businesses moving online • Broadband internet • Connected devices (smartphones) • Low start up costs A digitally wired global economy
  14. 14. @thinknow Design Thinking empathy, creativity and rationality Agile Development self-organizing teams, quality code, iterative & incremental delivery Lean Startup products people want, learning experiments
  15. 15. @thinknow Design Thinking diverge converge diverge converge interpret ideatediscover evolveexperiment
  16. 16. @thinknowImage credit: http://www.mountaingoatsoftware.com/ Agile Development (Scrum)
  17. 17. @thinknowRedrawn from http://theleanstartup.com/principles Lean Startup Cycle
  18. 18. @thinknow Learning experiments Iterative design & delivery Collaborative teams different patterns of generalists and specialists Customer information rich information about customer behavior
  19. 19. @thinknow Learning experiments TEST WITH USERS DEFINE EXPERIMENT prototype observations and metrics oppportunity statement DECLARE ASSUMPTIONS MetricsSolution persona UserProblem REVISEREVISE
  20. 20. @thinknowPhotos: Carbon Five, LUXr Collaborative teams
  21. 21. @thinknow Customer information Adapted from work by: @clevergirl, @luxrco quantitative qualitative generative evaluative Optimizely Analytics A/B Metrics Pirate Metrics Support tickets Surveys Net promoter score Starbucks Interviews Contextual Inquiry Hallway usability five users on friday usability lab
  22. 22. @thinknow • Huge, connected device landscape • Every company is a digital company • We create businesses, not just SW • A good user experience must span all touchpoints A great opportunity for UX
  23. 23. @thinknow User advocate Strategist Design advocate Facilitator Synthesizer The UX Designer’s Role Problem-solver Maker Generator Trainer Conscience
  24. 24. @thinknow “Do what you do now, but do less of it and do it continually.” @williampietri
  25. 25. @thinknow Quick, Visual, Collaborative & Continuous
  26. 26. @thinknow Why document our design ideas?
  27. 27. @thinknow Memory So we get paid Raise money Distributed team Feedback Prove we did it Large team Milestones Coders not hired yetEnforces clarity Reasons to document
  28. 28. @thinknow If documents are a necessary evil, make them work for you
  29. 29. @thinknow Focus on outcome instead of output
  30. 30. @thinknow Help the team understand “who” “what” and “why”
  31. 31. @thinknow Your goal is alignment PEOPLE USES FEATURES NEEDS people product BUSINESS  OPPORTUNITY
  32. 32. @thinknow Good documents visualize the team’s shared understanding
  33. 33. @thinknow storyboards,   wireframes,   visual  design journey  maps Artifacts document shared beliefs personas, scenarios opportunity  statement, hypothesis, business  canvas user  stories PEOPLE USES FEATURES NEEDS BUSINESS  OPPORTUNITY
  34. 34. @thinknow Lead with conversation, trail with documentation
  35. 35. @thinknow Lowest responsible fidelity
  36. 36. @thinknow What is “enough time?”
  37. 37. @thinknow • User Research • Personas • Interaction flow • Screen design • Visual look • User testing 1 week
  38. 38. @thinknow • User Research • Personas • Interaction flow • Screen design • Visual look • User testing 1 day
  39. 39. @thinknow • User Research • Personas • Interaction flow • Screen design • Visual look • User testing 1 hour
  40. 40. UX Recipes
  41. 41. @thinknow • Persona 4x4 • Opportunity statement • Six-ups • Project brief • Wireframe walkthrough • Customer conversations A few of my favorite recipes
  42. 42. @thinknow Let’s use some of these recipes on a sample project
  43. 43. @thinknow Activity: pick an idea
  44. 44. @thinknowbit.ly/idea-mixer
  45. 45. @thinknow Activity: persona 4x4
  46. 46. @thinknow Activity: opportunity statement
  47. 47. @thinknow Activity: pick a key interaction
  48. 48. @thinknow Why will your persona love this solution? What’s a big pain point you can solve?
  49. 49. @thinknow Activity: sketch the UI
  50. 50. @thinknow
  51. 51. @thinknow Activity: wireframe walkthrough
  52. 52. @thinknowThanks @davehendee, @carbonfive, @originate Wireframe Walkthrough WHAT • Collaborative design critique • Build team consensus • Understand trade-offs HOW • Post sketches on the wall • Tell a story • “What happens when...” • Annotate and add stickies
  53. 53. @thinknow Putting it all together: Wheel Nice Guys
  54. 54. @thinknow Picking the right tool for the job Question What’s the objective? What might we do? How is this going to work? Where do we start? How do we build it? Does it work? Activity Opportunity statement, persona 4x4, project brief, conversation guide Six-ups, dot-voting, scenarios, storyboards, experience map Layouts, sketches, wireframe walkthrough Prototype, experiment, MVP User stories, Story map Hallway usability, five on friday, rainbow spreadsheet
  55. 55. @thinknow Create a shared vision opportunity statement (hypothesis) persona 4x4 six-ups conversation guide
  56. 56. @thinknow Opportunity statement Problem: Custom bike shoppers find it difficult and time-consuming to learn about options, configure and price the bike they want to buy. Solution: A Web application that lets custom bike shoppers explore different components, envision different combinations and dynamically understand price.
  57. 57. @thinknow persona 4x4 create provisional personas
  58. 58. @thinknow six-up draw and discuss six-ups
  59. 59. @thinknow conversation guide plan customer conversations
  60. 60. @thinknow Set a course dot voting project brief
  61. 61. @thinknow dot vote ideas to explore dot voting
  62. 62. @thinknowAdapted from @jmspool: http://www.uie.com/articles/short_form_creative_brief/ last updated opportunity persona(s) scenarios metrics create a project brief
  63. 63. @thinknow Just in time design scenario UI elements and layouts thumbnails live style guide
  64. 64. @thinknow Peter explores bike profiles on the CHOOSE BIKE PAGE Sees info about what he can do here Sees multiple bike images w/ basic info & price Uses controls to pan through them Chooses a bike to see in more detail Peter sees the bike he picked on the CONFIGURE BIKE PAGE Sees large image of bike he chose Sees list of parts with info and prices Sees the total price etc... create a scenario
  65. 65. @thinknow Peter explores bike profiles on the CHOOSE BIKE PAGE Sees info about what he can do here [Content box] Sees multiple bike images w/ basic info & price [Carousel] Uses controls to pan through them [Carousel] Chooses a bike to see in more detail [Carousel] Peter sees the bike he picked on the CONFIGURE BIKE PAGE Sees large image of bike he chose [Bike config picture] Sees list of parts with info and prices [Bike config list] Sees the total price [Bike config list] etc... name the UI elements
  66. 66. @thinknow Header Talk to us Marketing message(s) Bike images Bike config picture Bike config list Footer organize elements & layouts
  67. 67. @thinknow sketch interactions
  68. 68. @thinknow UI elements Responsive layouts plan page layouts
  69. 69. @thinknow Live style guide • Describes typography, colors, patterns and widgets • System-of-record for front-end of patterns and styles • Code examples to help engineers to implement quickly and accurately Thanks @wardpenny
  70. 70. @thinknow From design to code wireframe walkthrough 1-week experiment user stories
  71. 71. @thinknow wirefame walkthrough
  72. 72. @thinknow 1-week experiment
  73. 73. @thinknow user stories
  74. 74. @thinknow Learn and reflect five on friday project cadence
  75. 75. @thinknow five on friday Photo: www.flickr.com/photos/mr_t_in_dc/7772899182/
  76. 76. @thinknow Monday APRIL MAY week 18 Tuesday Wednesday Thursday Friday reflect & define specify build & refine build & refine customer feedback Credit: @chemphill, @carbonfive project cadence
  77. 77. @thinknow • Stimulate necessary conversations • Advance with a shared vision • Create engaged teams • Generate trust • Cultivate a culture of learning Now you know how to...
  78. 78. @thinknow Zeitgeist @chemphill @clevergirl @davidhussman @dhendee @Jboogie @jeffpaton @jmspool @jseiden @katerutter @mralancooper and everyone at @balancedteam
  79. 79. @thinknow Lane Halley lane@lanehalley.com THANK YOU @thinknow

×