Design Handoff Template

Ensuring a more efficient knowledge transfer process between teams.

CONTEXT

Too long; Didn't read

The design handoff was used by developers for building modules (or design patterns), by designers for creating experiences (internal pages of the websites and landing pages), and by those responsible for content within the CMS, as the instructions and content guides were also included in the document. However, there were complaints from all parties about the use of the handoff, regarding its extension.

METHODOLOGY

Taking a step back

All members from the three teams were invited for in-depth interviews. During the interviews, pain points and improvement opportunities regarding the use of the documentation were mapped.
The points raised in the interviews were used as input for building a CSD matrix and Facts, Insights, and Recommendations.

Research findings

01 Size of the documentation

An overly lengthy handoff made it difficult for the reader (regardless of role) to find what they needed in the moment, leading to errors in development and confusion when filling out the CMS.

02 Content segmentation

With multiple target audiences (developers, designers and content teams), the sections of the handoff needed to be easily identified and grouped according to context, so each group could use it without the need for multiple files.

03 Consistency with the design system

The handoff document refers to modules that are built based on the company's design system components and team components created when necessary.

04 Internalization

One of the premises was the non-use of Figma plugins. Not relying on third-party tools would help maintain the handoff, preventing it from being affected by the future removal of those plugins and lower the learning curve for new designers.

RESULT

Creating the new model

Using the mapped problems and opportunities, the new documentation was created with a focus on three main areas:

Anatomy: In these sections, descriptions of the components used are provided, with references to their own documentation, required fields within context, character rules (when applicable), spacing, and accessibility (reading order and element grouping).

Behavior: This section gathers all the specifics such as states, types, and contexts. All the module specifics are contained within this section.

Content: This section covers best practices, filling tips and image guidelines (when applicable).

End product

Learn and adapt

After the first version of the handoff template, user feedback was collected with every usage.
With this data, two new sections were added: Changelog and Module Structure in the CMS.

Takeaways

Internal clients are clients too

The concern with the early stages of the design process should also apply when dealing with internal clients. The old documentation model was created solely for the design team, without considering the needs of other areas that would also use it.

Modular design with no restrictions

Each product has its own specifications, so it was necessary for the handoff model to include sections that covered all documentation needs, but with room for removal in cases where they weren't applicable and the possibility to add new section if needed.