Carrefour – Feature implementada em Jamstack

O grupo Carrefour é um dos maiores conglomerados de alimentos e varejo do mundo. O Grupo opera atualmente em 33 países com mais de 10.800 lojas, entre hipermercados, supermercados, lojas de conveniência e atacadistas, com um volume de 13 milhões de pessoas passando por suas lojas todos os dias. No Brasil, a história do Carrefour […]

  • PUBLICADO EM
    16/11/2021
  • CATEGORIA
    SUPERMERCADOS
O grupo Carrefour é um dos maiores conglomerados de alimentos e varejo do mundo. O Grupo opera atualmente em 33 países com mais de 10.800 lojas, entre hipermercados, supermercados, lojas de conveniência e atacadistas, com um volume de 13 milhões de pessoas passando por suas lojas todos os dias.

No Brasil, a história do Carrefour começou em 1975 e hoje se tornou o maior varejista de alimentos do país. O Grupo Carrefour é formado pelas seguintes marcas: Carrefour Hiper, Carrefour Bairro, Carrefour Market, Carrefour Express, Drogaria Carrefour, Carrefour Posto, Atacadão e Supeco.

A operação do Carrefour no Brasil é uma das maiores do grupo. No entanto, eles decidiram interromper todas as operações digitais para melhorar sua estratégia digital e criar um plano de retorno vencedor.

O Problema

Para seguir o padrão das demais lojas do grupo em outros países, o Carrefour precisava disponibilizar em sua loja informações nutricionais de cada produto utilizando a metodologia Nutri Score, assim como em diversos países da Europa e, no Brasil, também é recomendada pela ABRAN (Associação Brasileira de Nutrologia) como modelo de avaliação do perfil nutricional de alimentos industrializados.


Contudo, esta loja foi a primeira implantada em Jamstack, um framework open source utilizado pela VTEX para obter maior performance e em função disso, não havia especialistas nesta implementação.

O que é JamStack

O Jamstack é uma arquitetura de desenvolvimento front-end open source utilizada pela VTEX com foco em performance para lojas que possuem diversas customizações como a loja de produtos alimentícios do Carrefour. Esta tecnologia é mais ágil, pois ao invés das informações da loja serem renderizadas no Server Side, elas são publicadas diretamente no Client Side reduzindo o tempo de carregamento do website.

A Solução

Nutri escolha, a feature de comparativo nutricional do Carrefour

A ACCT aceitou o desafio e implementou do zero a feature Nutri Escolha, uma funcionalidade que permite que o consumidor final compare os produtos da loja através do seu perfil nutricional e preço. Para desenvolver essa feature em Jamstack foram utilizadas linguagens como React, GraphQL e TypeScript.

 

O cálculo da pontuação é baseado na metodologia do Nutri-Score que desenvolvida pelo Ministério de Saúde da França e implementada desde 2017.

 

Para que a pontuação funcione o time do Carrefour deve cadastrar todas as informações nutricionais do produtos na loja e com isso o sistema de score que é composto por cinco letras e cinco cores “avaliam” a qualidade nutricional, sempre comparando numa porção equivalente de 100g ou 100ml, conforme os critérios abaixo: 

 

  • – A quantidade de nutrientes que deve ser limitada: energia, ácidos graxos saturados, açúcares e sódio.
  • – A quantidade de nutrientes e ingredientes (alimentos) que devem ser incentivados (fibras, proteínas, frutas, vegetais, leguminosas, nozes, sementes de colza, canola e azeites.
  •  
  •  

A pontuação é convertida em uma letra, que vai do A (produtos com perfil nutricional que devem ser estimulados) ao E (produtos com perfil nutricional que devem ser consumidos com moderação)

Classificação dos itens na página de produtos.

O input destas informações cadastradas pelo time do Carrefour é feito a nível de especificação do produto.

 

 

Utilizando os campos de produtos similares existentes na VTEX o time da ACCT fez uma customização que compara o índice nutricional dos produtos e os preços para que sejam ofertadas na página de produtos vitrines com os itens mais equilibrados e mais baratos.

Customização que compara o índice nutricional dos produtos e os preços.

Classificação dos itens na página de produtos.

Para inserir o Nutri score (cálculo da pontuação), foram desenvolvidos campos de produto para a inserção das pontuações A,B,C,D, E.


Quando estes estão preenchidos, o sistema visualiza no catálogo o produto C e o produto B, aí o item exibido na página de produto é o B que é o mais saudável.

 

Para que o consumidor final entenda o porquê de cada nota, foi desenvolvido um modal na página de produto com todas as informações nutricionais do produto, divididos por indicadores positivos e negativos.

Usuário não precisa sair da página do produto.

As informações nutricionais baseada nas informações inseridas no back-end são sinalizadas pelas cores nas barras.

Os Desafios

Por ser uma tecnologia recente que ainda não havia sido lançada, a implementação exigiu muito estudo do time da ACCT.


Outro ponto que teve bastante trabalho foi puxar as informações nutricionais e o selo de nota do produto do admin da VTEX e trazer todas essas informações para a página do produto.

Palavra do Cliente

Tivemos o desafio de migrar e implementar não uma, mas duas novas experiências de compras online: "Shopping" e "Mercado", incluindo Marketplace (3.000 vendedores, 2 milhões de ofertas) em uma nova plataforma (VTEX IO) com personalizações front-end exclusivas (Lista de Compras, Regionalização de Catálogo, Carrinho de Compras, Provedor de Login, Minha Conta etc.) e em pouco mais de 6 meses. Não teríamos sido capazes de cumprir a tempo sem o know-how da ACCT.
Ricardo Trancredi
Diretor de Produtos Digitais - Carrefour