Em boa companhia: Como os varejistas usam o Figma para elevar o comércio digital

Seja promovendo economias circulares ou traduzindo através de diferentes pontos de contato digitais, o mundo do e-commerce tornou-se mais sofisticado. Para construir confiança, facilitar uma jornada do cliente tranquila e contar uma história de marca coesa, uma experiência digital consistente — e atraente — é essencial.

Conversamos com equipes de marcas líderes para aprender como estão atingindo esses objetivos e evoluindo seus processos com o Figma. Aqui, estamos compartilhando como a Nuuly lida com a logística do aluguel de roupas, como a Ruggable conecta seus pontos de contato de e-commerce e marketing, e como a Design Business Company trabalhou lado a lado com o GitHub para construir uma loja voltada decididamente para desenvolvedores.

Como a Nuuly simplifica a experiência do usuário no aluguel de roupas

Enquanto algumas empresas normalizaram alugar roupas para ocasiões especiais, novos players como Nuuly, lançado em 2019, tentam tornar isso comum no dia a dia. "Nuuly celebra a ideia de mudança", diz Laura Petrini, Diretora de Experiência do Usuário na Nuuly. "Oferecemos aos clientes a chance de renovar seu estilo, para que se expressem e sejam criativos com seu guarda-roupa."

Para cumprir essa promessa, a Nuuly desenvolveu uma experiência de aluguel perfeita que os assinantes passaram a conhecer e amar. Como os serviços de assinatura de roupas ainda são recentes, a Nuuly também desenvolveu sua própria tecnologia para gerir o outro lado do aluguel: gestão de estoque circular, limpeza e reparos. Isso significou criar dois design systems do zero - um para os clientes e outro para a logística de aluguel - ambos com objetivos únicos e com uma empresa em expansão em mente. "Estabelecemos nosso design system com tokens de cor e tipografia que podem ser facilmente trocados, dando à marca espaço para crescer à medida que as estações mudam - assim como damos aos nossos clientes espaço para flexibilizar seu estilo", diz Laura.

Embora a tecnologia subjacente à logística de aluguel seja complexa, o objetivo da Nuuly é torná-la o mais simples possível para os clientes se adaptarem a uma nova forma de comprar. “Reduzimos as experiências à forma mais simples e intuitiva”, diz Laura. Por exemplo, o recurso My Nuuly no site representa a bolsa Nuuly de um cliente e os guia por mais de 26 status de aluguel possíveis — desde o que acontece agora até o que esperar a seguir.

Gerenciar e escalar os design systems por trás de toda essa complexidade levou a equipe a adotar o Figma em 2023. "Nossos design systems originais foram divididos devido a restrições de tamanho de arquivo, e como precisavam ser sincronizados com nosso servidor, o desempenho era lento", diz Erica Benamy, Designer Principal de UX na Nuuly. "Acabamos gerenciando um total de 16 arquivos. Aproveitamos a migração para o Figma como uma oportunidade de consolidar e reconstruir em duas bibliotecas Figma simples."

A utilização do Figma acelerou significativamente os fluxos de trabalho. "Estamos desenhando em um ritmo muito mais rápido", diz Erica. Usar as ferramentas de prototipagem nativas do Figma também ajudou os designers a comunicar melhor os padrões de interação esperados com os desenvolvedores durante o handoff de Design, ela diz: "Isso nos tornou muito mais ágeis e realmente afinados uns com os outros como organização."

A migração de UX da Nuuly para o Figma levou outros departamentos a fazerem o mesmo. As equipes de Design de conteúdo e fotografia de estúdio agora projetam no Figma junto com a equipe de UX. E com ferramentas de colaboração como FigJam e Figma Slides, a ampla equipe da Nuuly também aderiu para colaborar, fazer brainstorm e revisar melhorias na jornada do cliente, como a The Thrift Shop, que dá aos assinantes acesso a estilos de venda final que não precisam alugar para comprar.

