Following traditional "waterfall" methods, designers create wireframes & high-fidelity comps which are delivered to developers who build the product. This "handoff" of design to development can cause frustration and inefficiency when construction starts. What happens when it's not possible to realize all aspects of the design within the constraints of the project? What about edge cases the designer didn't consider? Once the issues are discovered, designers often aren't available to make changes and the development team has to use their best judgement when implementing the design.
What if there were a better way? What if designers could preview their work earlier and developers could give input about technical considerations? When designers and developers have necessary conversations, they can better support each other and build better products, faster.
In this workshop, Lane Halley and Mike Wynholds of Carbon Five share some "recipes" to help your team create necessary conversations and get your whole team engaged in the user experience of your product.
wireframe walkthrough• Collaborative design critique• For users, clients, designers, and developers• Print it out, post it up, stand at arms length• Use think aloud protocol• Document with stickies on the wireframesWednesday, May 29, 13
When to do it?•At start of project• During iteration planningWednesday, May 29, 13
developer cheat sheet1. frame the conversation2. acknowledge the challenge3. act like a curious user4. questions over comments5. say “we” over “you” or “i”6. participate as a creative collaboratorWednesday, May 29, 13
1designer:print out and post the latest wireframes on a wallat gallery height.ﬁnd a developer and put them at arms lengthfrom the drawings.Wednesday, May 29, 13
2developer:ask about the current state of the designs andwhat kind of feedback they’re looking for.ﬁnd out if the designer is more interested ingenerative or evaluative feedback.ask “where are you at?”Wednesday, May 29, 13
3designer:let the developer know about your goals for thewalkthrough.say “i’m really interested in hearing yourthoughts on...”Wednesday, May 29, 13
4developer:acknowledge the challenge.walk through the ﬂow, pointing where yourmouse would be.narrate what you are thinking and doing as auser.“i’m trying to ﬁnd out how to...”Wednesday, May 29, 13
5designer:take notes on stickies.place the stickies directly on the wireframes tomark the location of the comment or observation.this is a free usability test!Wednesday, May 29, 13
6developer:note missing functionality or difﬁcult technicalchallenges.ask questions about the user rather than makingstatements. for instance: “how would I ﬁnd aforgotten password?” rather than “you forgot theforgot your password screen.”keep in mind that this is a cooperative discussionabout the design, not a judgement on thedesigner.Wednesday, May 29, 13
7designer:take notes and offer insights into the currentdesign solution.listen, breathe, and try not to get defensive (orthink of elephants).postpone deep or off-topic discussions.“that’s something we’ve been really strugglingwith.”“we tried that but noticed...”Wednesday, May 29, 13
8developer:suggest alternatives to any particularlychallenging engineering implications.“what user need are we trying to address here?”“we could try... and get a similar result with lesseffort.”“this is our main feature so it makes sense that wespend extra time on it.”Wednesday, May 29, 13
9designer:thank the developer.incorporate feedback as appropriate.rinse and repeat.Wednesday, May 29, 13
Thank you!Carbon FiveLean UX & AgileDevelopment for Weband mobile productswww.carbonﬁve.comWednesday, May 29, 13