Como a ASOS agiliza os fluxos de trabalho de design com o Figma

A varejista de moda e cosméticos ASOS se tornou o destino preferido de pessoas na casa dos 20 anos em todo o mundo. E não é por acaso. Os consumidores podem escolher entre uma seleção extensa de 900 marcas, incluindo as marcas próprias da ASOS, como ASOS Design, Topshop, Topman e Collusion.

A ASOS também é conhecida por sua experiência do cliente leve e sem atritos, com devoluções fáceis e uma experiência consistente de ponta a ponta em diferentes dispositivos, sites desktop e dispositivos móveis, além de apps para Android e iOS.

Além disso, operando em 10 idiomas e mais de 200 mercados, a ASOS oferece suporte a formas de pagamento globais e proporciona aos usuários uma experiência localizada.

Como dá para imaginar, o design desempenha um papel enorme em tudo o que a ASOS faz — e foi isso que a levou ao Figma. Com isso, a ASOS simplificou seu design system, reduziu custos, adotou ferramentas e processos mais sofisticados e ampliou a colaboração em toda a empresa.

Oportunidades únicas de mercado da moda online

O setor de e-commerce de moda cresceu rapidamente durante a pandemia e continua a amadurecer com avanços globais em tecnologia e logística.

Os consumidores adoram a conveniência e a rapidez do e-commerce, com preços competitivos, ofertas online e experiências de compra personalizadas e multicanal. Eles também usam as redes sociais para moldar marcas e influenciar uns aos outros, o que pode fazer com que produtos se tornem virais.

Kate Brook-Hart, Head de Design de Produto da ASOS, afirma que, por isso, olhar para todo o ciclo de vida do produto digital — antes, durante e depois da experiência de compra — é essencial. E sua equipe garante que esses pontos de contato sejam representados ao longo dos processos de descoberta e design. Ter um design system robusto é fundamental para isso.

Uma equipe de design altamente conectada

A equipe de Design de Produto da ASOS é formada por mais de uma dúzia de designers de todos os níveis, incluindo júnior, pleno, sênior e lead.

• Os designers de produto fazem parte da equipe de produtos digitais, que colabora de perto com mais de 25 Gerentes de Produto, com o apoio de dois Gerentes de Operações de Produtos.
• Cada designer atua em uma área específica do produto, como Aquisição e Engajamento, Compras, Pagamentos, Checkout e Pós-compra, além de equipes de missão específicas, como Face + Corpo, Roupas Esportivas ou Estudantes.
• Eles trabalham em estreita colaboração com engenheiros, arquitetos e engenheiros de QA em diversas equipes de plataforma para idealizar, construir, testar, experimentar e lançar novas funcionalidades.

Também fazem parte da equipe Jack Marsden, Designer de Produto Líder na área de Checkout, e Sean Conlon, Designer de Produto que também atua no Checkout.

Desde que entrou para a ASOS em abril de 2022, Sean se especializou em design de ponta a ponta, da pesquisa à criação de designs de alta fidelidade. Ele diz: “O que me motiva é o impacto que você pode causar na ASOS como designer. Seus designs serão usados por milhões de pessoas ao redor do mundo e podem ter um impacto significativo no desempenho do negócio. Isso é realmente recompensador!”

Há também uma especialista em acessibilidade na equipe de Kate, Tzveta Dinova, que se dedica a apoiar Diversidade e Inclusão, tanto interna quanto externamente. “Queremos garantir que qualquer nova funcionalidade seja inclusiva para todos os clientes, por isso dedicamos muito tempo a ouvir os usuários e a criar uma documentação de design focada em acessibilidade em cada projeto”, afirma Tzveta.

Uma das características únicas da ASOS é a colaboração próxima entre designers de produto, gerentes de produto e uma ampla variedade de envolvidos em toda a empresa, organizados em três equipes principais: Tecnologia & Dados, Comercial & Cliente e Pessoas & Operações.

Consolidando 3 ferramentas em uma só com o Figma

Antes de iniciar sua jornada com o Figma, a ASOS utilizava três ferramentas principais: uma para design, outra para gerenciamento de arquivos e colaboração e uma terceira para prototipagem. Essa configuração apresentava diversos pontos problemáticos tanto para desenvolvedores quanto para seus colaboradores.

Isso significava que eles precisavam usar três ferramentas diferentes para design, prototipagem e handoff para desenvolvimento. Além disso, alternar entre variantes de componentes era difícil, pois exigia salvar e fechar arquivos, o que tornava a ideação e o design lentos e ineficientes. “Trazer componentes do design system, fazer alterações em tempo real ou simplesmente abrir um arquivo parecia um pouco como correr na lama”, explica Jack.