Para os clientes da Nuuly, isso significa aprimoramentos mais rápidos e inovação em sua experiência. Para a equipe da Nuuly, significa mais tempo gasto em colaboração, exploração criativa e o tipo de pensamento de design centrado no cliente que ajuda a fomentar o relacionamento que a Nuuly tem com seus assinantes.

Como a Ruggable garante superfícies digitais consistentes

Quando a Diretora de Design de Produto UX, Alicia Clapper, se juntou à Ruggable há seis anos, ela foi lançada em vários fluxos de trabalho paralelos e isolados. Isso levou a experiências discordantes em suas plataformas digitais — desde anúncios em mídias sociais, à página inicial, até páginas de detalhes do produto — e, portanto, a uma jornada do cliente desconexa. Como muitas vezes leva 10 dias ou mais para os compradores da Ruggable comprarem um tapete após a navegação, construir consistência entre todos esses pontos de contato era fundamental — principalmente em um contexto cada vez mais competitivo.

"Historicamente, a equipe de UX e e-commerce havia sido bastante separada da marca e do criativo", diz Alicia. Uma campanha social apresentaria um conjunto de imagens, enquanto o site aproveitaria outro. "Realmente nunca tivemos muito insight sobre o que eles estavam fazendo, e vice-versa, até que as coisas fossem ao ar."

Isso foi, em parte, porque o trabalho deles estava disperso por várias ferramentas, depois compartilhado manualmente no Google Drive. Sem uma biblioteca centralizada de componentes, elementos como cores, estilos de fonte, botões e rodapés eram difíceis de gerenciar. "Estávamos simplesmente copiando e colando de uma página para outra e editando-os com base no projeto e conteúdo," diz Alicia. "Era muito manual, e criava muito espaço para erros de um projeto para outro. O controle de versão era inexistente, então realmente tivemos que nos certificar de que estávamos copiando os arquivos mais recentes. Eu nem sei se eu categorizaria isso como 'gerenciar' um design system."

Há cinco anos, a equipe de UX iniciou uma migração para o Figma para alinhar as coisas. Agora, eles conseguem criar Designs, protótipos e testar novos Designs, tudo em um só lugar. Além disso, passar do Design para o desenvolvimento é 10 vezes mais rápido do que antes graças ao Dev Mode. Em vez de criar anotações manualmente, os designers podem marcar uma caixa para preparar os arquivos. “A sensação foi: ‘Isto é perfeito. "Não precisamos de mais nada.’” Alicia diz. Agora, há menos idas e vindas entre designers e desenvolvedores, e está claro qual versão de um design é a mais atualizada.

Após serem convidados para como colaboradores no Figma, as equipes de Marca, Criativo, Retenção e Aquisição da Ruggable também se juntaram à plataforma. "Conseguimos envolver a equipe de criação compartilhando links facilmente e permitindo que comentassem qualquer detalhe que considerassem mais alinhado com a marca", diz Alicia. "A facilidade de atualizar e implementar nosso design system no Figma após a nossa reformulação de 2024 inspirou outras equipes a quererem usá-lo. Isso foi um grande catalisador para uma adoção mais ampla." Agora, Alicia traz várias equipes para o FigJam para reuniões interfuncionais e sessões de brainstorm, também. "Um dos nossos gerentes de produto até comentou o quão divertidas, envolventes e produtivas são as reuniões", ela observa.

Esse novo padrão de engajamento e colaboração tem sido essencial para criar uma experiência consistente para o cliente, o que é crucial para a construção da marca. "Há uma familiaridade que se conecta com as pessoas", diz Alicia. "E isso realmente fortalece a confiança com a marca e permite que encontrem o que estão procurando e façam a compra."

Como o GitHub e a Design Business Company encantam os desenvolvedores

