The no-handoff method: bridging design and code

Project handoff is often compared to throwing your work over the fence for the next team to catch, a universally hated period of inefficiency and frustration baked into the waterfall method.

While user-centered frameworks like Agile have broken down barriers between development and the end user, in practice the divisions between internal disciplines, like design and development, still persist.

The no-handoff method addresses the issue of project handoff between discovery, design, and development. Building on agile patterns of Lean UX, Dual Track Agile, and Minimum Viable Product, the no-handoff method is the next logical step for expanding agile to the design process.

The problem to be solved:

Project handoff can get messy

Cross-discipline communication in UX has mainly focused on two areas:

  • Improving the available toolkit and moving to programs like Invision, Sketch, Figma, or Framer (good toolkit overview by Tridip Thrizu, “API design is UI design”).
  • Or being smart and creative in our communication techniques (“Working Together” by Rachel Andrew).

Both approaches offer valuable insights into improving how we work, but don’t address the underlying problem: there is a rift between the design and programming disciplines. Iterative workflows often end up looking, as Marty Cagan puts it, like “a series of mini waterfalls” rather than a truly collaborative process.

The no-handoff method addresses the root issue and offers a framework for integrating design and development.

What does no-handoff bring?

In the no-handoff approach “design” is not a team, a task, or a function. Most importantly design is not someone else’s problem. Design is a shared goal that the entire team strives for together. The purpose of design is to support successful user behaviors. Everyone’s contributions influence the end user behavior and that makes design everyone’s goal.

To achieve this mental shift and promote fuller team integration I take three simple steps to build a shared vocabulary, shared goals, and a shared primary communication tool.

1) Shared vocabulary and banishing “design”:

The first step on a no-handoff team is to throw out the word “design” from your project vocabulary. Once visual interfaces are discussed from the perspective of user behavior, it allows the team to consult together. Ironically banishing the word “design” leads to better design.

Team members are forced to find more accurate ways to describe their thinking and intentions. “Hows the design coming along?” becomes more specific: “Is this lo-fi navigation UI accomplishing its user goals?”. “What is the rationale behind the signup form coming before the gallery in the wireframe?”. “How does this element support positive user behavior?”

When all team members, including web designers and UI specialists, can explain their work based on its user experience implications then the team will be speaking a shared language.

2) Shared goals:

The next critical component of the no-handoff method is generating a list of shared goals the entire team is striving for, framed in terms of measurable user experience. What are the positive user behaviors you want to support? It might be to increase sales, encourage longer sessions. You might set a goal if improved brand perception scores. Deciding what user experience to cultivate and how you will measure success are both equally important.

3) Shared functional wireframe:

two cats on either side of a window, just like UX teams boxed into their roles
User experience isn’t out there, someone else’s problem. It’s inside the house!

The third component is the use of a functional HTML wireframe from the very beginning. I no longer use Sketch, InVision or similar mockup tools. All interface reviews are done in a browser with an interactive, responsive HTML wireframe.

Wireframes are the shared language of the web. They instantly communicate to all disciplines and stakeholder roles and leapfrog right over many potential communication issues. A no-handoff project leverages their power to communicate from day one.

We start with lo-fi wireframes as an MVP of the website and organically move towards our shared goals. We refine our working wireframe/prototype as we go. All kinds of lines are blurred, including divisions between when sketching ends and refinement begins.

Conclusion

Banishing the word “design” opens the door to more useful shared vocabulary. Centering the user experience goals promotes integrated thinking. And with a working wireframe as the ultimate shared reference all team members have valuable insights to add to discovery and design.

Collaboration is the biggest challenge for any project. We have deeply entrenched ideas about disciplines, roles, and hierarchies to overcome. The steps in no-handoff help to leapfrog some of these challenges and mitigate others. It is the next logical step for design teams and expands agile to the design and discovery process with no false handoff requirements.

Leave a Comment

Your email address will not be published. Required fields are marked *