Eles também precisavam configurar coleções separadas de links e arquivos para obter feedback dos envolvidos, para que engenheiros pudessem acessar os designs. E, por fim, o processo usado para acessar e atualizar arquivos era lento, com designers precisando criar ramificações e fazer commit. Os designs não eram atualizados em tempo real, e o acesso remoto não era uma opção.

Introdução e decolando com o Figma

Migrar para o Figma foi uma etapa essencial que os designers de produto de todos os níveis solicitaram e atuaram como embaixadores dessa mudança

Kate lembra, “A primeira vez que usei o Figma foi durante a Covid. Nós nunca tínhamos experimentado a ferramenta antes, mas foi um momento de ‘agora ou nunca’, quando todos estávamos trabalhando de casa e não tínhamos o benefício da interação presencial. Pensei: 'Ele tem colaboração em tempo real. Vamos só tentar'. Em dois dias, eu já estava totalmente integrada ao Figma.”

O Figma resolveu um problema único para os designers da ASOS. Havia tantas equipes colaborando e envolvidas no desenvolvimento de produtos digitais, incluindo comercial, estúdios e merchandising, que o compartilhamento de arquivos era um grande problema. O Figma permitiu que eles compartilhassem links que permaneciam os mesmos, mesmo que o arquivo fosse movido. Isso foi um divisor de águas.

Atualmente, designers de produto são os principais editores no Figma, mas é fácil para outras pessoas da empresa visualizar arquivos e colaborar, com acesso seguro por login único ao Figma.

Esses usuários incluem áreas de engenharia, produto, marketing, marca, trade e comercial - além de pessoas de RH, finanças, auditoria e equipes de logística e entregas. No Figma, eles podem colaborar simultaneamente com a equipe de produto, economizando tempo, dinheiro e esforço.

Hoje, o Figma desempenha um papel central em todos os tipos de projetos digitais ao longo de toda a experiência do cliente, além de experiências internas, como quando a equipe de software interna do estúdio cria recursos internamente.

5 maneiras pelas quais o Figma melhorou a vida na ASOS

1. Velocidade do design

• Antes do Figma, o uso de várias ferramentas significava que os processos de design não eram uniformes. Tudo era armazenado localmente e depois enviado para uma plataforma de compartilhamento de arquivos.
• O Figma ajuda a acelerar o design, já que é baseado na nuvem, rápido e oferece a capacidade de inserir e remover elementos do design com recursos como o layout automático.

2. Prototipagem

• Antes do Figma, a prototipagem exigia uma ferramenta separada para criar protótipos realistas e compartilhar links para testes de usuário.
• O Figma pode criar protótipos com fidelidade e permite atualizações rápidas, o que economiza tempo e dinheiro na fase de testes de usuário.

3. Colaboração

• Anteriormente, os arquivos de design eram compartilhados por e-mail e o feedback exigia várias etapas.
• O Figma viabilizou o compartilhamento de links únicos para facilitar a colaboração e o feedback direto, transformando as revisões de design e garantindo consistência, além de permitir que envolvidos do negócio deixem comentários de forma simples e direta.

4. Design system

• Antes do Figma, o design system da ASOS era fragmentado.
• Com o Figma, designers que trabalham no design system conseguem usá-lo e mantê-lo com facilidade, além de implementar componentes da biblioteca em seus designs.

5. Apresentações

• Antes do Figma, apresentar protótipos nem sempre era simples.
• As capacidades de prototipagem do Figma permitem que designers apresentem protótipos em contexto, dando vida às suas apresentações.

Figma gera resultados concretos para a ASOS

O Figma permitiu que a ASOS consolidasse três ferramentas em uma só. Isso simplificou o fluxo de trabalho de design, poupou muitas horas de trabalho da equipe e resultou em economia de custos para a empresa.

O Figma também ampliou a colaboração entre designers, gerentes de produto e engenheiros, dando à ASOS a oportunidade de atualizar e aprimorar seu design system e mantê-lo alinhado com as ferramentas de design mais recentes - o que ajuda a atrair novos talentos.

De modo geral, afirma Kate, o Figma tornou a colaboração, a produtividade e as apresentações muito mais fáceis entre designers e entre envolvidos de toda a empresa. “Isso resultou em designs finais de maior qualidade, o que também tornou o handoff para os desenvolvedores muito mais fluido, aproximando designers e desenvolvedores em toda a organização.”