Design Handoff: como construir a comunicação entre designer e desenvolvedor?
O processo de criação de produtos digitais envolve uma interação complexa entre diferentes equipes — negócios, marketing, desenvolvimento, testes, design, etc. — com o objetivo em comum de transformar ideias em realidade.
O design handoff (entrega de design) surge como uma etapa crucial para garantir a comunicação clara e eficiente entre o que foi projetado pelos designers e as outras equipes. Este artigo aborda os conceitos básicos para um bom design handoff, focando na relação e comunicação do design com o time de desenvolvimento.
Para ter boas entregas e sinergia dentro das equipes, o mais importante é uma boa comunicação. Como mencionado antes, todos têm o mesmo objetivo, mas designers e desenvolvedores olham para um mesmo problema com visões diferentes, por conta de seus variados repertórios e habilidades.
É importante que essas diferenças tragam valor para a solução, e não gerem atritos desnecessários.
Para que todos sigam para esse objetivo em comum, é necessário falar a mesma língua.
Quando o design prepara as interfaces para serem entregues aos desenvolvedores, eles provavelmente já passaram por processos que reúnem as visões de vários outros times: instruções dos stakeholders, limitações do time de negócios, escopo do projeto com gerentes, sem contar as dinâmicas e ideações que ocorrem antes das entregas finais.
Uma maneira de deixar todo o time na mesma página é justamente incluir o time de desenvolvimento nessa etapa anterior: ao preparar os documentos com as personas e mapas de valor, por que não adicionar a visão dos desenvolvedores? Seja em reuniões ou de forma assíncrona, ter essa boa comunicação antes de finalizar as entregas de design é a melhor maneira de prevenir desentendimentos, já que todo o time pode participar e ver como e por que as decisões foram tomadas.
E nas etapas seguintes? Quando os designers precisam entregar as preciosas documentações para os desenvolvedores, várias ações podem ser tomadas para que esse repasse ocorra sem problemas. Veremos essas ações a seguir.
Compreendendo o design handoff
O design handoff é o momento em que o trabalho do designer é entregue ao time de desenvolvimento, fornecendo todas as informações necessárias para a implementação da interface projetada — a famosa documentação de UI, GUI, style guide, etc.
Nesse ponto, o mais importante são os detalhes, como guias de estilo (dimensões, cores, tipografia), animações, diretrizes de interação e padrões de design. É essencial que tudo seja claramente comunicado aos desenvolvedores para que eles possam traduzir a visão do designer em código.
Além disso, é fundamental fornecer contextos sobre decisões de design e comportamentos esperados, ajudando os desenvolvedores a entenderem melhor o propósito de cada elemento da interface.
Um dos principais pontos para um design handoff bem-sucedido é encontrar o equilíbrio adequado de informações na documentação. É importante evitar excesso de detalhes que possam tornar a leitura e a compreensão difíceis, ao mesmo tempo, é importante fornecer detalhes suficientes para garantir que a implementação alcance o resultado desejado.
Para isso, é preciso escolher com cuidado as ferramentas e formatos das entregas.
Ferramentas e formatos de entrega
Embora seja fácil para os desenvolvedores entrarem no Figma e colocarem o mouse em cima dos elementos para ver as “linhas vermelhas” (especificações de píxel), mesmo assim a maioria dos designers ainda vê que seus designs não correspondem ao produto final.
Quando pedimos aos designers que classificassem a qualidade geral da implementação do design, 10% disseram que a implementação era perfeita em píxeis e 90% esmagadores disseram que há “algumas” a “muitas” diferenças entre o design e o produto final. (Design Delivery Survey Report | UX Tools)
Utilizar as ferramentas certas durante o design handoff pode fazer uma grande diferença na eficiência e precisão. O formato de entrega depende completamente da realidade do projeto: entender com os desenvolvedores sobre como é a melhor forma para compartilhar as informações é o que vai guiar o uso das ferramentas e tipos de entrega.
Dois tipos de entrega que considero ao iniciar um projeto são ferramentas colaborativas e documentos finais “estáticos”. Uma mistura dos dois tipos pode ser usada, mas dependendo do projeto, algum dos tipos pode ter mais prioridade.
Por exemplo, em alguns projetos, as ferramentas colaborativas online como o Zeplin, Figma ou o compartilhamento do Adobe XD podem ser muito eficientes, pois são interativas e com várias features de feedback e colaboração dentro da equipe.
Mas em casos em que o time de desenvolvimento não está familiarizado com essas ferramentas interativas, ela pode se tornar confusa. Nesse caso, talvez um documento PDF com páginas de informações seria melhor utilizado pela equipe.
Ou talvez o time prefira utilizar uma ferramenta colaborativa para revisões e entendimento de fluxos, mas também precise de um tipo de documento específico para que as informações de design sejam condizentes com a tecnologia utilizada. Uma entrega como uma tabela Excel às vezes tem muito mais valor para a equipe do que lindos protótipos clicáveis no Figma.
Por isso, o entendimento da realidade se torna tão importante. Algumas perguntas para se fazer nessa etapa podem ajudar a definir esses formatos:
- O time conhece a ferramenta usada para a entrega de design?
- Quais as informações mais importantes para que o time de desenvolvimento implemente a interface de acordo?
- A forma como as informações são apresentadas na ferramenta de design condiz com tecnologia usada no projeto de desenvolvimento?
Comunicação contínua
Manter uma comunicação aberta e contínua entre designers e desenvolvedores é fundamental durante o processo de design handoff. Reuniões regulares e a disponibilidade para esclarecer dúvidas garantem que o trabalho seja executado conforme a visão original do designer.
Feedback construtivo também deve ser incentivado, permitindo ajustes de forma colaborativa, quando necessários. Ao pensar em como coletar esses feedbacks, é importante encontrar um método que deixe o time se expressar sem medo. Em times com uma boa sinergia, isso pode ser simples, mas quando o time não está bem engrenado, é preciso testar outras ferramentas.
Formas de feedback anônimo podem ajudar, várias ferramentas como Miro e Forms tem funções para isso. Isso tira o receio de fazer críticas e tira o impacto de dinâmicas hierárquicas existentes.
Fazer boas perguntas também direciona o feedback para a direção certa. Focar em um ponto de cada vez e limitar as opções pode gerar feedbacks mais específicos, o que pode ser mais útil para resolver os problemas. Questionamentos que colocam o documento e não o designer como ponto focal do problema também ajudam o time a dar mais críticas construtivas, por exemplo:
👎 Menos útil:
- “O que podemos fazer para melhorar esse documento?” (foca no time de design, as pessoas podem ficar receosas de impor atividades para os designers)
- “Quais os feedbacks para esse fluxo?” (muito genérico, difícil de estruturar as críticas)
👍 Mais útil:
- “O que falta nesse documento?” (foco em encontrar soluções, tira o time de design como foco do problema)
- “O que facilitaria o entendimento desse fluxo para a implementação?” (relaciona o documento com as atividades de desenvolvimento, ajuda a estruturar a crítica)
Testes e feedback pós-implementação
Após a implementação da interface, é importante realizar testes para garantir que o resultado corresponda às expectativas de UX definidas durante a fase de design.
A coleta de feedback tanto do time de design quanto de usuários, quando possível, e ajustes subsequentes podem ser feitos para aprimorar ainda mais a experiência do usuário e corrigir possíveis problemas identificados na prática.
É normal que a versão implementada tenha inconsistências em relação ao documento, o cuidado nessa etapa é de captar esses detalhes que foram perdidos entre etapas e comunicá-los de maneira clara para que o time de desenvolvimento possa corrigir.
Os mesmos conceitos de comunicação contínua devem ser utilizados nessa etapa, mas no caminho contrário (feedback de designers para desenvolvedores).
Futuro do design handoff
Também acredito que, com a criação de novas ferramentas e tecnologias como IA, poderíamos ter ainda mais eficácia na hora de passar nossos designs.
Já vimos muito progresso em ferramentas de prototipação como o Zeplin, que hoje já trazem soluções integradas que facilitam muito as entregas entre design e desenvolvimento. Ferramentas low-code e no-code também podem trazer inúmeras vantagens, assim como os design systems já se provaram muito eficazes em criar essa ponte entre projeto e implementação.
No futuro, acredito que devemos usar nossas metodologias de design e novas tecnologias para encontrar formas de melhorar a comunicação dentro das equipes. Levantar questionamentos sobre nossas práticas pode abrir caminho para muita inovação. Utilizando a ferramenta de ideação do “What if…”, ou “E se…”, por exemplo, já foi possível levantar questionamentos interessantes para o futuro do design handoff:
- E se existisse uma ferramenta de AI que analisasse a interface implementada e apontasse os erros visuais sem a necessidade de uma reunião com o designer?
- E se, quando você compartilhasse um documento de design, houvesse um link para outros documentos importantes, como ideações, personas e decisões estratégicas?
- E se todas as alterações feitas nas interfaces fossem versionadas e destacadas nas documentações automaticamente?
Há muitas possibilidades e espaço para melhoria dos nossos processos, acredito que os designers devem liderar essas discussões e consolidar ainda mais o nosso papel na área de tecnologia.
Em projetos onde existe a mentalidade super agile de tentar chegar a um MVP (Produto Mínimo Viável) no menor tempo possível, os detalhes de design são atropelados para entregar as funcionalidades. Esse modo de funcionar nem sempre garante que a experiencia do usuário vai ser agradável.
Devemos entender que às vezes as “frescuras” e embelezamentos da interface servem uma função importante para o produto e nem sempre devem ser deixadas para o fim. O design handoff é um elemento crítico no ciclo de desenvolvimento de produtos tecnológicos e deve ser tratado com a devida importância e cuidado.
“The details are not the details. They make the design.” — Charles Eames
Uma entrega de design eficiente e bem documentada resulta em uma colaboração mais harmoniosa entre designers e desenvolvedores, otimizando o tempo e recursos da empresa.
Ao valorizar a comunicação, a documentação detalhada e o feedback constante, as equipes podem garantir que a visão do projeto seja implementada com sucesso e que a experiência do usuário final seja de excelência, cumprindo assim o objetivo final da empresa de oferecer produtos inovadores.
Deixe seu feedback sobre esse artigo aqui: Formulário de avaliação
