#Semcategoria

Redesign de projeto VTEX na Francisca Jóias garante resultados surpreendentes de conversão.

Registramos 18% de aumento na performance de carregamento
da operação Francisca Jóias após migração para plataforma VTEX.
Quer saber como? Leia o case de sucesso!

Um site cada vez mais rápido, estruturado para uma navegação mobile e que ofereça uma experiência fluida para o cliente, tem se tornado o ponto chave
de sucesso para uma operação online.
Esse cenário certamente influencia positivamente na
permanência do usuário em seu site, que estará mais propenso
a converter visitantes em clientes.

Em pesquisa realizada pelo The State of Online Retail Performance, 2017 by Google/SOASTA, esse assunto foi incisivamente abordado
em vários tópicos do relatório.

Continue a leitura, e entenda como esse projeto
se tornou um case de sucesso para o cliente,
para a Click Qi e para a VTEX.

O Cenário

O e-commerce Francisca Jóias foi lançado em 2012 e durante esses anos a loja passou por algumas alterações em sua estrutura visual. 
Devido às evoluções funcionais e tecnológicas surgiu a necessidade de um redesign, voltado a experiência do usuário, que tem buscado cada vez mais a diversidade de produtos e a singularidade de poder personalizar suas jóias.

Objetivos do projeto:

– Melhorar a navegação (mobile); 
– Atualização da estrutura visual; 
– Preservar features funcionais que já eram aplicadas na loja; 
– Melhorar a apresentação do produto, com uma estrutura específica para a personalização; 
– Operacional: Facilitar a gestão e criação de novos produtos; personalizados; 
– Visibilidade e flexibilidade para a gestão das campanhas promocionais;

Esses fatores certamente influenciavam negativamente os indicadores comerciais e, principalmente, o posicionamento de marca.

O Projeto

O projeto da Francisca Jóias foi estruturado em 3 pilares

  • Customer Centric Design;
  • Automação gerencial;
  • Mobile first;

Customer Centric Design

O atributo alt desta imagem está vazio. O nome do arquivo é visualizing-creating-highperformance-customercentric-design-70-638.jpg

Como se tratava de um projeto de migração, utilizamos parcialmente o ambiente de produção para o levantamento de hipóteses, aplicação de idéias e testes A/B.

Conforme o resultado da saídas dos experimentos escalonávamos no escopo do projeto.

Várias funcionalidades foram desenvolvidas baseada em testes de User Centric Design, uma das mais relevantes foi o cart bar, que preenche uma barra de benefícios no carrinho, com o intuito de estimular o aumento do ticket médio da loja, que conforme o mercado naturalmente é baixo.

Automação Gerencial

O time Francisca Jóias tem em seu DNA a característica de operacionalizar ações muito rapidamente, levam a sério o lema “o feito é melhor que o perfeito”.

E não obstante tivemos que transparecer essas necessidade no projeto. Considerar automações para ganho de escala, e flexibilidade gerencial foram fundamentais para que a plataforma se adapta-se a quantidade de alterações, promoções, segmentações que o time comercial e de marketing exigia.

Ainda nesse sentido, realizamos a integração com várias ferramentas terceirizadas via GTM (Google Tag Manager), cuidando da performance de carregamento das páginas e o completo funcionamento do pixel.

Não é atoa que após o lançamento da loja, a Francisca Jóias é citada também como um dos principais cases de sucesso da RD Station.

Mobile First

Nosso ponto de partida e maior desafio em todo o projeto.

Condensar funcionalidade e estratégias, que eram efetivas, em um dispositivo móvel sem perder performance, realmente não foi um trabalho fácil.

Veja como ficou o trabalho

Layouts

O atributo alt desta imagem está vazio. O nome do arquivo é franciscajoias-projeto-vtex-2020-02-17-18-34-17-1024x919.png
Icons and Bottons
O atributo alt desta imagem está vazio. O nome do arquivo é franciscajoias-projeto-vtex-2020-02-17-18-34-29-917x1024.png
O atributo alt desta imagem está vazio. O nome do arquivo é franciscajoias-projeto-vtex-2020-02-17-18-34-59-1024x695.png

Outras funcionalidades importantes!

Carregamento Progressivo;

Todas as requisições tem seus dados cacheados na sessão do usuário,
afim de diminuir a quantidade de chamadas via API e o consumo de dados.
Assim, a cada novo carregamento o site fica mais rápido,
chegando em casos de entregar a metade do tempo,
quando comparado ao primeiro acesso do usuário.

