Fortalecendo a cultura de colaboração entre Design e Engenharia

Artigo escrito em parceria com Caio Scalon, tech lead no time de FieldOps da Cobli.

Na semana passada, aconteceu o treinamento sobre processos de desenvolvimento, uma iniciativa para apresentar o nosso conhecimento sobre reuniões, PRs, bugs em produção e monitoramento de aplicações para novas pessoas do time de tecnologia. Acreditamos que esse onboarding é importante para mostrar como Design e Engenharia tocam projetos juntos para construir soluções cada vez mais refinadas.

A ideia geral que queríamos explorar era: como podemos colaborar para entregar funcionalidades que resolvem problemas dos nossos clientes?

Soluções em conjunto

Em geral, na Cobli, o mergulho inicial no projeto é puxado por Design e Produto. Juntos, os times tocam as etapas de descoberta e exploração para chegar à definição do problem statement a partir de uma miscelânea de metodologias — por exemplo, entrevista com usuários e stakeholders, análise de mercado, escrita de job stories e por aí vai.

(Para saber mais sobre pesquisa em UX, recomendamos nosso artigo “Pesquisa com usuários”)

Uma vez que o problema foi definido, é hora de pensar em como resolvê-lo — e só é possível chegar à melhor solução com a participação de todas as pessoas do time. Somente com o alinhamento de viabilidade técnica, experiência do usuário e necessidades do produto conseguimos fechar o escopo do projeto, entendendo seus requisitos e restrições. Algumas ferramentas que nos ajudam nessa etapa são:

Construção de fluxos do usuário

Desenhar o passo a passo da jornada do usuário para resolver uma tarefa específica dentro do produto ou funcionalidade ajuda a entender tudo o que precisa ser desenvolvido, tanto do lado de Design como de Engenharia. O esboço também serve para entender com quais casos de uso seu time lidará, quais serão priorizados e quais serão tratados em um segundo momento, além de evidenciar o que é uma requisição de front e back-end.

(Quer saber mais sobre a importância dos fluxos? Leia nosso artigo “Não deixe o fluxo para trás”)

Desenvolvimento de Proof of Concept (POC)

Fazer um modelo prático para provar o conceito teórico estabelecido pelo projeto, ou até mesmo desenvolver uma implementação de forma parcial, permite identificar gargalos no funcionamento técnico da ferramenta, entendendo como os resultados serão impactados. Ainda, uma POC pode ser importante para a compreensão de pontos de usabilidade e de uso de caso que não são tão tangíveis em um protótipo.

A POC demanda tempo e é exatamente por essa razão que pode ser interessante desenvolvê-la. Ela pode otimizar o tempo e aumentar a produtividade do time ao demonstrar, por exemplo, que determinada funcionalidade não será possível de ser implementada. Afinal, quanto menos tempo for gasto em tarefas que não trarão resultados, melhor.

Sobre Design System…

Um outro ponto importante de colaboração entre Design e Engenharia se refere ao Design System (DS). Para recordar, o DS é uma biblioteca criada por designers e desenvolvedores contendo estilos e componentes reutilizáveis, acompanhados de documentação sobre como e porque aplicar cada um deles.

É importante reforçar que, por mais que haja “design” no nome, essa é uma responsabilidade compartilhada com o time de Engenharia, uma vez que a padronização trazida pelo DS agiliza o desenvolvimento de ambos os times. Isso torna ambos mais produtivos.

Além disso, o DS diminui atritos entre pessoas designers e desenvolvedoras, já que é considerado a fonte da verdade. Ou seja, se há uma diferença entre interface desenhada e implementada, o DS deve ser consultado para demonstrar qual está correto.

Na Cobli, para estreitar a colaboração no DS, nós fazemos alinhamentos quinzenais entre Engenharia e Design para tratar somente desse tema. A porta está sempre aberta para pessoas engenheiras comunicarem ao time de Design alguma inconsistência ou falta de documentação.

…e Storybook

Essa é a ferramenta que nós usamos aqui na Cobli para ajudar no desenvolvimento de componentes da UI isolados da lógica de negócio e do nosso painel. A partir do Storybook, conseguimos mapear os elementos criados com uma história individual para cada um.

Esses componentes geralmente são ligados a dados simulados, facilitando uma série de testes dos fluxos sem haver a necessidade de integração com sistemas externos. Além disso, é possível testar casos de borda e outras interações sem ter que mexer na tela final em que esse componente será encaixado. A vantagem desse tipo de teste é que, quanto maior é a aplicação, mais esses componentes estão relacionados entre si. Caso haja qualquer modificação, pode-se gerar efeitos colaterais nos outros que estão interligados.

Além das vantagens de testes unitários, essa ferramenta também traz praticidade para as revisões feitas pelos times de Design e Produto. Como o uso dessa ferramenta possibilita essa praticidade? Por meio de uma integração entre o Storybook e o GitHub. Quando um pull request é criado, há uma verificação dos pacotes que possuem componentes e que tiveram alguma modificação. A partir disso, um link de preview com estas mudanças é gerado e compartilhado dentro deste mesmo PR, que pode ser acessado por qualquer integrante do time do GitHub da Cobli!

Então, o Storybook é uma ferramenta bastante poderosa para ajudar nos fluxos de desenvolvimento do front-end, tanto para auxiliar os desenvolvedores, quanto para facilitar as revisões das pessoas designers. Assim, ambos os times conseguem estar alinhados conforme são realizadas novas implementações ou mudanças nos componentes do nosso sistema.

Colaboração leva ao sucesso

Na Cobli, entendemos a colaboração como um pilar fundamental do time. Trazer visões diferentes para um mesmo projeto, compartilhar conhecimento e unir esforços para resolver tarefas complexas é o que torna o nosso dia a dia mais produtivo e, porque não, divertido e criativo. Ao invés de esperar gênios com soluções prontas, preferimos apostar na contribuição de cada integrante para construir um produto cada vez mais incrível.

Esperamos que este artigo ajude a criar ambientes cada vez mais colaborativos! Se interessou em fazer parte do time de Design ou Engenharia? Confira as vagas abertas!