← Voltar para o início

E-commerce redesign

Otimização da experiência de compra com foco no design mobile-first e criação de um sistema de gerenciamento

Período do projeto - 2 semanas

Ferramentas - Figma, FigJam, Mobbin, Notion

Time - 1 Designer, 1 Product Manager, 4 Developers

Minha função - UX Research, UX Design, UI Design

Problema

Apesar de mais de 80% do tráfego da loja vir de celulares, a taxa de conversão era 50% inferior à de computadores e notebooks. O e-commerce enfrentava problemas de responsividade, resultando em uma navegação mobile lenta, confusa e com diversos erros de diagramação.

Solução

O redesign do e-commerce focou em uma abordagem mobile-first para otimizar a usabilidade em celulares. Adotando princípios de responsividade, o site agora se ajusta perfeitamente a diferentes tamanhos de tela, facilitando a navegação e a experiência de compra.

Processo de Design

Definição do problema

Análise de Google Analytics e entrevistas com tech leads para definição de requisitos técnicos para o e-commerce

Pesquisa

Benchmarking em e-commerces e marketplaces para identificação de boas práticas de design, usabilidade e experiência

Arquitetura de informação e Wireframes

Mapeamento de funcionalidades e fluxos de compra rascunhos e protótipos em baixa fidelidade para validação de hipóteses

Design e Validações

Protótipo final responsivo e style guide com componentes e guias visuais

O problema

Utilizei os dados de uso do Google Analytics e gravações de tela no Clarity para identificar os principais pontos de dor durante a jornada de compra

Problemas de responsividade

Apesar do tráfego em celulares representar +80% dos acessos na Loja, a conversão era 50% menor do que em computadores e notebooks. O e-commerce também foi desenvolvido sem devido cuidado coma responsividade, tornando a navegação mobile lenta, confusa e com diversos erros de diagramação.

Confusão entre formatos

Analisando chamados e em entrevistas com o time de Atendimento ao Consumidor, identificou-se uma grande quantidade de reclamações a respeito do formato dos livros (ebooks e audiobooks) e muitos cancelamentos com este motivo foram registrados.

Limite de customização de ofertas

A hospedagem da Loja Skeelo no Shopify possuia algumas limitações em customizações importantes para a experiência de uso. Além da demora na atualização de preços e ofertas, a plataforma não permitia a criação de certos tipos de vitrines recomendadas.

Benchmarking

Análise técnica de concorrentes

Identifiquei as principais funcionalidades e mecanismos de conversão presentes em grandes e-commerces dos mais diferentes segmentos

Hierarquia de informações

Um estudo sobre a hierarquização de informações em lojas virtuais também foi feito durante a análise.

Wireframes

Experimentos e criação de componentes-chave

Diversos experimentos realizados para definições de diagramação, posicionamento de elementos e identificação da hierarquia de atenção

Wireframes digitais e componentes criados no Figma

Conclusões

A implementação da funcionalidade de pagamento trouxe muitos desafios, principalmente porque exigia conhecimentos técnicos que eu não tinha. Tive que conversar bastante com os desenvolvedores para entender melhor as particularidades das integrações entre plataformas. Isso não só me ajudou a aprender mais sobre a parte técnica, mas também mostrou como é importante a colaboração entre diferentes áreas para criar soluções eficientes.