. redesenho do e-commerce
de quem disse, berenice?
.durante o processo de rebranding da marca quem disse, berenice? surgiu a necessidade de evolução da
plataforma de e-commerce,
para melhorar então a experiência do usuário, além de transmitir os novos conceitos e atributos da marca
.contexto
.desafio
Quem disse que beleza tem que ter tantas regras?
quem disse, berenice? veio pra questionar e ampliar os conceitos sobre maquiagem.
Além de inspirar as mulheres a serem livres para se sentirem mais bonitas e experimentarem diferentes possibilidades de produtos até encontrarem o que mais combina com elas!
Em 2019 a marca quem disse, berenice? passou por um processo de reposicionamento de marca, trazendo conceitos maduros e ousados para uma marca que até então era tida como "Teen", como parte desse processo o redesenho do e-commerce também se fez necessário.
Tínhamos como objetivo desenhar o melhor e-commerce mobile de maquiagens do Brasil e por consequência ampliar o faturamento e conversão do portal.
.processo
Para desenvolver um trabalho estruturado utilizamos como metodologia o Duplo Diamante do Design Thinking.
.métricas | OKRs
Para medir o sucesso do projeto, estabelecemos como meta o aumento e manutenção da taxa de conversão do e-commerce acima de 1%, trabalhando ainda o aumento da taxa de adição de produtos no carrinho, independente de mecânicas comerciais.
.discovery
Iniciamos o projeto com uma Desk Research e Benchmark das principais referências de e-commerce, independente de mercado de atuação. Após esse levantamento iniciamos uma entrevista qualitativa não estruturada, com usuários do e-commerce da marca que efetuaram compras nos últimos 3 meses. Consolidando a visão geral da percepção desses usuários em relação a plataforma.
Após a pesquisa, mediei uma sessão co-criativa com pessoas de diferentes setores da marca. Onde elaboramos alguns materiais que serviram como diretrizes desse projeto como a Matriz CSD abaixo, composta por todas as Certezas, Suposições e Dúvidas a respeito do
e-commerce.
Divididos em grupos, cada equipe elaborou o próprio Mapa de Empatia, desse modo pudemos elucidar as principais dores do público e personificar os clientes reais que conhecemos apenas digitalmente. Centralizando essa visão paras as diferentes pessoas envolvidas.
Por fim, após a análise das entrevistas com usuários, juntamente das Matrizes CSD e os Mapas de Empatia, conseguimos materializar a persona final para o e- commerce.
Trazendo a visão exata do usuário para quem estávamos desenhando essa nova solução.
.perfis
de shopper
O time de Desenvolvimento de Produto já havia produzido um estudo de hierarquia de decisão de compra juntamente da identificação dos diferentes tipos de Shopper da marca para o desenvolvimento de novas embalagens e fórmulas das novas linhas de produtos.
Utilizamos como base os mesmos perfis já mapeados, para estruturamos os diferentes fluxos do site. Ainda olhávamos para esses perfis como hipóteses, já que talvez o comportamento digital apresentasse diferenças em relação ao público que dá preferência a compras em lojas físicas.
então o que buscamos?
.define
Após a etapa de discovery, ficou bastante claro os objetivos que precisávamos alcançar com o projeto, e ao entendermos as principais dores dos usuários, entendemos e definimos que o e-commerce precisaria desempenhar um PAPEL DUPLO:
Mono Marca
Loja
}
Equílibrio ❤️
Com esse equilíbrio passaríamos então a:
Auxiliar
Encantar
Quero saber mais.
Informar
Educar
Agora eu entendi!
Converter
Solucionar
Aqui me resolvi!
.pesquisa de Design Emocional
Para o desenho de uma interface alinhada ao brandbook, já existente da marca, mas que não fora pensado para o visual de produtos digitais e ainda assim, transmitir conceitos abstratos como OUSADO E MADURO em uma interface e toda sua linha visual, optamos por fundamentar nossas decisões através de... PESQUISA!
Rodamos uma pesquisa de Design Emocional para tangibilizar quais os tipos de elementos, cores e tipografias nos levariam até o local exato onde a marca desejava estar:
.entenda mais sobre o processo nesse link
.develop
.Userflows
Com todos os aprendizados gerados até então, discutimos e desenhamos novos fluxos de navegação, direcionados a cada perfil de Shopper.
.Rabiscoframes
Para evoluir de maneira rápida e barata, desenhei wireframes em papel (também conhecidos como rabiscoframes) para que pudéssemos materializar as ideias e fazer as iterações necessárias antes de evoluirmos com um protótipo de alta fidelidade.
.Testes de Usabilidade
Após o desenvolvimento das telas e protótipos, aplicamos Testes de Usabilidade para entendermos se a solução desenhada de fato atendia as necessidades dos usuários e se os elementos desenhados possuíam clareza e boa usabilidade, encontramos respostas e direcionamentos, fizemos iterações e após uma segunda rodada de testes chegamos ao produto final de acordo com o objetivo traçado:
.delivery
.KPIs
.aumento de
As alterações no site foram faseadas, fazendo com que as novas interfaces fossem lançadas de acordo com o grau de prioridade e impacto para o negócio, a página de produto foi a primeira implementada que trouxe os resultados a seguir:
