A few weeks ago, the Cloud City team received an awesome compliment about our documentation and communication processes.
We’d just wrapped up a project for a fintech company to streamline its merchant onboarding process. The last step was handing off the design files, which the client loved.
But it was the organization and communication around those files that really caught the client’s attention.
Marian and Manu are right. My education was in architecture, and I practiced as an architect in Nashville before moving to the world of development.
That time in the architecture industry taught me transferable skills I still use today at Cloud City — especially when it comes to building smooth handoffs so development teams can fully implement what we designed.
What the architecture industry can teach us about good design processes
Architecture as an industry has been around for literally thousands of years. It’s been honed over time to formalize good handoff processes. (And no wonder. It’s an industry in which lives are at stake. The building needs to stand up.)
Meanwhile, UI/UX has only existed for a few decades. But it can still learn from the architecture industry, especially when it comes to streamlining its processes.
Both architecture and UI/UX involve designers building sets of components that are handed off to a separate team to create. In both fields, designers have a responsibility to be detailed and make sure each design component is able to fulfill its goal.
The worst thing you can do? Hand off design files with no additional detail or nuance. At the same time, you don’t want to give too much detail.
I call this the Goldilocks zone: providing enough context so the engineering team knows how we (the designers) think about certain design elements or components, without providing so much detail that we dictate how the engineering teams should implement them at a coding level. That’s their rodeo.
Before we get into all the elements of a great handoff, it’s important to understand what you gain by streamlining this process. It’s something I learned in the architecture world and continue to apply to my work today as a UI/UX designer.
3 reasons a great design handoff is so important
1. It saves money
Whether it’s a customized kitchen or an e-commerce checkout process, building something wrong and then going back to fix it can be time-consuming and expensive.
If architects don’t provide enough detail when they hand off their designs, the contractor is just going to build the house however they think is correct. And once it’s built? It’s really, really hard to unbuild it—not to mention the possibility of lawsuits.
While messing up UX doesn’t always rise to the litigation level, it can still be expensive to re-engineer pieces of your product.
Engineers are high-level talent, and each of their hours is valuable. Clarifying for them early on how to best utilize the provided design documents will prevent so many wasted hours (and headaches) down the road.
2. It makes for a happier team
For skilled construction teams who specialize in implementing architectural projects, having an early, thorough understanding of all the construction details is critical. They like being able to see a realistic solution for how something will be built — without having to figure it out themselves.
The same is true for engineering teams. If designers simply toss files to them over the fence, with no explanation of how they should be implemented, engineers can only guess. Naturally, this can lead to confusion and frustration.
But getting a batch of design files and a detailed roadmap for how they should be used? That will make their day.
3. It enables a better end result
In the architecture world, we call a handoff the “construction documentation” process. Now, contractors don’t need a “CD” for a standard partition wall. But they would need strong documentation if they were trying to achieve a particular accent or a complicated inlay, for example.
A great handoff in this situation includes two things:
- what the architect was trying to do at the highest level (e.g., what should that finished inlay look like?).
- How to actually achieve that high-level vision (e.g., where the screws go and what size stud to use).
This same principle can apply within the UI/UX world. What’s the high-level vision, and what are the tactics necessary to achieve that vision?
Crafting a great handoff
We’ve talked through the nuts and bolts of why a seamless handoff is so important. But how do you actually create a process that minimizes friction?
Here are some of the principles I implement to ensure the smoothest handoff:
Request an early review
A strong handoff starts … well, waaay before the handoff.
After a project kicks off, it can be helpful to set up an early review with the product lead, where you go over high-level goals and ask critical design questions like: Why are we doing this? Is this the right place to do X? Will the user intuitively think about going to this spot on the page?
This is also the time to ask what level of handoff detail will be most helpful to the client’s engineering team. Depending on their team’s experience and skill set, this can vary! Understanding the engineers’ perspective will help you plan a handoff process that will ensure the most success.
Ensure clear, specific callouts and behavioral notes
A “callout” is a term borrowed from the architecture world. In essence, a callout provides detailed specifications about the project’s bigger design themes and elements. It’s your way of bringing attention to a particular component and its correct implementation.
Your callout should answer questions like:
How is what we’re building different from the “standard”? Why is it different? Is this difference important or should we consolidate it with an already-established component? Are there one-off features to keep in mind? If so, you should talk with an engineer to see how difficult this request will be.
Behavioral notes are the other side of the same coin. These are details about how a component should behave after it’s been built.
At Cloud City, we build robust components in our design program, Figma. We can make these move around the screen and adapt in the same way they would on a browser.
Having that visual of how a design element should be integrated prevents the engineering team from making the dreaded “Hey, what did you want this thing to do?” call.
Detailed, clear callouts and behavioral notes make life much easier for the engineering team — and save clients’ money, because they’re not having to undo and redo down the line.
Keep your technical language consistent
Within big projects, there are endless combinations of elements, ideas and components. Language around these can get messy if we’re not intentional from the start.
With any handoff, it’s important everyone speaks the same language. What is this component called? If we’re working on an online application process, how do we refer to each specific step?
Consistent, clear language prevents slip-ups and confusion later on in the process.
The bottom line? Thoughtful design saves money, ensures happier teams and enables better products.
But thoughtful UX design isn’t just about the individual components that designers create. Thoughtful design is about how those elements are used. That starts and ends with a smooth handoff process.
We’re always down to hear how others have engineered their processes. Hit us up on LinkedIn or Twitter, or drop us a line on our contact page.