carregamento Plataforma Vtex
carregamento Plataforma Vtex

(4) Lazy Load;

O Lazy Load trata de carregar apenas o conteúdo necessário, ou seja,
no acesso do cliente, a página é carregada de forma fragmentada,
oferecendo assim uma percepção de velocidade elevada de
atendimento às solicitações.
Isso economiza a quantidade de requisições de arquivos solicitados no servidor.

requisição ao servidor plataforma Vtex
requisição ao servidor plataforma Vtex

(5) Integração Telegram

Foram criadas 3 (três) funcionalidades integrando o Telegram com a VTEX, para o ganho de performance e gestão da loja.

integração-telegram-projeto-vtex-milla-gomes

Bot para Acompanhamento de Vendas

Com essa funcionalidade todos os participantes de um grupo específico recebem um comunicado da VTEX, quando há uma ocorrência de venda na plataforma

Bot para Cadastro de Produtos

Na antiga plataforma, o processo de cadastro levam em torno de 12 minutos para ser realizada, após o desenvolvimento da integração do Telegram com a VTEX, o produto é cadastrado pelo time de operações e as fotos são enviadas diretamente do estúdio através de um grupo do Telegram, que automaticamente são vinculadas ao cadastro do produto, gerando a sua ativação dentro da VTEX. Totalmente sem interação humana!

Com essa integração o processo de cadastro leva poucos minutos!

Bot para Consulta de Produtos

O cenário da operação é bem complexo, vendedoras “porta-a-porta” , lojas físicas, revendedores, etc – precisavam ter acesso a plataforma, para se inteirar sobre o cadastro de produtos, estoque, data de lançamento.

Dentro dessa ótica, foi criada um grupo com todo o time comercial e a partir do envio de uma mensagem compartilhada todas as informações de novos produtos cadastrados no site é enviado para a lista de transmissão.
Assim, todos que estão dentro do grupo, ficam sabendo sobre lançamentos, e últimos cadastros no site.

Resultados

Aconteceram evoluções positivas em praticamente todas as áreas do negócio, de maneira mais expressiva em relação á performance.

Veja porque esse projeto se tornou um case de sucesso.

O atributo alt desta imagem está vazio. O nome do arquivo é mockup-milla-gomes-carregamento-analytics-site-click-qi.png
Mesmo com um crescimento no tempo de redirecionamento de servidor, houve a melhora de 43% no carregamento da página,
plataforma Vtex
plataforma Vtex

Apenas esses resultados já bastavam, mas entenda porque esse projeto se tornou também um caso de sucesso dentro de todo ecossistema VTEX.

Dentro da página inicial do administrativo VTEX, há alguns indicadores que comparam todas as plataformas do ecossistema VTEX (aproximadamente 5000 operações), em relação aos dados de sua operação.

Veja a comparação dos indicadores do projeto Milla Gomes,
em comparação a todas as operações VTEX.

O atributo alt desta imagem está vazio. O nome do arquivo é mockup-milla-gomes-home-site-click-qi.png
Em relação ás métricas de carregamento a loja atingiu na primeira semana 6,7 segundos de carregamento médio de sua home, um indicador 100% melhor que a média de todas as lojas VTEX.
O atributo alt desta imagem está vazio. O nome do arquivo é mockup-milla-gomes-produto-velocidade-site-click-qi.png
Na página de produto o ganho foi ainda maior, chegando a 150% de superioridade no carregamento, chegando a média de 2,9 segundos.
O atributo alt desta imagem está vazio. O nome do arquivo é mockup-milla-gomes-checkout-site-click-qi.png
Uma das principais páginas do site, o checkout, também teve ampla redução no tempo de carregamento, chegando a média de 5,9 segundos.
O atributo alt desta imagem está vazio. O nome do arquivo é mockup-milla-gomes-loja-completa-velocidade-site-click-qi.png
Em linhas gerais, o site opera com um ganho de performance 66% melhor que a média de todo o ecossistema VTEX.

Além desse case temos muitos outros, confira agora clicando aqui

Fique sempre ligado em nossas novidades, cadastre-se em nossa news e receba tudo em primeira mão!

estamos aquí para lo que necesites!

Deje sus datos con nosotros y nos pondremos en contacto con usted.