A implementação da plataforma VTEX realizada pela Quality Digital na Le Biscuit aprimorou a experiência de compra online, oferecendo recursos personalizados, uma navegação intuitiva e uma gestão eficiente do comércio eletrônico.
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.
O escopo central do projeto envolveu principalmente a migração da loja para o VTEX IO. A Quality Digital é 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 Quality Digital.
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 Quality Digital, seu primeiro site apresentava uma performance bastante baixa, principalmente nos quesitos:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 Quality Digital 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.
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.
A Quality Digital 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.
Durante esse projeto a Quality Digital 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.
As customizações feitas pelo time Quality Digital 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:
Ao enviar este formulário dou consentimento específico para que meus dados pessoais e eventuais dados pessoais sensíveis sejam tratados pela QUALITY SOFTWARE S/A e empresas coligadas ou subsidiárias do grupo econômico, envolvendo ações de marketing, de comunicação social e recrutamento e seleção. Os direitos do titular podem ser aplicados em conformidade com a Política de Privacidade, e por meio do contato com o canal dpo@quality.com.br. Os dados são tratados em conformidade com a Lei n°. 13.709/18.
