Entenda como o Grupo Boticário utilizou inteligência artificial para melhorar a acessibilidade do e-commerce

Por William Bruno, Desenvolvedor Web no Grupo Boticário; Thiago Couto, Arquiteto de Soluções na AWS e Caio Monteiro, Principal Customer Solutions Manager na AWS.

Grupo Boticário

O Grupo Boticário possui 14 marcas e está presente em mais de 40 países com lojas, e-commerce, marketplace e milhares de revendedoras. Além da distribuição exclusiva no Brasil de produtos reconhecidos internacionalmente.

Possui um ecossistema próprio de beleza, que vai da indústria ao ponto de venda, da logística ao varejo, do laboratório ao coração das consumidoras e das inovações até cada um dos nossos clientes.

A marca-primogênita: “O Boticário”, foi eleita, pelo 5º ano consecutivo, a marca de cosméticos mais amada pelos brasileiros* e o Grupo Boticário a 3º companhia de beleza mais sustentável do planeta, pelo Dow Jones Sustainability Index.

A história do Grupo Boticário, que começou em 1977 em uma pequena farmácia de manipulação no Paraná, fruto do sonho do fundador Miguel Krigsner, hoje agrega laboratório, fábrica, inovação, tecnologia, logística, marketing e varejo, em um ecossistema de 110 mil pontos de venda no varejo, parceiros e fornecedores. A empresa atua ainda nas frentes ambientais, sociais e culturais e conta também com atuação da Fundação Grupo Boticário e Instituto Grupo Boticário.

Desafio

Faz parte dos compromissos públicos do Grupo Boticário, e é um de seus propósitos, possuir uma comunicação acessível, representativa da população brasileira e ausente de estereótipos, naturalizando a diversidade.

Tornar um e-commerce acessível para todos, com uma boa experiência e sem perda de informações é um desafio contínuo, ao qual nos dedicamos todos os dias, a cada nova funcionalidade.

A experiência das pessoas com deficiência visual ao navegar nos sites do Grupo Boticário está nessa jornada de desenvolvimento e podia contar com melhorias. A descrição com riqueza de detalhes de todos os produtos do catálogo, abrangendo suas diferentes imagens, é uma tarefa que demanda esforço e necessita atualização constante.

<img .. alt=”Loção Hidratante Desodorante Corporal Coffee Addictive Oriental Frutal 200ml” />

Texto alternativo: Na imagem, temos ao centro, um produto da linha “Coffee Addictive”. Ao redor, estão dispostos ingredientes naturais, como café em grãos, baunilha, frutas vermelhas (morangos, framboesas e cerejas), blueberries e flores.

A opção comumente usada, de utilização do nome do produto ou sua descrição no atributo alt, não representava as imagens não passavam o contexto no qual elas estavam inseridas.

Por exemplo, nessa imagem comparativa do antes e depois da utilização de um condicionador da Linha Match Science de O Boticário, o atributo alt do HTML apenas repetia o nome do produto:

<img .. alt=”Condicionador Match Science Crescimento 250ml” />

Enquanto uma representação mais descritiva seria: no lado esquerdo, intitulado “Antes”, o cabelo aparece um pouco mais curto e com as pontas aparentando estar mais ressecadas ou danificadas. Já no lado direito, intitulado “Depois”, o cabelo está mais longo, liso e com uma aparência saudável e brilhante.

Solução

Para auxiliar as equipes responsáveis pela ficha técnica dos produtos vendidos na plataforma de e-commerce, foi escolhido o Amazon Bedrock, com o modelo Claude 3 Sonnet da Anthropic.

Texto alternativo: Esta imagem parece representar uma arquitetura de sistema ou fluxo de trabalho envolvendo diferentes componentes ou microsserviços. No centro, há um componente chamado “backoffice” que parece ser o núcleo ou processador principal. A partir dele, há conexões com outros componentes como “product-image”, “product” e “webstore”.

Também há um componente chamado “search” que se conecta com o “elastic”, provavelmente um mecanismo de busca ou indexação.

No topo, há um componente representado por um ícone com engrenagens, chamado “anthropic.claude-3-sonnet”, que presumivelmente é algum sistema de orquestração ou gerenciamento.
A imagem utiliza uma simbologia de fluxograma ou diagrama de arquitetura para ilustrar os diferentes componentes e como eles se relacionam e se comunicam dentro desse sistema específico que parece envolver produtos, imagens, lojas online, buscas e processamento central.

A equipe do Grupo Boticário incluiu uma nova funcionalidade na tela de cadastro de produtos que permite ao operador clicar em um botão e gerar descrições específicas e ricas para cada imagem. A implementação utilizou da SDK AWS para fazer chamadas ao Amazon Bedrock enviando a imagem e um prompt requisitando a descrição. O retorno preenche o campo de descrição de imagem que é utilizado posteriormente no código HTML nos sites, que por sua vez serão utilizados por leitores de tela para ler a descrição.

