À medida que nosso produto se tornava mais complexo, tornava-se cada vez mais difícil ter uma imagem completa de como tudo funcionava junto. E, para manter nosso ritmo de crescimento, tivemos que encontrar uma maneira de manter uma fonte atualizada de verdade para todas as nossas especificações funcionais. Este artigo explica como lidamos com as especificações anteriormente, os problemas que encontramos com essa abordagem e como criamos uma totalmente nova.

O que havia de errado com "especificações por recurso"

Nossa abordagem tradicional para especificações era ter uma página dedicada para cada nova especificação, onde os gerentes de produto compilariam uma lista de comportamentos esperados para telas novas e existentes. Essa abordagem funcionou bem até que o produto se tornou mais complexo, especialmente quando novos recursos substituíram partes das telas existentes.

Como resultado, foi um desafio entender exatamente como uma tela funcionava e quais poderiam ser as repercussões em outras partes do aplicativo ao atualizar um elemento específico. A base de código tornou-se a única fonte confiável de verdade e os gerentes de produto tiveram que confiar nos engenheiros para explicar repetidamente como as telas se comportavam. Isso interrompeu o foco dos engenheiros, levando-os a fornecer respostas rápidas e aproximadas que levaram a retrabalho, desperdício, aumento do lead time e frustração.

Construindo o protótipo

Para resolver esse problema, precisávamos desenvolver um protótipo de uma fonte de verdade para especificações e designs. Cada tela deve ter uma fonte única de verdade. Portanto, quaisquer atualizações feitas em uma tela devem ser refletidas nessa única fonte de verdade, em vez de em qualquer outra página dedicada. Nossos projetos estavam no Figma, então os mantivemos lá. Escrever especificações ao lado de capturas de tela no Notion foi, na verdade, mais trabalhoso do que escrever especificações diretamente no Figma. Os desenvolvedores puderam ver imediatamente os designs de alta fidelidade com suas especificações no mesmo arquivo Figma, com a especificação existente ao lado da alteração proposta

Para garantir que nossas especificações fossem abrangentes, identificamos quatro áreas principais que nossas abordagens anteriores não incluíram em nosso novo protótipo. Primeiro, precisávamos de visibilidade de todos os elementos da tela, independentemente das condições. Em segundo lugar, precisávamos saber como qualquer elemento se comporta sem ter que pedir aos engenheiros para fazer a retroengenharia da base de código. Em terceiro lugar, precisávamos saber se um elemento é compartilhado em várias telas para evitar que uma alteração em uma tela fizesse atualizações indesejadas em outras telas. E, finalmente, precisávamos de uma imagem clara dos fluxos da tela com todas as condições para navegar de uma tela para outra.

Melhorando e dimensionando o protótipo

Para integrar todos os nossos Designers, precisávamos criar um padrão claro que respondesse às suas necessidades específicas em uma plataforma que eles reconhecessem e usassem regularmente. Agora, temos um espaço de trabalho “Visual Specs” no Figma com pastas ordenadas por tema, e não por equipe. Cada tela pertence a todos, não apenas a uma equipe. Se uma equipe responsável por um escopo específico fizer uma alteração que impactará outra parte do aplicativo, ela poderá atualizar as telas certas no lugar certo e todos verão a alteração automaticamente. Dessa forma, nossa abordagem atual às especificações é mais abrangente do que antes. Cada pasta de tema tem uma página para cada história de usuário.

O conteúdo de uma história de usuário mostra a progressão horizontal da jornada do usuário. Verticalmente, temos todas as variantes possíveis de cada tela chave (estado de erro, estado de carregamento, estado vazio…). Os cartões de especificação são os critérios de aceitação totalmente exaustivos para cada elemento, onde todos os comportamentos possíveis do elemento são explicados. As telas principais conterão a maioria das especificações e as variantes mostrarão apenas suas especificações específicas.

Agora, sempre que desenvolvemos um novo recurso, criamos uma nova ramificação no Figma e adicionamos os novos cartões de especificação em uma cor distinta ao lado dos novos elementos. Assim que o recurso for concluído, esses cartões de especificação serão transformados em seu estado “ativo” e a ramificação será mesclada com a principal. Isso mantém tudo limpo, atualizado e pronto para iniciar um novo recurso nas melhores condições possíveis.

