Acelerando resultados:

A B.blend é a primeira plataforma de bebidas em cápsulas na categoria all-in-one do mundo, desenvolvida pela parceria entre a Whirlpool, dona das marcas Consul, Brastemp e KitchenAid, e a Ambev, maior empresa de bebidas da América Latina.

As máquinas são produzidas na fábrica da Whirpool e as cápsulas são feitas pela Ambev, baseadas nas fórmulas de diversas marcas de bebidas do grupo. O consumidor tem uma vasta variedade de bebidas que vão desde drinks, sucos de fruta, bebidas funcionais, cafés, chocolates, refrigerantes, chás gelados e energy drinks, entre opções quentes, frias e gaseificadas.

Além de toda esta variedade, a maquina também oferece água quente e água com gás para consumo no dia-a-dia.

A marca surgiu em 2014, com a proposta de revolucionar o consumo de bebidas, celebrando o poder de escolha dos consumidores através da praticidade e inovação. Além disso, a companhia trabalha com ações pensadas para os impactos no planeta através de materiais recicláveis e redução na emissão de CO2 em sua operação.

As lojas físicas, localizadas em São Paulo, foram primordiais para o público conhecer as máquinas e experimentar as bebidas, além de servirem como pontos de coleta de cápsulas e cilindros, que são 100% recicláveis.

O público gostou tanto do produto e a aceitação foi tão rápida que logo se iniciou o comércio online, principal canal para a expansão da marca para outros estados do Brasil.

Durante o ano de 2020, diante dos novos desafios encontrados e a mudança de comportamento dos consumidores, o mercado de venda de alimentos e bebidas se reinventou por meio do e-commerce e cresceu 6% em volume de usuários, quando comparado com o ano anterior, segundo relatório da Comscore.

A B.blend atuava em seu e-commerce há algum tempo e já mantinha receita recorrente em seu canal. Porém, para aumentar a performance de vendas e melhorar a experiência do cliente, a B.blend precisava reestruturar a arquitetura do site e interfase não só visando uma melhor navegabilidade, mas também formas de incentivar a compra recorrente e fidelização do público.

Somado ao objetivo de ampliar o alcance e reconhecimento da marca no online, a gestão da B.blend entendeu que para atingir os resultados em vendas esperados e acompanhar a alta no setor, precisaria investir em melhorias do site já existente com foco em melhorias de código, performance e experiência do usuário.

Sendo assim, em parceria com a Codeby, com o objetivo principal de melhorar a taxa de conversão, o projeto foi desenhado utilizando as melhores práticas de usabilidade, visando correção de erros de layout e código que atrapalhavam a manutenção e experiência do site sem abrir mão das funcionalidades personalizadas criadas anteriormente.

• Código com estrutura de difícil manutenção;
• Necessidade de otimizar a experiência do usuário que tinha gargalos na navegação e jornada de compra;
• Necessidade de ampliar o alcance e reconhecimento da marca no online;
• Necessidade de melhorar a experiência em dispositivos mobile.

Para iniciar o projeto e alcançar os objetivos da B.blend, a primeira ação realizada pela Codeby foi entender a melhor forma de realizar as otimizações do site, inserir as práticas recomendadas de performance e partir para as bases de experiência do usuário. Junto ao time da B.blend, ficou decidido que o melhor caminho para seguir seria a reestruturação do código e migração de funcionalidades.

Esta reestruturação foi necessária para padronizar o código, evitar conflitos em requests ou até mesmo erros no site e eliminar códigos não utilizados que podem impactar ativamente a performance do site. Com isso, con num seguimos aumentar a velocidade de carregamento, reduzir erros do back-end e front-end, além de ter uma estrutura melhor para realizar manutenções no site.

Dentre as funcionalidades migradas para o novo site, alguma delas merecem destaque, pois são diretamente ligadas à experiência do usuário, bem como otimização de processos, são elas:

Cápsulas sortidas

A funcionalidade para o "Cápsulas sortidas”, foi desenvolvida dentro do ambiente da VTEX através do Assembly Options, Attatchment da plataforma VTEX e posteriormente adicionado um campo para o customApp, levando novas regras de negócio ao site, através de uma landing page nova e customizada.

Consiste basicamente na criação de SKU (Stock Keeping Unit) de caixas com vários outros SKU’s de diversas cápsulas de bebidas vendidas pela marca. O processo da criação dessas SKUs demandou tempo, uma vez que o fluxo precisava ser fluído e permitir ao cliente acrescentar e retirar as quantidades que desejasse.

