Como a Volkswagen Group Services GmbH usou Figma e FigJam para superar o gap de comunicação entre design e engenharia

A Volkswagen Group Services, uma empresa do Grupo Volkswagen sediada em Wolfsburg, Alemanha, oferece uma gama de serviços para as marcas da Volkswagen, desde Pesquisa e Desenvolvimento (P&D) até compras. A equipe de Serviços de Desenvolvimento de Negócios tem uma missão super estratégica: criar novos modelos de negócios, traduzi-los em produtos e prepará-los para entrar em novos mercados.

Projetos robustos como este exigem muita colaboração entre equipes multidisciplinares, e não é fácil fazer com que todos estejam na mesma página. Havia outra complicação: a Volkswagen Group Services havia recentemente começado a experimentar mais flexibilidade nos locais e horários de trabalho.

Então, quando começaram um grande projeto, eles queriam descobrir uma nova maneira de colaborar que evitasse os problemas usuais que afetam a construção de produtos. Com Figma e FigJam, eles conseguiram exatamente isso.

O Figma e o FigJam fazem a ponte entre o design e a engenharia na comunicação

A Volkswagen Grupo Services assumiu a missão de construir uma plataforma de cliente para cliente que ajuda as pessoas a alugar espaços de armazenamento. A ideia era construir um marketplace onde os usuários possam tanto listar espaços de armazenamento disponíveis quanto buscar soluções de armazenamento em todo o país.

"Nosso objetivo é construir uma rede global para empresas de todos os setores, cuja criação de valor dependa da logística." – Stefanos Tsoutis, Venture Builder e Mentor de Negócios na Worage, Volkswagen grupo Services.

Mas primeiro, eles precisavam projetar e construir um MVP para a nova plataforma enquanto definiam os elementos da marca — e o modelo de negócio principal. Isso exigiu contribuições significativas de suas equipes de design, experiência do usuário, experiência do cliente e engenharia.

“O resultado pretendido era construir um modelo de negócios e produto escalável do zero, estabelecer uma marca no mercado, lançar um MVP e iterar continuamente o produto e o modelo de negócios.” – Simon Elvers, Intraempreendedor e Proprietário do Produto @Worage, Volkswagen Group Services.

Com tantas pessoas envolvidas, seria fácil cometer erros — e caro corrigi-los. A Volkswagen Group Services precisava aperfeiçoar a transição entre as equipes de design e engenharia.

A equipe de design criou um protótipo do aplicativo no Figma, incluindo um design system, páginas detalhadas e animações. Eles também mapearam meticulosamente cada operação e condição que impacta o fluxo, fornecendo um guia visual para desenvolvedores, designers e envolvidos.

“O desafio era criar uma visualização do aplicativo e um entendimento comum de como a plataforma funcionará em termos de fluxo, transferência de dados e garantia de qualidade.” – Hendrik Surma, Arquiteto de Software Líder na Worage, Volkswagen Group Services.

Foi um ótimo começo, mas os líderes do projeto precisavam de uma maneira de usar o quadro branco para o pensamento inicial entre as equipes e obter feedback. E para fazer isso, eles precisavam de comunicação ao vivo significativa entre diferentes locais. O quadro branco colaborativo online do Figma, FigJam, fez o trabalho, conectando perfeitamente as telas com usuários em diferentes locais. Engenheiros puderam opinar desde cedo, identificando desafios operacionais que impactariam a funcionalidade para que pudessem trabalhar juntos em busca de soluções. Essa colaboração lado a lado evitou uma série de problemas.

Usar o FigJam junto com o Figma também introduziu maneiras inovadoras de visualizar o design do produto. A equipe documentou fluxos de usuários complexos no FigJam e os conectou aos arquivos, páginas e quadros principais do Figma, facilitando para diferentes equipes entender os fluxos e acessar mais detalhes.

“A visualização usando FigJam e Figma desempenhou um papel crucial em alinhar designers, desenvolvedores, donos de produtos e envolvidos, promovendo um entendimento compartilhado das complexidades do projeto.” – Laura Lake, Designer de Produto em uma posição de liderança na Worage, Volkswagen Group Services.

Superando o gap de engenharia/comunicação

