Le biscuit: Implementação VTEX

Com um modelo de negócios diversificado e resiliente baseado na multicanalidade, a empresa que possui uma ampla e moderna rede de lojas lançou seu primeiro projeto de e-commerce em 2020, em meio a pandemia. A varejista conta com 141 lojas, sendo 136 próprias e cinco franquias, com aproximadamente 140 mil metros quadrados de área de […]

Publicado em
09/08/2021
Categoria
Departamento

Com um modelo de negócios diversificado e resiliente baseado na multicanalidade, a empresa que possui uma ampla e moderna rede de lojas lançou seu primeiro projeto de e-commerce em 2020, em meio a pandemia.

A varejista conta com 141 lojas, sendo 136 próprias e cinco franquias, com aproximadamente 140 mil metros quadrados de área de vendas.

Elas estão distribuídas em 14 estados, nas regiões Norte, Nordeste, Centro-Oeste e Sudeste, em 74 municípios.

Sobre o Projeto

O escopo central do projeto envolveu principalmente a migração da loja para o VTEX IO. A ACCT é reconhecida pela VTEX como líder absoluta em implementações da tecnologia IO.

Com mais de 20 projetos altamente performáticos entregues para algumas das maiores marcas do varejo global como Electrolux, Carrefour e Samsung.

Por isso os clientes com projetos mais complexos procuram a ACCT.

O Problema

Após o fechamento das lojas físicas, a direção da empresa decidiu por um projeto de extrema urgência, e por conta da necessidade de velocidade, alguns passos importantes na estruturação de um projeto complexo de e-commerce foram negligenciados.

Quando a empresa entrou em contato com a ACCT, seu primeiro site apresentava uma performance bastante baixa, principalmente nos quesitos:

– Tempo de carregamento
– Menu principal
– Navegação

Uma das maiores barreiras para a evolução do site antigo em CMS foi a arquitetura, a estrutura construída anteriormente não permitia que eles tivessem uma página única que puxasse todas as páginas dos produtos do clube de vantagens da marca.

Toda a operação desse clube era complicada e braçal, surgindo assim uma necessidade no projeto, a automação de processos.

A Solução

O go-live deste projeto aconteceu no dia 14 de abril de 2021, totalizando assim três meses de migração até o lançamento da nova loja.

O cliente já utilizava a plataforma VTEX CMS e decidiu migrar para o VTEX IO, para isso, foi decidido que a primeira entrega seria um MVP (Mínimo Produto Viável), para que as features mais relevantes fossem pro ar o mais rápido possível e evoluções incrementais fossem realizadas em cima desse MVP.

Projeto em
Números

– 67% de aumento na taxa de conversão;
– 60,5% a mais de tempo médio na página;
– 15% de aumento no ticket médio;
– 7% de diminuição da taxa de rejeição.

Layout Desktop

Na versão desktop além de refletir as escolhas de cores e organização da hierarquia da informação adicionamos um contêiner para que o conteúdo fique dentro de uma área de conforto para melhor visualização. Ele também ajuda a prevenir a quebra dos componentes nos principais breakpoints desse dispositivo.

Como temos um fluxo maior de usuários acessando na resolução 1366 pixels, é importante evitar o full width para que o esses usuários consigam navegar tranquilamente nos seus dispositivos.

VTEX CMS

VTEX IO

Layout Mobile

O layout, que é um MVP, foi desenhado para trazer leveza ao e-commerce. Utilizamos espaços em branco para equilibrar os componentes trazendo a sensação de organização de seções.

A cor vermelha foi reduzida para detalhes estéticos e pontos de importância, como por exemplo, o logo, menu, busca e os elementos da régua de vantagem. O layout foi desenvolvido pela ótica do mobile first, já que a loja conta com aproximadamente 83% de usuários novos navegando neste serviço.

Customizações:

Umas das maiores necessidades do cliente neste projeto era a evolução completa do menu principal. O menu anterior, que foi criado por uma agência, tinha baixa performance e péssima usabilidade, de acordo com pesquisas de satisfação realizadas.

Menu Dropdown

Hoje o menu do cliente conta com um de drop com diferentes categorias e com quatro níveis de navegação, seguindo as melhores práticas do mercado internacional.

Para um website que oferece uma grande variedade de categorias e produtos, uma navegação de menu com muitos níveis e ainda assim intuitiva é muito importante.

VTEX CMS

VTEX IO

Filtro Lateral

O VTEX IO trouxe nativamente o menu lateral, indicado para caso exista um número alto de filtros disponível na listagem de produtos. Desta forma, a exposição do conteúdo para o usuário e a quantidade de filtros no agrupamento de produtos apresentado foi facilitada.

Pesquisas em psicolinguística mostram que a busca visual em uma lista é mais eficiente se a lista for vertical do que se for horizontal. Isso vale para o menu departamento também.

VTEX CMS

VTEX IO

Review de Produto

