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
3. @thinknow
• Stimulate necessary conversations
• Advance with a shared vision
• Create engaged teams
• Generate trust
• Cultivate a culture of learning
How can we...?
13. @thinknow
• More businesses moving online
• Broadband internet
• Connected devices (smartphones)
• Low start up costs
A digitally wired global economy
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
18. @thinknow
Learning experiments
Iterative design & delivery
Collaborative teams
different patterns of generalists and specialists
Customer information
rich information about customer behavior
19. @thinknow
Learning experiments
TEST WITH USERS
DEFINE EXPERIMENT
prototype
observations and metrics
oppportunity statement
DECLARE ASSUMPTIONS
MetricsSolution
persona
UserProblem
REVISEREVISE
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. @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
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
41. @thinknow
• Persona 4x4
• Opportunity statement
• Six-ups
• Project brief
• Wireframe walkthrough
• Customer conversations
A few of my favorite recipes
54. @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
56. @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
57. @thinknow
Create a shared vision
opportunity statement (hypothesis)
persona 4x4
six-ups
conversation guide
58. @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.
64. @thinknowAdapted from @jmspool: http://www.uie.com/articles/short_form_creative_brief/
last updated
opportunity
persona(s)
scenarios
metrics
create a project brief
65. @thinknow
Just in time design
scenario
UI elements and layouts
thumbnails
live style guide
66. @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
67. @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
71. @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
81. @thinknow
• Stimulate necessary conversations
• Advance with a shared vision
• Create engaged teams
• Generate trust
• Cultivate a culture of learning
Now you know how to...