A combinação da representação visual da interação do produto com a documentação incorporada permitiu que os engenheiros entendessem precisamente como as informações se movem entre diferentes fontes e destinos de dados. Isso lhes permitiu otimizar processos e minimizar a necessidade de solicitações ao servidor — mantendo os custos operacionais baixos.

Os designers também usaram visualizações para construir uma experiência do usuário consistente e refinada. Eles puderam ver quais interações foram acionadas por diferentes chamadas para ação, para localizar telas ausentes e identificar rapidamente áreas que precisavam de refinamento.

A equipe de gestão de projetos também se beneficiou. Tipicamente, o acompanhamento da gestão de projetos de alto nível da Volkswagen Group Services era apenas um ponto de referência — as pessoas têm que interpretar com precisão as tarefas e, em seguida, descobrir onde ir para obter contexto e recursos. Desta vez, a equipe da Volkswagen Group Services usou o plugin Figma Atlassian Suite Integration JIRA para vincular tickets de gestão de projetos a telas e recursos específicos. Foi um avanço em eficiência.

Anteriormente, o link para as telas tinha que ser copiado manualmente para os Tickets do JIRA, tornando tedioso para os Devs, que tinham que alternar entre JIRA, Figma e VS Code. A nova integração do JIRA tornou todo o contexto relevante necessário facilmente acessível. Isso permitiu que os proprietários de produtos, desenvolvedores e gerentes de projetos monitorassem facilmente o status de componentes e funcionalidades individuais, agilizando ainda mais a gestão de projetos.

Os proprietários de produtos consideraram as visualizações um atalho para tomar decisões informadas sobre quais recursos e funcionalidades priorizar. No geral, essa abordagem integrada foi melhor do que usar ferramentas que não se conectavam. As visualizações eram uma maneira intuitiva para as equipes refinarem sua visão e comunicarem os detalhes a todos que estavam dando vida ao Worage.

O Dev Mode melhora o handoff do designer para o desenvolvedor

Muitos dos desafios no handoff foram resolvidos em 2023 com a introdução do Dev Mode no Figma - um espaço no Figma com recursos que ajudam designers e desenvolvedores a traduzir designs em código, mais rapidamente. Ele apresenta um playground de componentes que permite à equipe de engenharia da Volkswagen Group Services visualizar diferentes componentes e suas variações antes do desenvolvimento, eliminando incertezas em torno do comportamento dos componentes.

Na seção de Recursos, os desenvolvedores da Volkswagen Group Services podem facilmente baixar ícones, imagens e vídeos para telas relevantes, eliminando a necessidade de trocar pacotes de Recursos adicionais. Isso centraliza tudo, tornando telas e páginas prontas para dev uma fonte definitiva tanto para designers quanto para desenvolvedores.

A equipe da Volkswagen Group Services descobriu que o novo modo de comparação reduzia bugs de desenvolvimento ao mostrar claramente as mudanças feitas nas telas, eliminando suposições e sobrecarga cognitiva para a equipe dev, economizando tempo. E a capacidade de extrair programar para elementos em vários idiomas facilitou a inspeção e implementação pela equipe dev, economizando tempo e reduzindo erros.

No geral, a Volkswagen Group Services descobriu que o Dev Mode incentivou a colaboração ao reduzir significativamente o atrito nas transferências entre designers e desenvolvedores.

“Usamos a colaboração como uma ferramenta para inovar e agregar valor às nossas ideias. E o Figma capacita essa colaboração em nossa equipe de forma perfeita. “É uma configuração incrível!” – Parth Pandya, Product Designer e embaixador do Figma, Volkswagen Group Services.

Ampliando a visão do Worage com o Figma.

O projeto Worage está em andamento e se preparando para ajudar pequenas empresas a acessar o espaço de armazenamento de que precisam. Ele será lançado no final de 2024.

“A clareza da autoridade de tomada de decisão e o feedback regular podem ter um impacto mensurável em nossos KPIs de experiência do cliente (CX). A combinação do Figma e FigJam nos ajudou a nos comunicar melhor com todos os envolvidos desde o início do processo de design. Esse alinhamento criou um produto centrado no cliente, de maior fidelidade, ajudou-nos a passar para a produção mais rapidamente e de forma mais econômica”, diz Sandra Schaus, Especialista Líder em UX, Volkswagen Group Services.