Allu UI Kit + Redesign do E-commerce
Allu UI Kit + Redesign do E-commerce
Co-liderança do Design Kit Allu e implementação do rebranding no e-commerce principal.
Co-liderança do Design Kit Allu e implementação do rebranding no e-commerce principal.
PageSpeed mobile 29 → 89
+15 p.p. conversão produto→checkout
~50 componentes
2 squads
2 PMs
3 Designers
Contexto
Contexto
A Allu, maior plataforma de assinatura de eletrônicos da América Latina, precisava alinhar produto e marca após um rebranding ainda pouco traduzido na experiência. Eu co-liderei, com o design manager, a visão e a execução do design kit v1 e a implementação no e-commerce, coordenando duas squads (site e sistema interno) e stakeholders de Vendas, Marketing, CS, CX e C-level. A marca allu tinha sido recentemente lançada, mas os produtos digitais ainda não estavam adequados ao rebranding que a empresa tinhaconstruído.
A Allu, maior plataforma de assinatura de eletrônicos da América Latina, precisava alinhar produto e marca após um rebranding ainda pouco traduzido na experiência. Eu co-liderei, com o design manager, a visão e a execução do design kit v1 e a implementação no e-commerce, coordenando duas squads (site e sistema interno) e stakeholders de Vendas, Marketing, CS, CX e C-level. A marca allu tinha sido recentemente lançada, mas os produtos digitais ainda não estavam adequados ao rebranding que a empresa tinhaconstruído.
Desafios
Desafios
A experiência não refletia a nova identidade e sofria com inconsistências e baixa performance. O funil indicava queda relevante entre página de produto → checkout, mas faltava instrumentação para medir com precisão. Além disso, regras de negócio haviam evoluído e a jornada estava defasada, gerando “puxadinhos” operacionais (planilhas, processos manuais) e aumento de tickets em CS.
A experiência não refletia a nova identidade e sofria com inconsistências e baixa performance. O funil indicava queda relevante entre página de produto → checkout, mas faltava instrumentação para medir com precisão. Além disso, regras de negócio haviam evoluído e a jornada estava defasada, gerando “puxadinhos” operacionais (planilhas, processos manuais) e aumento de tickets em CS.
Evidências
Evidências
1
Hotjar + tagueamento por 3 semanas: abandono concentrado entre produto e checkout.
Hotjar + tagueamento por 3 semanas: abandono concentrado entre produto e checkout.
2
PageSpeed (mobile) antes do trabalho: 29/100.
PageSpeed (mobile) antes do trabalho: 29/100.
3
Sinais qualitativos de Vendas/Marketing/CS: dúvidas sobre o serviço e falta de funcionalidades de acompanhamento.
Sinais qualitativos de Vendas/Marketing/CS: dúvidas sobre o serviço e falta de funcionalidades de acompanhamento.
Estratégia
Estratégia
Medir primeiro, redesenhar a jornada com Marketing/Vendas, alinhar a marca com o C-level (tipografia Plus Jakarta Sans, UX writing, cores) e entregar um design kit v1 pragmático (~50 componentes), documentado e integrado a uma esteira conjunta com Engenharia.
Medir primeiro, redesenhar a jornada com Marketing/Vendas, alinhar a marca com o C-level (tipografia Plus Jakarta Sans, UX writing, cores) e entregar um design kit v1 pragmático (~50 componentes), documentado e integrado a uma esteira conjunta com Engenharia.
O que decidimos... e por quê
O que decidimos... e por quê
Instrumentar o funil antes de redesenhar (Hotjar + tagging)
Instrumentar o funil antes de redesenhar (Hotjar + tagging)
Antes de qualquer wireframe, colocamos Hotjar e um plano de tagueamento no funil de vendas, por 3 semanas. Isso nos deu cliques, heatmaps e taxas de abandono por etapa. Precisávamos de um mapa objetivo do que estava quebrando entre página de produto → checkout.
Se não fizéssemos isso, teríamos o risco gastar o trimestre polindo partes que não eram gargalo. Após análise descobrimos que as maiores quedas concentravam-se na página do produto (entendimento do serviço) e no checkout (bugs e feedback insuficiente). A partir daí, priorizamos microcopy, estados e performance nessas telas.
Antes de qualquer wireframe, colocamos Hotjar e um plano de tagueamento no funil de vendas, por 3 semanas. Isso nos deu cliques, heatmaps e taxas de abandono por etapa. Precisávamos de um mapa objetivo do que estava quebrando entre página de produto → checkout.
Se não fizéssemos isso, teríamos o risco gastar o trimestre polindo partes que não eram gargalo. Após análise descobrimos que as maiores quedas concentravam-se na página do produto (entendimento do serviço) e no checkout (bugs e feedback insuficiente). A partir daí, priorizamos microcopy, estados e performance nessas telas.
Trocar a tipografia (Denton/Chillax → Plus Jakarta Sans) para leitura e coerência de marca
Trocar a tipografia (Denton/Chillax → Plus Jakarta Sans) para leitura e coerência de marca
Alinhamos com CEO/COO (fundadores) que a dupla anterior não entregava legibilidade e tom. Migramos para Plus Jakarta Sans e atualizamos a escala tipográfica. Com essa mudança, conseguimos criar fluidez e hierarquia que ajudariam na visualização sobre o serviço de assinatura, que já é menos intuitivo que o processo de compra convencional.
Alinhamos com CEO/COO (fundadores) que a dupla anterior não entregava legibilidade e tom. Migramos para Plus Jakarta Sans e atualizamos a escala tipográfica. Com essa mudança, conseguimos criar fluidez e hierarquia que ajudariam na visualização sobre o serviço de assinatura, que já é menos intuitivo que o processo de compra convencional.
Design kit v1 antes de tokens/temas completos
Design kit v1 antes de tokens/temas completos
Entregamos um kit funcional v1 com componentes prioritários, paleta, tipografia e UX writing, documentados. Tínhamos prazo de 1 trimestre. Em vez de construir um DS “perfeito” com tokens/temas desde o dia 1, focamos no 80/20 que destravaria entrega e consistência agora. Tokens e theming viriam depois.
Entregamos um kit funcional v1 com componentes prioritários, paleta, tipografia e UX writing, documentados. Tínhamos prazo de 1 trimestre. Em vez de construir um DS “perfeito” com tokens/temas desde o dia 1, focamos no 80/20 que destravaria entrega e consistência agora. Tokens e theming viriam depois.
Back-end primeiro e Dev dedicado para a ponte com Design
Back-end primeiro e Dev dedicado para a ponte com Design
Começamos pelo back-end (rotas e integrações), em paralelo ao kit v1. Destinamos um dev focado em componentes, com canal direto com design. Isso garantiu que, quando o kit ficasse pronto, houvesse infra para o rollout rápido (menos “espera” de uma parte pela outra).
Começamos pelo back-end (rotas e integrações), em paralelo ao kit v1. Destinamos um dev focado em componentes, com canal direto com design. Isso garantiu que, quando o kit ficasse pronto, houvesse infra para o rollout rápido (menos “espera” de uma parte pela outra).
Solução
Solução
Design kit v1
Design kit v1
Readequação dos produtos digitais de acordo com o rebranding feito pela allu;
Readequação dos produtos digitais de acordo com o rebranding feito pela allu;
Biblioteca com componentes mais usados com estados e variantes. Documentação e exemplos de uso, além de UX writing padrão;
Biblioteca com componentes mais usados com estados e variantes. Documentação e exemplos de uso, além de UX writing padrão;
Efeito: menos divergência entre squads, handoff mais rápido, e base pronta para tokens/temas na sequência.
Efeito: menos divergência entre squads, handoff mais rápido, e base pronta para tokens/temas na sequência.
Guidelines de contribuição/uso
Guidelines de contribuição/uso
Regras simples de adoção, versionamento e contribuição (quando criar vs. estender), para que o kit não virasse “só um arquivo bonito”;
Regras simples de adoção, versionamento e contribuição (quando criar vs. estender), para que o kit não virasse “só um arquivo bonito”;
Alinhamento semanal do time de design + dev dedicado garantindo que o que estava no Figma existia, de fato, no código.
Alinhamento semanal do time de design + dev dedicado garantindo que o que estava no Figma existia, de fato, no código.
Nova jornada com foco na transição produto → checkout
Nova jornada com foco na transição produto → checkout
Reescrevemos a PDP com blocos de o que é, como funciona, custos & regras, o que acontece depois;
Reescrevemos a PDP com blocos de o que é, como funciona, custos & regras, o que acontece depois;
Criamos feedbacks de estado e passos visíveis no checkout: o usuário sabe “onde está” e “o que falta”.
Criamos feedbacks de estado e passos visíveis no checkout: o usuário sabe “onde está” e “o que falta”.
Aplicação no e-commerce e início de migração no sistema interno
Aplicação no e-commerce e início de migração no sistema interno
Priorizamos o e-commerce (canal de receita), e iniciamos a migração do sistema interno para reduzir o custo de manutenção do legado.
Priorizamos o e-commerce (canal de receita), e iniciamos a migração do sistema interno para reduzir o custo de manutenção do legado.
Resultados
Resultados
89
89
PageSpeed
PageSpeed
15 p.p.
15 p.p.
Conversão Produto → Checkout
Conversão Produto → Checkout
100%
100%
Cobertura DS v.1 no site
Cobertura DS v.1 no site
Checkout
Checkout
Durante o primeiro trimestre de uso da nova versão do site, não tivemos ganho expressivo imediato de taxa, porém identificamos que ticket médio para os produtos de maior valor aumentaram consideravelmente, o que me fez criar uma nova hipótese de que a confiança/brand lift pode ter causado este aumento.
Durante o primeiro trimestre de uso da nova versão do site, não tivemos ganho expressivo imediato de taxa, porém identificamos que ticket médio para os produtos de maior valor aumentaram consideravelmente, o que me fez criar uma nova hipótese de que a confiança/brand lift pode ter causado este aumento.
O que este projeto possibilitou
O que este projeto possibilitou
Após o lançamento, conseguimos padronizar a primeira versão oficial da marca allu, que possibilitou uma grande mudança na forma como a empresa se comunicou para os clientes e para os colaboradores. Do ponto de vista de Design, o projeto foi importante para definir como os componentes se comportariam na primeira versão e criou a visão do como os produtos digitais da allu deveriam ser construídos.
Para a evolução do produto, nos semestres seguintes, foi possível construir versões atualizadas dos componentes e de funcionalidades que viera a ser construídas depois, como a Área do Cliente, o Controle de Assinaturas e o Acompanhamento de Entrega.
Após o lançamento, conseguimos padronizar a primeira versão oficial da marca allu, que possibilitou uma grande mudança na forma como a empresa se comunicou para os clientes e para os colaboradores. Do ponto de vista de Design, o projeto foi importante para definir como os componentes se comportariam na primeira versão e criou a visão do como os produtos digitais da allu deveriam ser construídos.
Para a evolução do produto, nos semestres seguintes, foi possível construir versões atualizadas dos componentes e de funcionalidades que viera a ser construídas depois, como a Área do Cliente, o Controle de Assinaturas e o Acompanhamento de Entrega.
