The
Collaborative
UX Designer’s
Toolbox
#UXLondon
May 30, 2014
@thinknow
Lane Halley
lane@lanehalley.com
@thinknow
@thinknow
• Stimulate necessary conversations
• Advance with a shared vision
• Create engaged teams
• Generate trust
• Cul...
@thinknow
Who are you? What’s
your work context?
@thinknow
Agency
Enterprise
Startup
Coach
Small team
Distributed
Large team
Freelance
Co-located Enterprise
Work contexts
@thinknow
What are the qualities of
satisfying work?
@thinknow
Trust Ownership
Creativity
Empathy
Fun
Empowerment
Flow
Communication
Productivity
Satisfying Work
@thinknow
Good work comes from
good teams
Good teams collaborate
effectively
@thinknow
What are the challenges
of collaborative design?
@thinknow
Attention Distance
Time pressure
HiPPO
Confusion
Ego
Changing mandate
Lack of ownership
Silos
Collaboration Chal...
@thinknow
The way we
work now
@thinknow
“Software is
eating the world.”
Marc Andreessen
photo: Peter DaSilva
@thinknow
• More businesses moving online
• Broadband internet
• Connected devices (smartphones)
• Low start up costs
A di...
@thinknow
Design Thinking
empathy, creativity and rationality
Agile Development
self-organizing teams, quality code, itera...
@thinknow
Design Thinking
diverge converge diverge converge
interpret ideatediscover evolveexperiment
@thinknowImage credit: http://www.mountaingoatsoftware.com/
Agile Development (Scrum)
@thinknowRedrawn from http://theleanstartup.com/principles
Lean Startup Cycle
@thinknow
Learning experiments
Iterative design & delivery
Collaborative teams
different patterns of generalists and speci...
@thinknow
Learning experiments
TEST WITH USERS
DEFINE EXPERIMENT
prototype
observations and metrics
oppportunity statement...
@thinknowPhotos: Carbon Five, LUXr
Collaborative teams
@thinknow
Customer information
Adapted from work by: @clevergirl, @luxrco
quantitative qualitative
generative
evaluative
O...
@thinknow
• Huge, connected device landscape
• Every company is a digital company
• We create businesses, not just SW
• A ...
@thinknow
User advocate
Strategist
Design advocate
Facilitator
Synthesizer
The UX Designer’s Role
Problem-solver
Maker
Gen...
@thinknow
“Do what you do now,
but do less of it and do
it continually.”
@williampietri
@thinknow
Quick, Visual,
Collaborative
& Continuous
@thinknow
Why document our
design ideas?
@thinknow
Memory
So we get paid
Raise money
Distributed team
Feedback
Prove we did it
Large team
Milestones
Coders not hir...
@thinknow
If documents are a
necessary evil, make
them work for you
@thinknow
Focus on outcome
instead of output
@thinknow
Help the team
understand “who”
“what” and “why”
@thinknow
Your goal is alignment
PEOPLE
USES
FEATURES
NEEDS people
product
BUSINESS
	
  OPPORTUNITY
@thinknow
Good documents
visualize the team’s
shared understanding
@thinknow
storyboards,	
  
wireframes,	
  
visual	
  design
journey	
  maps
Artifacts document shared beliefs
personas,
sc...
@thinknow
Lead with conversation,
trail with documentation
@thinknow
Lowest responsible fidelity
@thinknow
What is “enough time?”
@thinknow
• User Research
• Personas
• Interaction flow
• Screen design
• Visual look
• User testing
1 week
@thinknow
• User Research
• Personas
• Interaction flow
• Screen design
• Visual look
• User testing
1 day
@thinknow
• User Research
• Personas
• Interaction flow
• Screen design
• Visual look
• User testing
1 hour
UX Recipes
@thinknow
• Persona 4x4
• Opportunity statement
• Six-ups
• Project brief
• Wireframe walkthrough
• Customer conversations...
@thinknow
Let’s use some of
these recipes on a
sample project
@thinknow
Activity:
pick an idea
@thinknowbit.ly/idea-mixer
@thinknow
Activity:
persona 4x4
@thinknow
Activity:
opportunity statement
@thinknow
Activity:
pick a key interaction
@thinknow
Why will your persona
love this solution?
What’s a big pain
point you can solve?
@thinknow
Activity:
sketch the UI
@thinknow
@thinknow
Activity:
wireframe walkthrough
@thinknowThanks @davehendee, @carbonfive, @originate
Wireframe Walkthrough
WHAT
• Collaborative design critique
• Build te...
@thinknow
Putting it all together:
Wheel Nice Guys
@thinknow
Picking the right tool for the job
Question
What’s the objective?
What might we do?
How is this going to work?
W...
@thinknow
Create a shared vision
opportunity statement (hypothesis)
persona 4x4
six-ups
conversation guide
@thinknow
Opportunity statement
Problem: Custom bike shoppers find it difficult and
time-consuming to learn about options,...
@thinknow
persona 4x4
create provisional personas
@thinknow
six-up
draw and discuss six-ups
@thinknow
conversation guide
plan customer conversations
@thinknow
Set a course
dot voting
project brief
@thinknow
dot vote ideas to explore
dot voting
@thinknowAdapted from @jmspool: http://www.uie.com/articles/short_form_creative_brief/
last updated
opportunity
persona(s)...
@thinknow
Just in time design
scenario
UI elements and layouts
thumbnails
live style guide
@thinknow
Peter explores bike profiles on the CHOOSE BIKE PAGE
Sees info about what he can do here
Sees multiple bike imag...
@thinknow
Peter explores bike profiles on the CHOOSE BIKE PAGE
Sees info about what he can do here [Content box]
Sees mult...
@thinknow
Header
Talk to us
Marketing message(s)
Bike images
Bike config picture
Bike config list
Footer
organize elements...
@thinknow
sketch interactions
@thinknow
UI elements Responsive layouts
plan page layouts
@thinknow
Live style guide
• Describes typography, colors,
patterns and widgets
• System-of-record for front-end of
patter...
@thinknow
From design to code
wireframe walkthrough
1-week experiment
user stories
@thinknow
wirefame walkthrough
@thinknow
1-week experiment
@thinknow
user stories
@thinknow
Learn and reflect
five on friday
project cadence
@thinknow
five on friday
Photo: www.flickr.com/photos/mr_t_in_dc/7772899182/
@thinknow
Monday
APRIL
MAY
week 18
Tuesday
Wednesday
Thursday
Friday
reflect & define
specify
build & refine
build & refin...
@thinknow
• Stimulate necessary conversations
• Advance with a shared vision
• Create engaged teams
• Generate trust
• Cul...
@thinknow
Zeitgeist
@chemphill @clevergirl @davidhussman
@dhendee @Jboogie @jeffpaton
@jmspool @jseiden @katerutter
@mrala...
@thinknow
Lane Halley
lane@lanehalley.com
THANK YOU
@thinknow
The Collaborative UX Designer's Toolbox
The Collaborative UX Designer's Toolbox
The Collaborative UX Designer's Toolbox
The Collaborative UX Designer's Toolbox
Upcoming SlideShare
Loading in...5
×

The Collaborative UX Designer's Toolbox

15,304

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
125 Likes
Statistics
Notes
No Downloads
Views
Total Views
15,304
On Slideshare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
0
Comments
2
Likes
125
Embeds 0
No embeds

No notes for slide

Transcript of "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

×