Loja Virtual Rede

Axure Design System Figma Hotjar Jira Miro Product Design UI Design UX Design UX Research Ux Writing

Mockup Loja Lirtual Rede computador e tablet

Visão Geral do projeto

A Loja Virtual Rede surgiu da necessidade de pequenas e médio empreendedores clientes da maquininha Rede se digitalizarem rapidamente durante a pandemia. Ter seus produtos online deixou de ser uma opção e se tornou uma questão de sobrevivência para seus negócios.

icone proposta de valor
Proposta de valor
icone objetivos
Objetivo
icone key results
Key Results
Fator crítico

Apó uma semana da minha entrada no time, devido a pandemia, acabamos perdendo o dono do produto para a COVID. Com isso, acabamos também perdendo boa parte do conhecimento, contexto muitos documentos.

O processo de Desenvolvimento

O processo de desenvolvimento da Loja Virtual Rede foi orientado ao design e dividido em duas fases principais: pesquisa e design. O trabalho foi fundamentado na compreensão de três pilares do produto (Negócios, Usuário e Tecnologia) e na análise de como esses aspectos se sobrepõem dentro do contexto SCRUM.

Imagem que representa o processo de desing. Descoberta, definições, Ideação e implementação
Missão secundária
“Você ganhou habilidades de Design System”

Um outro desafio foi agregado foi de ser uma das três equipes a começar a usar o Design System, em inicio de implementação, o que gerava constantes ajustes e mudanças e o CMS usado pela empresa.

Investigar para atender às reais necessidades dos usuários

Problema: ajustes por demanda

O projeto enfrentava mudanças semanais baseadas em suposições da gerência de produtos, que frequentemente eram reclamações diretas dos clientes, sem critério ou investigação adequados.

Solução: criar processos

Para corrigir isso, apliquei o canva de matriz CSD com todos os envolvidos no projeto para mapear as certezas, investigar as suposições e resolver as dúvidas. Acabamos identificando que a suposição inicial do problema não era real, mas encontramos diversos outros problemas reais de diferentes magnitudes. Com isso, foi criado um backlog de ações para abordar essas questões identificadas.

Imagem do board com a Matriz CSD do processo
Matriz CSD
Imagem do board com a análise competitiva.
Análise competitiva
Imagem do board com os Insights da com base na análise competitiva
Insights da com base na análise competitiva

Uma Persona pra chamar de nossa

Apesar de a Rede já possuir três personas, nenhuma delas atendiam ao perfil digital. Por isso criamos uma persona específica para o o produto Loja virtual que posteriormente foi incluído na portfólio de personas da Rede.

Imagem do board com a persona criada para produtos digitais
Persona criada para produtos digitais
Imagem do board com o sketch para construção da persona (colaborativo)
Sketch para construção da persona (colaborativo)
Imagem do board com os insigts finais e matriz de priorização

Análise de problemas e insights pós- Discovery

Após o discovery, identificamos que o problema principal não estava no design da tela, mas em outros aspectos críticos:

  • Iinformações fornecidas;
  • Funcionalidades não óbvias e visíveis;
  • Taxas gerava dúvidas;
  • Problemas com a interface do serviço de terceiro;
  • Divulgação do produto quase inexistente.

Ações Estratégicas para otimização do produto

  • Aproveitamos os insights das entrevistas com os usuários para identificar áreas onde a informação não estava clara.
  • Catalogamos todo o conteúdo disponível e criamos um mapa da página para nossa estratégia. Melhoramos a FAQ e guias detalhados para abordar dúvidas comuns.
  • Reavaliamos e aprimoramos o fluxo de compra com a colaboração de todo o time, tornando-o mais intuitivo.
  • Redesenhamos o componente plano com o time de Design System e revisamos todo o texto com o time de UX Writing.
  • Em parceria com Dooca, resolvemos problemas de interface, realizando avaliações heurísticas e testes de usabilidade.
  • Colaboramos com o marketing para criar comerciais e materiais promocionais.
  • Desenvolvemos um dashboard para acompanhar métricas de desempenho e atualizamos a interface com o novo design system, contribuindo para sua melhoria.
Imagem do board com a estartégia de conteúdo
Estartégia de conteúdo
Imagem do board com o fluxo do usuário
Fluxo do usuário

As Métricas de sucesso

icone grafico parras
icone loja

Uma Nova experiência

O desenvolvimento da Loja Virtual Rede, orientado pelo design e focado na identificação e resolução de problemas reais, resultou em um aumento impressionante de 1400% nas vendas. Esta transformação não apenas demonstrou a importância de uma estratégia centrada no usuário, mas também destacou a eficácia de uma abordagem colaborativa entre design, tecnologia e negócios.

Imagem do projeto antes do discovery e redesign
O antes
Imagem com parte do projeto final da Loja Virtual Rede após o redesign
O Despois

Olha! Sem as mãos!
Documentação de Handoff

No projeto da Loja Virtual Rede, a documentação de handoff de UX foi essencial para garantir uma boa integração com o time técnico. O detalhando de requisitos de design e funcionalidades, facilitou a comunicação e compreensão entre as equipes. Esse processo reduziu significativamente o prazo, a qualidade das entrgas de desenvolvimento e deixou um legado valioso para o projeto, permitindo futuras iterações de maneira mais ágil e precisa.

Imagem do design final com a especificação de acessibilidade
Documentação de acessibilidade
imagem com representação de parte da documentação de Design System e espaçamentos
Documentação de espaçamentos

Gostou Deste projeto?