![@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/85/The-Collaborative-UX-Designer-s-Toolbox-67-320.jpg)
Uploaded byLane Goldstone
The Collaborative UX Designer's Toolbox
The document discusses strategies for collaborative UX design, emphasizing the importance of creating engaged teams and fostering a culture of learning. It highlights the challenges of collaborative design and the evolving nature of work in a digitally connected economy, along with practical tools and methodologies for effective design processes. Key topics include user research, iterative design, and the role of UX designers in problem-solving and guiding teams toward shared objectives.
More Related Content
Similar to The Collaborative UX Designer's Toolbox
The Collaborative UX Designer's Toolbox
- 1.
- 2.
- 3. @thinknow • Stimulate necessaryconversations • 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-locatedEnterprise Work contexts
- 6. @thinknow What are thequalities of satisfying work?
- 7.
- 8. @thinknow Good work comesfrom good teams Good teams collaborate effectively
- 9. @thinknow What are thechallenges of collaborative design?
- 10. @thinknow Attention Distance Time pressure HiPPO Confusion Ego Changingmandate Lack of ownership Silos Collaboration Challenges Lack of information
- 11.
- 12. @thinknow “Software is eating theworld.” Marc Andreessen photo: Peter DaSilva
- 13. @thinknow • More businessesmoving online • Broadband internet • Connected devices (smartphones) • Low start up costs A digitally wired global economy
- 14. @thinknow Design Thinking empathy, creativityand rationality Agile Development self-organizing teams, quality code, iterative & incremental delivery Lean Startup products people want, learning experiments
- 15. @thinknow Design Thinking diverge convergediverge converge interpret ideatediscover evolveexperiment
- 16. @thinknowImage credit: http://www.mountaingoatsoftware.com/ AgileDevelopment (Scrum)
- 17.
- 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 WITHUSERS 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 fromwork 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, connecteddevice 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 TheUX Designer’s Role Problem-solver Maker Generator Trainer Conscience
- 24. @thinknow “Do what youdo now, but do less of it and do it continually.” @williampietri
- 25.
- 26.
- 27. @thinknow Memory So we getpaid Raise money Distributed team Feedback Prove we did it Large team Milestones Coders not hired yetEnforces clarity Reasons to document
- 28. @thinknow If documents area necessary evil, make them work for you
- 29. @thinknow Focus on outcome insteadof output
- 30. @thinknow Help the team understand“who” “what” and “why”
- 31. @thinknow Your goal isalignment PEOPLE USES FEATURES NEEDS people product BUSINESS OPPORTUNITY
- 32. @thinknow Good documents visualize theteam’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, trailwith documentation
- 35.
- 36.
- 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.
- 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 someof these recipes on a sample project
- 43.
- 44.
- 45.
- 47.
- 49. @thinknow Activity: pick a keyinteraction
- 50. @thinknow Why will yourpersona love this solution? What’s a big pain point you can solve?
- 51.
- 52.
- 53.
- 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 alltogether: Wheel Nice Guys
- 56. @thinknow Picking the righttool 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 sharedvision opportunity statement (hypothesis) persona 4x4 six-ups conversation guide
- 58. @thinknow Opportunity statement Problem: Custombike 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.
- 60.
- 61. @thinknow conversation guide plan customerconversations
- 62. @thinknow Set a course dotvoting project brief
- 63. @thinknow dot vote ideasto 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 timedesign scenario UI elements and layouts thumbnails live style guide
- 66. @thinknow Peter explores bikeprofiles 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 bikeprofiles 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 Marketingmessage(s) Bike images Bike config picture Bike config list Footer organize elements & layouts
- 69.
- 70. @thinknow UI elements Responsivelayouts 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 tocode wireframe walkthrough 1-week experiment user stories
- 73.
- 76.
- 77.
- 78. @thinknow Learn and reflect fiveon 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 necessaryconversations • 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
- 83.