Design Handoff: best practices and case studies from Belka and Immobiliare

Design handoff is the process of handing over a finished design for implementation. It involves transferring a designer’s intent, knowledge and specifications for a design, and can include visual elements, user flows, interaction, animation, copy, responsive breakpoints, accessibility and data validations. […] The design handoff bridges a designer’s vision and the final product built by software developers. A poorly implemented design leads to a broken user experience.

Interaction Design Foundation

During the 33rd UX Talk, we explored the art of achieving a smooth design handoff, ensuring a seamless transition from design to development. Eugenia Valentini, a product designer from Belka, and Federica Vacca, a front-end developer, shared valuable insights, providing tips and tools to enhance collaboration between designers and developers. Following, Alessio Calvo and Francesco Ciabatta presented successful handoff processes from Immobiliare.it.

Managing Handoffs with Figma and Storybook— Eugenia Valentini & Federica Vacca (Belka)

Design handoff is the transition of information from designers to developers; one common challenge is the perceived gap between developers and designers, as these two worlds often struggle to communicate effectively. The handoff involves individual flows and the foundational elements of a design system, such as fonts and colours.
The Design System handoff is particularly crucial for two main reasons:

1. Frequency: the design system is used in most digital services, and knowing how to manage it smoothly is a common occurrence.
2. The need of flexibility for upgrades: the design system requires easy implementation of minor component changes, allowing for rapid upgrades.

A well-executed handoff of a component significantly accelerates both the development and design phases, especially when future revisions might be necessary

cit. ​​Eugenia Valentini

A design system is the shared language of a product or service across multiple touchpoints, defined by specific rules, including for example: typography, color palettes, and spacing. While not always necessary, design systems are particularly beneficial in scenarios involving multiple designers and developers collaborating or during periods of rapid business growth. The most common design handoff challenges are:

• Communication gaps between developers and designers tend to grow exponentially, making resolution challenging.
• Inadequate product documentation makes designers the sole experts, leaving developers without implementation context.

To bridge designer-developer relationship issues, Belka uses Figma: it auto-generates in-product docs and supports direct communication through shared comments on the screen. Figma is updated rapidly, providing information on component properties and variations. It’s user-friendly, solving contextualization problems and turning potential conflicts into shared dialogue.

When the project passes from designers to developers, the very first question is whether a component is new or needs improvements. Developers usually check if the component already exists and/or requires improvements; if it needs a fresh start, they immediately contact the designer to understand its intended behaviour.

Belka developers’ preferred tool is Storybook, which aligns with React’s philosophy. It serves as a living product documentation, easily accessible to both designers and clients, ultimately saving time. Storybook aids in visualizing components, transitioning from tools to practical application in creating a design system.

Belka’s approach

1. Don’t be short in documentation; show how the component of the design system is used, the context, and interactions.
2. Detailed properties and variants of the component should speak the language of those developing it. Showcase it within a screen, illustrating its behavior within a layout.
3. Keep it simple: avoid complexity in standard components like buttons or checklists; focus on more complex components, prioritizing accessibility and simplicity.

Belka concludes their intervention with three hints for tightening the relationship between designers and developers for a design system.

The collaboration between designers and developers in practice — Alessio Calvo & Francesco Ciabatta (Immobiliare.it)

Immobiliare.it is a digital service connecting real estate supply and demand with professional intermediaries facilitating and mediating these interactions. At immobiliare, over time, the relationship between designers and developers has evolved from compartmentalized tasks to collaborative efforts, emphasizing a more systemic approach to product development. Here are some of the problems faced when working in silos:

Developer Challenges (before):

• Lack of clarity on project objectives: derived by the absence of context of the solutions to be developed
• Uncertainty about functionalities and components.
• Increased bug management.

Designer Challenges (before):

• Decisions made without actual feedback on developers’ efforts, leading to more creative but challenging-to-implement solutions.
• Frequent project changes pose a challenge; designers often engage in future projects when developers start working on the project they just finished. However, developers frequently seek clarification on design decisions, requiring designers to manage the old project while simultaneously working on a new one.

Immobiliare.it has therefore shifted its approach towards an Agile and constant release mode, focusing on small features and continuous collaboration. These changes have brought several benefits, promoting cohesion between teams.

Immobiliare.it’s approach

1. Horizontally organized teams dedicated to the project, including both designers and developers concurrently.
2. The developers have been committed to the project since the Design discovery phase.
3. Shared roadmap with clear timelines determined together.

For developers, this has led to clarified project goals, collectively decided features, and ultimately, the introduction of design systems. Breaking down the work into phases allowed organizing the code into functions that can be replicated across various touchpoints, eliminating the need for refactoring. This simplified approach significantly improves time management, benefiting both teams.

On the other hand, for designers, this minimizes content changes thanks to real-time communication on projects; it promotes informed decision-making and ensures more manageable Q&A and code reviews. The key to addressing challenges lies in the collaborative involvement of both teams, emphasizing communication as the cornerstone for cohesive and efficient work.

Want to know more about Design Systems?

Check out our 2-day full-immersion workshop, happening on December 13 and 14 at POLI.design — Milan, powered by Belka:
https://www.polidesign.net/it/formazione/digital-and-interaction/corso--design-system/

These lectures were held during the 33rd UX Talk organized by POLI.design’s Experience Design Academy. Follow us on LinkedIn and Instagram to be updated about the upcoming UX Talks, which are always open to the public.

Curated by Alice Paracolli