![@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](https://image.slidesharecdn.com/uxlondon-workshop-lbh-140524200745-phpapp02/75/the-collaborative-ux-designers-toolbox-67-2048.jpg?cb=1666604920)
The Collaborative UX Designer's Toolbox
•143 likes•26,620 views
Report
Share
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
More Related Content
What's hot
What's hot(20)
Viewers also liked
Viewers also liked(18)
Similar to The Collaborative UX Designer's Toolbox
Similar to The Collaborative UX Designer's Toolbox(20)
More from Lane Goldstone
More from Lane Goldstone(17)
Recently uploaded
Recently uploaded(20)
The Collaborative UX Designer's Toolbox
- 3. @thinknow • Stimulate necessary conversations • Advance with a shared vision • Create engaged teams • Generate trust • Cultivate a culture of learning How can we...?
- 4. @thinknow Who are you? What’s your work context?
- 5. @thinknow Agency Enterprise Startup Coach Small team Distributed Large team Freelance Co-located Enterprise Work contexts
- 6. @thinknow What are the qualities of satisfying work?
- 8. @thinknow Good work comes from good teams Good teams collaborate effectively
- 9. @thinknow What are the challenges of collaborative design?
- 10. @thinknow Attention Distance Time pressure HiPPO Confusion Ego Changing mandate Lack of ownership Silos Collaboration Challenges Lack of information
- 11. @thinknow The way we work now
- 12. @thinknow “Software is eating the world.” Marc Andreessen photo: Peter DaSilva
- 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
- 15. @thinknow Design Thinking diverge converge diverge converge interpret ideatediscover evolveexperiment
- 16. @thinknowImage credit: http://www.mountaingoatsoftware.com/ Agile Development (Scrum)
- 17. @thinknowRedrawn from http://theleanstartup.com/principles Lean Startup Cycle
- 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
- 20. @thinknowPhotos: Carbon Five, LUXr Collaborative teams
- 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
- 23. @thinknow User advocate Strategist Design advocate Facilitator Synthesizer The UX Designer’s Role Problem-solver Maker Generator Trainer Conscience
- 24. @thinknow “Do what you do now, but do less of it and do it continually.” @williampietri
- 26. @thinknow Why document our design ideas?
- 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. @thinknow If documents are a necessary evil, make them work for you
- 29. @thinknow Focus on outcome instead of output
- 30. @thinknow Help the team understand “who” “what” and “why”
- 31. @thinknow Your goal is alignment PEOPLE USES FEATURES NEEDS people product BUSINESS OPPORTUNITY
- 32. @thinknow Good documents visualize the team’s shared understanding
- 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. @thinknow Lead with conversation, trail with documentation
- 36. @thinknow What is “enough time?”
- 37. @thinknow • User Research • Personas • Interaction flow • Screen design • Visual look • User testing 1 week
- 38. @thinknow • User Research • Personas • Interaction flow • Screen design • Visual look • User testing 1 day
- 39. @thinknow • User Research • Personas • Interaction flow • Screen design • Visual look • User testing 1 hour
- 40. UX Recipes
- 41. @thinknow • Persona 4x4 • Opportunity statement • Six-ups • Project brief • Wireframe walkthrough • Customer conversations A few of my favorite recipes
- 42. @thinknow Let’s use some of these recipes on a sample project
- 49. @thinknow Activity: pick a key interaction
- 50. @thinknow Why will your persona love this solution? What’s a big pain point you can solve?
- 52. @thinknow
- 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
- 55. @thinknow Putting it all together: Wheel Nice Guys
- 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.
- 59. @thinknow persona 4x4 create provisional personas
- 60. @thinknow six-up draw and discuss six-ups
- 61. @thinknow conversation guide plan customer conversations
- 62. @thinknow Set a course dot voting project brief
- 63. @thinknow dot vote ideas to explore dot voting
- 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
- 68. @thinknow Header Talk to us Marketing message(s) Bike images Bike config picture Bike config list Footer organize elements & layouts
- 70. @thinknow UI elements Responsive layouts plan page layouts
- 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
- 72. @thinknow From design to code wireframe walkthrough 1-week experiment user stories
- 78. @thinknow Learn and reflect five on friday project cadence
- 79. @thinknow five on friday Photo: www.flickr.com/photos/mr_t_in_dc/7772899182/
- 80. @thinknow Monday APRIL MAY week 18 Tuesday Wednesday Thursday Friday reflect & define specify build & refine build & refine customer feedback Credit: @chemphill, @carbonfive project cadence
- 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...
- 82. @thinknow Zeitgeist @chemphill @clevergirl @davidhussman @dhendee @Jboogie @jeffpaton @jmspool @jseiden @katerutter @mralancooper and everyone at @balancedteam