UX Recipe: Developer Wireframe Walkthrough

David Hendee ·

This is the first in a series of posts highlighting Lean UX practices at Carbon Five. They are presented as ‘recipes’ for you try out for yourself, then alter them to make them your own.

Wireframe Walkthrough

While more and more of our clients are engaging us in full-service design/build projects, we still enjoy working with outside or on-staff designers. And even when we are providing design services, we always want to maximize the collaboration between the designers, engineers and business owners on our projects.

Last year, Janice Fraser of LUXr introduced us to an activity called the “Wireframe Walkthrough.” It’s probably something you’re already doing on projects without quite putting a formal name or process around it. We’ve taken the activity and deconstructed it a bit, added our insights, and put a fancy title on it in the hopes that others will try it out and add their experience and wisdom.

What is it?

A collaborative design critique from a technical perspective to identify hard features and suggest alternatives.

Why do it?

By engaging designers and engineers in a constructive discussion of tradeoffs you stand to get more bang for your development buck. Posting wireframes on walls also helps externalize ideas and define the project’s collaborative space.

When to do it?

It’s typically done weekly during the planning session as the designers generate wireframes for the next iteration or two; but it can be done any time and should definitely be done during kickoff.

How to do it?

  1. (Designer) Print out and post the latest wireframes on a wall at gallery height. Find a developer and put them at arms length from the drawings.
  2. (Developer) Ask about the current state of the designs and what kind of feedback they’re looking for. Find out if the designer is more interested in generative or evaluative feedback. Try asking “Where are you at?”
  3. (Designer) Let the developer know about your goals for the walkthrough. For instance, say “I’m really interested in hearing your thoughts on…”
  4. (Developer) Acknowledge the challenge. Good design is as hard as writing good code. Share some enthusiasm. Then walk through the flow, pointing where your mouse would be. Narrate what you are thinking and doing as a user. Say things like “I’m trying to find the contact us page.”
  5. (Designer) Take notes on stickies. Place the stickies directly on the wireframes to mark the location of the comment or observation. This is essentially a free usability test!
  6. (Developer) Note missing functionality or difficult technical challenges. Ask questions about the user rather than making statements. For instance: “How would I find a forgotten password?” rather than “You forgot the forgot your password screen.” Keep in mind that this is a cooperative discussion about the design, not a judgement on the designer.
  7. (Designer) Take notes and offer insights into the current design solution. Listen, breathe, and try not to get defensive (or think of elephants). Postpone deep or off-topic discussions. For instance, say “That’s something we’ve been really struggling with. We should schedule a meeting to talk about that after.”
  8. (Developer) Suggest alternatives to any particularly challenging engineering implications. Try engaging the designer with phrases like “What user need are we trying to address here?” or “We could try… and get a similar result with less effort.” Challenge yourself and throw the designer a bone by saying something like “This is the main feature so it makes sense that we spend extra time on it.”
  9. (Designer) Thank the developer. Incorporate feedback as appropriate. Rinse and repeat. It’s better to do this a little bit all the time.

That’s it! Please let us know if you have any tricks or tips to add, or if you have a suggestion for our next Lean UX ‘recipe.’

David Hendee
David Hendee

David is the Director of Design at Carbon Five. He joined the company in 2004. Before that he was a freelance illustrator and a co-founder of the web development firm Fire Engine Red. David lives in Alameda with his wife Jenny, their dog Daisy, and a tiny dinosaur named Dorothy.