Após isso, foi integrado na ferramenta de administração, um novo campo de descrição alternativa das imagens.

Texto alternativo: A imagem mostra um cachorro chihuahua de pelos longos e claros, sentado dentro de uma banheira branca, pronto para tomar banho. Ao lado de um frasco vermelho de shampoo para pets. Há também um patinho de borracha amarelo dentro da banheira.

Dessa forma, ao gerar o HTML apresentado ao consumidor, preenchemos no atributo alt da tag <img />, com essa descrição.
Este é o conteúdo que será lido por leitores de tela, melhorando muito a experiência de pessoas com deficiência visual, pois de agora em diante, terão acesso a uma descrição textual das imagens.

Por exemplo, algumas imagens:

https://rotulo-digital.boticario.com.br/50022
https://www.boticario.com.br/her-code-eau-de-parfum-50ml

<img .. alt=”A imagem mostra um frasco de perfume da linha Her Code. O frasco é preto e possui um arco na parte superior que parece ser de metal rose gold, em formato de cadeado. O nome &quot;her code&quot; está escrito em letras douradas no vidro do frasco.” />

E este Lily:

https://rotulo-digital.boticario.com.br/77524
https://www.boticario.com.br/lily-eau-de-parfum-75ml

<img .. alt=”Esta imagem mostra um frasco de perfume luxuoso da marca Lily. O frasco tem um design elegante e sofisticado com cores douradas e transparentes. O frasco tem uma forma curvilínea e chamativa, característica dos produtos de alta qualidade da marca Lily.” />

Resultado

Já foram descritas mais de quatro mil e setecentas imagens de 1500 produtos diferentes, ao custo de quinze dólares.

Texto alternativo: O gráfico apresenta o custo total do produto, que é de $15,00, e o custo médio de uso ao dia, que é de $0,39.

O gráfico também exibe o uso ao longo do tempo, com barras que representam a quantidade de uso em diferentes períodos. A parte inferior da imagem contém detalhes adicionais, como informações sobre os filtros aplicados e opções de visualização do relatório.

Dessa forma, o Grupo Boticário promove a inclusão ao acesso à informação das imagens do e-commerce para todos.

Melhorando a experiência das pessoas com qualquer tipo de deficiência visual que utilizam softwares de leitura de tela, quanto também aos motores de busca, como Google, pois começarão a indexar também o significado, através dessa descrição alternativa.

Além das imagens de produtos, os banners das imagens promocionais também estão sendo descritas pela IA:

Texto alternativo: Fundo de cor clara com uma menina e seu pai brincando com peças e chamada para conferir presentes do Dia dos Pais.

O Grupo Boticário planeja incorporar esse novo conteúdo textual alternativo das imagens na busca interna da plataforma no futuro. Assim, quando um consumidor pesquisar por exemplo, pelo formato ou características de um frasco de perfume, a página de resultados que antes não apresentava nenhum produto, pois não tínhamos essa informação em formato de texto para incluir na pesquisa, irá retornar os produtos esperados.

A equipe de cadastro relatou que a IA tem ajudado no dia a dia, pois, além de reduzir o tempo para descrever as imagens, fornece uma sugestão de texto rica que é revisada e depois salva.

“Tô achando bem positivo o uso da IA já lendo a imagem do produto e trazendo uma estrutura de frase.”

“Eu tbm acho positivo, porque o texto gerado dá um norte bem legal sobre o que usar, por onde começar… eu acho super válido!”

“Eu gosto de ver o que ela tem a dizer, pois pode dar algumas ideias interessantes. Então, na minha perspectiva, é um componente que ajuda muito na minha produtividade não só em questão de tempo, mas em questão de vocabulário e ideias que posso aproveitar para aprimorar com a minha experiência.”

Há algum tempo que o Grupo Boticário passou a incluir a hashtag #PraGeralVer, nos posts das mídias sociais, como forma de inclusão, resultado de uma campanha de mesmo nome que pode ser conferida aqui. Agora, esta implementação na plataforma de e-commerce, com foco na descrição dos textos alternativos, é mais um passo nessa jornada.

Foi utilizado o Amazon Bedrock para o texto alternativo das imagens neste artigo.

Autores

	William Bruno é Desenvolvedor Web apaixonado por boas práticas e design patterns. Iniciou com programação web em 2008 com PHP e JavaScript. Trabalhou com Java, infraestrutura, bancos de dados e arquitetura ao longo da carreira. Publicou um livro de NodeJS. Atualmente trabalha no Grupo Boticário como Principal Engineer.
	Thiago Couto é Arquiteto de Soluções na AWS e atua no segmento Enterprise auxiliando clientes de Retail e CPG em suas jornadas para nuvem. Possui mais de 10 anos de experiência atuando em arquiteturas que englobam AI/ML, integrações, IoT e correlatos.
	Caio Monteiro é Principal Customer Solutions Manager, atendendo o setor de Enterprise e o segmento de varejo.