O VTEX IO também trouxe nativamente a ferramenta de review para os produtos. Uma funcionalidade super importante para a tomada de decisão na compra de produtos.

Com essa implementação, é possível ver e avaliar os produtos da Le Biscuit.

Search V2

Os recursos incluem:

Principais pesquisas;
Histórico de busca;
Sugestões de produtos;
Sugestões de termos;
Você quis dizer: Uma possível correção de erro ortográfico para a consulta atual;
Sugestão de pesquisa: Uma lista de termos de pesquisa semelhantes à consulta;
Banner de pesquisa: Um banner que pode ser configurado por consulta.

Busca Vazia

Como uma solução rápida e de baixo custo para o MVP, foi replicado o componente da homepage de departamentos para exibir um caminho alternativo de exploração, dessa forma a navegação não morre na tentativa de encontrar o produto.

Criação de Conta

Agora a Le Biscuit tem apenas três passos para iniciar uma conta nova no VTEX IO.

Teste A/B

Motivadores:

Diminuição das quantidades de requests;
Diminuir tamanho de imagem;
Aplicação de Lazyload;
Boas práticas de desenvolvimento;
Remoção do request de carregamento de preço CML para especificação do produto.

Design de Experiência

O profissional de UX e UI passa muito tempo pesquisando, descobrindo as necessidades do usuário e criando soluções de design que seguem princípios psicológicos fundamentais.

Ele é responsável por executar todas as pesquisas necessárias para o desenvolvimento do projeto, criando e entregando protótipos navegáveis que tangem as soluções, além de conduzir testes com nossos clientes, parceiros e stakeholders.

A mudança de layout proposta pela ACCT em conjunto com um cliente fez algumas alterações no design do site. Apesar dessas mudanças parecerem simples para o usuário comum, elas geram uma melhora considerável na experiência dentro do site, quando comparado ao CMS. Foram usadas novas cores, botões foram reposicionados, além de posicionamento da página de produtos.

Clube de Vantagens

A empresa tem um clube de compras onde oferece os melhores descontos presentes no site. Portanto a performance desse clube de vantagens exclusivas estava trazendo pouco resultado, e uma das conclusões era a dificuldade de navegação do usuário, assim como um processo muito complicado para o cadastramento de segmentação desses produtos pelos analistas de e-commerce.

Em cada produto que o usuário tem acesso no site, ele encontra o preço normal e o preço do clube de vantagens, caso o produto seja cadastrado dentro do catálogo do clube. Contudo no formato anterior não existia uma página apenas com os produtos do clube, por erro de arquitetura e falta de planejamento na implementação.

Para resolver esse problema dentro do ambiente VTEX, é preciso de uma estrutura dentro da VTEX para agrupar produtos. Como esses produtos pertenciam a várias categorias, era muito complicado adicionar produtos ao clube.

API First:

A ACCT criou um sistema de integração via API onde é possível criar um endpoint que vai se alimentar de uma tabela de preços e produtos enviados, possibilitando que todo o processo se torne automatizado e a curadoria dos produtos com condições especiais passa a ser automática.

Dual Track:

Durante esse projeto a ACCT implementou uma metodologia chamada Dual Track, que é um framework ágil onde os times de Experience Design e Desenvolvimento trabalham muito em conjunto.

Um exemplo é que toda vez que um design cria uma tela, feature ou botão, este colaborador tem que validar com o time de desenvolvimento de software se aquilo é algo factível e ideal, agilizando assim o processo e evitando retrabalho, além de gerar conhecimento para ambas as áreas.

Customizações no IO:

LP Clube Minha Le;
Selo Clube Minha Le na prateleira de produto;
Especificações dos produtos;
Trazer mais opções de parcelas na página de produto;
Melhorias na comunicação do Clube Minha Le;
Menu departamentos vertical;
11 Páginas de departamento customizada;
Filtros com imagens nas páginas de categoria;
Banner rotativo com spot de produto;
Migração do site institucional;
Seletores de cor e tamanho.

Performance:

As customizações feitas pelo time ACCT em conjunto com uma arquitetura mais fluida e leve, fez que essa migração para VTEX IO melhorasse de forma surpreendente a performance do website.

Com um menu mais responsivo, um código mais confiável, além de uma tecnologia mais moderna, o e-commerce do cliente passou a ter indicadores de performance muito superiores ao do website anterior, principalmente nos seguintes critérios:

Taxa de conversão
Tempo de carregamento
Bounce rate
Tempo na página

Palavra do Cliente

Fica o sentimento de missão cumprida, fica o aprendizado do quão importante é planejar, todos os envolvidos estão de parabéns, a equipe teve uma visão excelente do projeto e todos estavam comprometidos em fazer o melhor para o projeto independente da complexidade, conseguimos aplicar as melhores práticas mantendo alto nível de qualidade nas entregas e seguindo todas premissas para um projeto grandioso.

Ricardo Carvalho

E-commerce Manager - Lojas Le biscuit S/A