Como uma amada plataforma de desenvolvedores, o GitHub viu uma oportunidade de usar sua Loja online tanto para amplificar a marca quanto para construir comunidade. Para realizar isso, o GitHub formou uma equipe com o estúdio criativo Design Business Company para criar uma experiência de compras marcante no Shopify, que oferece colecionáveis relacionados a codificação, vestuário e produtos de estilo de vida. O projeto exigiu um novo design system, mercadorias com marca, fotografia de produto e embalagem, tudo realizado no Figma. A reformulação não só poupou a equipe do GitHub de fazer atualizações manuais trabalhosas na loja, como também abriu espaço para brincadeiras na forma de "Easter eggs" centrados no desenvolvedor, que dizem muito sobre a identidade da marca do GitHub.

Fundada por Stewart Scott-Curran, Judson Collier e Jordan Egstad, a DBCo realiza a incorporação nas equipes de clientes para cada projeto, mudando o antigo modelo de agência que dominava a indústria do Design. Em vez de apresentar ideias a cada poucas semanas ou meses, a DBCo oferece visibilidade sobre o que e como está projetando para criar uma conversa contínua com seus clientes, que geralmente são startups em estágio inicial e intermediário que esperam fluxos de trabalho ágeis e altamente responsivos. "Os clientes podem nos ajudar a corrigir a direção muito mais rapidamente", diz Jordan. "Isso é uma enorme economia de tempo."

Assim que um projeto começa, a DBCo convida os clientes para um mood board compartilhado no Figma, onde todos podem deixar ideias e comentários. "Essa é nossa primeira linha de defesa quando se trata de coletar feedback por causa do contexto e da granularidade que isso nos proporciona", diz Judson. A reformulação da loja envolveu mais de duas dezenas de pessoas, incluindo envolvidos das equipes de Loja, Marca, Design e Web do GitHub, bem como consultores de acessibilidade. Mapear tudo no arquivo significava que esses colaboradores poderiam facilmente entrar em qualquer ponto e se orientar no projeto.

Após a fase de brainstorming, era hora de construir o design system. Para agilizar o processo, a DBCo começa com uma base universal que construiu chamada design system Construct, que é configurada com variáveis do Figma. Como estrutura inicial, o Construct atinge “o ponto ideal entre ter um sistema estruturado o suficiente para ser útil e ter restrições excessivas”, diz Jordan, que conta que ele condensa o trabalho de um dia e meio em apenas 30 minutos.

O protótipo também foi uma parte essencial do processo, especialmente quando se tratava de dar vida às páginas do produto. Esses Designs geralmente envolviam oito variantes - desde o tamanho, à cor, até a personalização - que exigiam uma UI condicional e "momentos nerds e idiossincráticos de desenvolvedores", como Jordan descreve. Quando alguém insere o Código Konami, por exemplo, as imagens do site se transformam em arte ASCII. "Os desenvolvedores usam palavras e letras como ferramentas, então pensamos: 'Precisamos encontrar uma maneira de animar e dar vida a essas palavras'", ele diz. "Chegamos a diferentes estudos de movimento e os colocamos em protótipos para que pudéssemos realmente ter uma noção de como a interface responderia com diferentes transições, estados de hover de botões, e coisas do tipo. Ajudar o GitHub a visualizar os designs e fazer com que eles parecessem tangíveis foi realmente útil para chegar a uma decisão."

No final, poder colaborar tão de perto com várias equipes no mesmo arquivo levou a uma experiência de varejo coesa, desde a navegação até o checkout e a entrega, para o público altamente exigente do GitHub. "Desenvolvedores são bons detectores de besteiras", diz Judson. "Fomos desafiados a garantir que estávamos sendo autênticos na forma e no trabalho dos desenvolvedores porque, seja o que for que fizéssemos, queríamos fazer com um padrão muito alto."

O comércio eletrônico hoje é muito mais do que levar um cliente a clicar em “adicionar ao carrinho”. À medida que o mercado cresce, experiências digitais excepcionais para todos os passos da jornada do cliente, desde o reconhecimento da marca até a compra propriamente dita, se tornarão mais importantes. Criar espaço para que as equipes possam fazer brainstorm de ideias ambiciosas, prototipá-las rapidamente e apresentá-las aos clientes é essencial. Saiba mais sobre como as equipes estão usando o Figma, e entre em contato para uma demonstração.