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. Handoff is a near-universally recognized 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 still persist.

This issue is part of a larger societal pattern of fragmented thinking over integrated thinking. That this fragmented thinking has led to fragmented web development teams is not surprising, but only a shift to a more integrated mental model will allow us to overcome some of the false barriers we often take for granted and create truly integrated teams.

In my teams I am innovating an agile method of building websites I simply call no-handoff. Building on the fundamentals of Lean UX and Minimum Viable Product (also see Jussi Pasanen’s fab diagram), the no-handoff method is the next logical step on the path of integration that Agile is forging. No-handoff is a rethinking of how web disciplines can communicate, with a particular focus on greater integration of design and development.

The problem to be solved:

Lets stop throwing work over the fence! Credit: canitbesaturdaynow.com

Web Development teams are complex and multi-faceted. The number and diversity of disciplines represented is huge, wether championed by just a few people or spread across a very large team. And for many agile web teams, my own included, the miscommunications between design and code are a particular point of inefficiency. Iterative workflows often end up looking, as Marty Cagan puts it, a series of “mini waterfalls” rather than a truly collaborative process. It is still much more efficient than traditional waterfall but there is still a handoff, that perilous period where you throw your work over the fence.

I think UX project management can solve this issue, but there is a piece missing from our current public discourse. Cross-discipline communication in the UX sphere 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“, UXDesign.cc).
  • Or being smart and creative in our communication techniques (Rachel Andrew, “Working Together“, Smashing Magazine).

Both approaches offer valuable insights into improving how we work, but neither new tools or improved communication techniques address the underlying problem: that there shouldnt be a rift between designer and programmers in the first place. The no-handoff method tries to address the root issue and offers a framework for integrating UX, design, and development.

So what is no-handoff?

Below is a project diagram illustrating a recent no-handoff project and how each discipline’s involvement ebbed and flowed as the project progressed. Exact levels of involvement and specific phases will shift depending on the project, the critical factor is that all members are involved from start to finish.

This image has an empty alt attribute; its file name is no-handoff-team-chart-1024x817.jpg
Organic team involvement over each phase in a no-handoff project. Credit: Shamsi Brinn

In my work I dont separate the artistic from the applied. The brilliant designer Alan Hori once told me that art and graphic design have nothing in common. But after years in the trenches I find that I dont agree. From my perspective they share almost everything in common and, to take this further, so do all disciplines in the organic process of development. I began my professional life in art and graphic design, then learned development, and lastly took on UX project management to try and reconcile the two. With this 360 degree view Ive focused on overcoming some of the falsely manufactured barriers my teams face when bridging disciplines. No-handoff is the result, an agile method for more fully integrating cross-functional teams.

In the no-handoff approach “UX” is not a team, a task, or a function. Most importantly user experience is not someone else’s problem. UX (and design) is a shared goal that the entire team strives for together. The purpose of UX is improved user behavior. And what influences behavior on the web? Everything! Everyone’s contributions influence the end user behavior and that makes UX everyone’s goal.

To achieve this mental shift and promote fuller team integration I take three simple steps that 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. The words we often use to discuss design are limited in their usefulness for a web project — developers probably dont need to think about gestural marks, nor do security specialists need to mull over the proper amount of negative space — but the goals of design are universal. Reaching users with a message, evoking a response, providing a positive experience, are all concepts and goals relevant to the diverse disciplines that go into building a website. Once you banish the word ‘design’ from your team’s vocabulary, and 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. 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.

Early team discussions can be like an awesome game of ‘Taboo’. When we discuss topics we traditionally might call “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?”.

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 user experience. Design is a shared goal. So are Security, Accessibility, and Functionality. Write a descriptive sentence or two (‘stories’) describing what constitutes ‘done’. For example: “Meeting our Accessibility goal means we will meet WCAG2 AA standards and take into account other forms of ‘impairment’ including jargon-literacy and slow internet connections”. Most disciplines on a web development team will see the backlog tasks forming in their minds from even this very short description, but it keeps user experience front and center.

3) Shared in-browser wireframe:

And the third component is the use of in-browser wireframes from the very beginning. In our no-handoff projects we no longer use Sketch, InVision or similar mockup tools. All interface reviews are done in-browser with an interactive and responsive wireframe. Prototypes and working 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.

Blurring lines and roles

As the painter Mary Corse wisely says “I think as time goes on, physics discovers what artists are already painting or doing.” Similarly, I think web development is slowly discovering techniques artists have employed for millenia in their quest for truth. Artists sketch, in web development we rapidly iterate. Artists seek beauty, we seek to minimize user friction. Just as a painter sketches on a canvas and fills and builds up detail over time, in the no-handoff process there is no strict division between lo-fi and hi-fi wireframes. We start with lo-fi wireframes for many reasons, but mainly because you have to start somewhere, organically move towards our shared goals and refine our working wireframe/prototype as we go. All kinds of lines are blurred, including divisions between when sketching ends and refinement begins.

With a working wireframe as the ultimate shared reference all team members have valuable insights to add to group consultations. A discussion that fully involves all disciplines on the team is the ultimate encapsulation of parallel workflow.

The role of UX guardians

UX in a no-handoff project needs to be touched on a little more in depth. Briefly, UX and user-behavior is the thread that runs throughout the project, through each discipline, and pulls the team together. UX first and foremost is a shared goal and everyone’s responsibility. But it is also a team. I use the term “UX guardians” to distinguish between the team and the shared goal. A UX guardian’s job sometimes looks like a project manager and convener, sometimes like a user tester, sometimes like a communicator in chief, and always as a resource for all team members. It is the role of the UX guardian to cast the wide net of user feedback and retrieve results from many sources, sort and filter and communicate their findings and, in consultation with all members, generate shared project goals and the criteria for reaching them. The UX guardian also ensures that backlog lists are consistently groomed and oriented towards reaching those goals (Im using Scrum terms, but the concept translates to any agile process).

Like all roles in a no-handoff project the UX role is iterative. As projects progress there is more to test, more user data is gathered and insights gained, and the criteria for meeting goals may shift and backlog lists be adjusted accordingly. What remains constant is that each project phase and all changes throghout are viewed through the lens of the end user experience. UX guardians do not make all decisions, not at all, but they leverage their expertise to keep the focus of all team decisions on the end user.

Conclusion

Collaboration is the biggest challenge for any project, or any human endeavor for that matter. We have deeply entrenched ideas about disciplines, roles, and hierarchies to overcome and the no-handoff method will challenge teams in some new ways. More complete integration of teams is a trend I see incrementally coming further into the light as web development matures, especially seen in Agile’s increasing emphasis on collaborative teams. The ability of the UX guardians to communicate the universality and central importance of user experience promotes integrated thinking and unites team members around shared goals in an organic process with no false handoff requirements.

Add to the conversation, let me know your experience applying no-handoff.

Leave a Comment

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