A funcionalidade desenvolvida pelo nosso time resulta em uma experiência mais agradável ao cliente, uma vez que o consumidor tem a opção de customizar o produto que quer adquirir, a experiência de compra do site se tornou mais agradável, aumentando as chances de recompra. Além disso, com a personalização do produto, as desistências de compra diminuem, aumentando assim as taxas de conversão e ticket médio da loja.

Indique e Ganhe

O “Indique e ganhe” que utiliza em seu Backend e database aplicação desenvolvida em nodeJs dentro do ambiente da VTEX. Além disso, o front-end foi desenvolvido em Javascript onde é exibido o funcionamento do sistema para o lojista.

Também conhecida como Wallet, a funcionalidade pode ser usada em alguns cenários, junto ao cliente ou ao seu time de revendedores. No caso da B.blend, a funcionalidade foi desenvolvida unicamente para cenários junto ao cliente, no seguinte fluxo:

> Obter cupom de um indicador > Compra efetuada com cupom de um indicador > Recebimento de créditos de origem da indicação > Consulta de créditos obtidos > Utilização de créditos obtidos de indicações.

O Wallet é uma funcionalidade que está acompanhando uma nova tendência do mercado, com as estratégias de engajamento de clientes e revendedores através de benefícios de indicação.

Para o lojista, se torna descomplicado verificar e comparar estoque de lojas físicas e loja online. Além disso, é possível direcionar campanhas baseadas nas informações obtidas sobre o estoque, tanto em pontos de vendas físicos quanto na loja online.

Com essa funcionalidade o cliente tem mais uma opção de compra, uma vez que consumidor é direcionado a pontos de vendas que possui estoque do produto que deseja, evitando frustração por falta de estoque e dando mais opções para adquirir seu produto.

Diferente do anterior, o novo layout foi pensado para melhorar o fluxo de compra, encurtando os passos no processo de aquisição de novos e atuais clientes. Com atenção especial em oferecer a melhor experiência mobile, foi utilizada a técnica Mobile First, priorizando a construção da arquitetura mobile e seguindo para desktops.

Esta técnica fez com que a performance do projeto fosse otimizada, melhorando o tempo de carregamento, diminuindo o número de bugs e possibilitando um layout responsivo, que se encaixa de acordo com a resolução da tela no navegador do consumidor.

Uma das mudanças mais perceptíveis, foi o menu fixo na parte inferior da tela, onde o cliente pode acessar rapidamente opções de compra de bebidas ou acessórios, montar sua caixa mix e ver o seu carrinho de compras. Esse menu irá encurtar os passos na jornada de compra e tornar a navegação muito mais intuitiva.

A nova reestruturação do código teve forte impacto na velocidade do site, bem como no SEO que seguiu técnicas atuais recomendadas por parceiro estratégico da B.blend. Isto resultou no aumento das vendas orgânicas, uma vez que o consumidor valoriza experiências ágeis e fluidas, e sites bem posicionados em mecanismos de busca.

A experiência do usuário foi prioridade em todos os processos do novo site da B.blend, tanto mobile quanto desktop, garantindo jornada de compra mais rápida e otimizada, afinal, o cliente consegue seguir o passo a passo desde a seleção do produto até o checkout sem erros, sem interrupções ou processo paralelos. Estas características foram essenciais para que a marca aumentasse em +100% sua taxa de conversão em apenas 6 meses.

Com uma estrutura mais fluida a jornada de compra ficou mais intuitiva ao usuário que encontra em poucos cliques os produtos que gostaria de adquirir bem como acesso a programas de fidelidade e benefícios por indicação. A estratégia de aquisição e retenção de clientes bem executada garantiu que o site tivesse um aumento de +62% no valor das páginas de aquisição.

Falando sobre as métricas do novo site da B.blend, o projeto mantém números interessantes de performance, pontuando 83 em SEO e com velocidade de indexação de 3,1 segundos e deslocamento cumulativo do layout na janela de exibição em 0,001 ms.

Sobre a

Somos uma empresa especializada na implementação e desenvolvimento de E-commerces. Com mais de 6 anos de experiência temos evoluído e transformando a realidade de negócios digitais de grandes marcas e empresas do mercado, contribuindo com soluções tecnológicas personalizadas para ambientes de lojas virtuais, aumentando performance e resultados em vendas para nossos clientes. MVP Partner no quadrante da Vtex, com time técnico certificado na plataforma VTEX.