Executando a migração completa

Atualizar as formas de trabalhar em um departamento de Tecnologia e Produto pode ser um desafio. Foi aí que surgiu o Qonto Way - a melhoria contínua está no centro da nossa cultura. Experimentamos novos métodos com um subconjunto da equipe e, se forem úteis, os implementamos em toda a equipe. Se não, nós os descartamos. Quando se trata de reformular nossa abordagem de especificações, começamos no nível da minha equipe e assumi a propriedade total da iniciativa com o apoio dos membros da equipe de Produto/Design/Tecnologia que estão diretamente envolvidos em seu uso. Idealmente, você deseja fazer a engenharia reversa de telas e especificações suficientes para cobrir o próximo recurso no qual trabalhará (eu fiz a engenharia reversa do escopo completo da minha equipe para que estejamos prontos para qualquer novo recurso que surja em nosso caminho).

Certifique-se de demonstrar sua experiência (positiva!) com esse novo recurso e não hesite em promover fortemente seus benefícios para outras pessoas para obter a adesão dos executivos de tecnologia e produtos.

Assim que demos o pontapé inicial, precisávamos atualizar a maneira como trabalhávamos em escala. Escrevemos um conjunto revisado de padrões, cada um voltado para uma equipe diferente: Tecnologia, Produto e Design, com uma propriedade claramente delineada para cada pilha.

Depois de atingir essa etapa, você pode criar seus novos recursos em especificações visuais, consolidando o conhecimento recurso após recurso. No entanto, você só obtém todos os benefícios de trabalhar dessa maneira depois de mapear todos os comportamentos. Dependendo da sua situação, há duas maneiras de iniciar o mapeamento em escala total (cada equipe pode decidir adotar uma abordagem ou outra):

• Congele a produção por alguns dias em cada equipe funcional e peça à sua equipe de tecnologia e designers para fazer a retroengenharia de todo o escopo existente. Este método tem vários benefícios: a equipe em questão obtém conhecimento total do domínio, incluindo novos participantes, e você fica 100% claro sobre como tudo funciona - sem mais pontos cegos.
• Faça retroengenharia apenas das peças que você planeja atualizar antes de criar um novo recurso. Isso garante que você não perca nada e possa começar a construir os novos elementos sobre essa nova fonte de verdade. A desvantagem dessa abordagem é que você nunca terá o quadro completo mapeado.

Nosso novo processo de especificações revolucionou a forma como trabalhamos, dando adeus ao código base “mergulho em cavernas”. Ao criar uma única fonte confiável para especificações e designs, criamos um espaço de trabalho fácil de usar, acessível a todos os membros da equipe e que fornece informações precisas e atualizadas em todas as nossas telas e histórias de usuários. Economizamos tempo, reduzimos o retrabalho, aceleramos a integração de novos membros e fornecemos uma visão mais abrangente de como tudo funciona em conjunto.

Qonto é uma solução financeira projetada para PMEs e freelancers fundada em 2016 por Steve Anavi e Alexandre Prot. Desde o nosso lançamento em julho de 2017, o Qonto facilitou o financiamento de negócios para mais de 350.000 empresas.

Os proprietários de empresas economizam tempo graças à configuração de conta simplificada do Qonto, uma experiência intuitiva do usuário no dia-a-dia com histórico de transações ilimitado, exportações contábeis e um recurso prático de gerenciamento de despesas.

Eles mantêm o controle enquanto podem dar mais autonomia às suas equipes por meio de notificações em tempo real e um sistema de gerenciamento de direitos do usuário.

Eles se beneficiam da visibilidade aprimorada do fluxo de caixa por meio de painéis inteligentes, marcação automática de transações e ferramentas de monitoramento de fluxo de caixa.

Eles também desfrutam de um excelente suporte ao cliente a um preço justo e transparente.

Interessado em ingressar em uma empresa desafiadora e revolucionária? Consulte as nossas ofertas de emprego !