Uma pesquisa publicada pela Forbes em 2023 aponta que 62% dos brasileiros fazem entre 2 e 5 compras online por mês. E eu me incluo nessa estatística.
Além da comodidade, a pesquisa aponta ainda que um dos fatores determinantes para esse comportamento se dá pelo fato de que compras online tendem a ter preços mais competitivos se comparados às lojas físicas.
Mas aí eu te pergunto. Já tentou comprar maquiagem online?
Quando o assunto é produto para a pele, como base, corretivo, ou pó, o desafio pode ser grande! Isso porque esses produtos devem ser escolhidos no tom mais próximo possível a sua pele e ao comprá-los de forma online você precisa se basear nas informações do site e nas imagens que vê na tela de um dispositivo para fazer sua escolha.
O mercado de beleza no Brasil e no mundo
Segundo um relatório publicado pela Associação Brasileira da Indústria de Higiene Pessoal, Perfumaria e Cosméticos (Abihpec), em 2023, o Brasil é 3º maior mercado consumidor de produtos de higiene pessoal, perfumaria e cosméticos do mundo e também o 3° em lançamentos dessa categoria de produtos no ranking mundial.
Imagem 01 - Panorama mundial do setor de Higiene Pessoal, Perfumaria e Cosméticos. Fonte: Abihpec, out/2024.
Ainda segundo a Abihpec, entre janeiro e abril de 2024, o comércio do setor alcançou US$ 575,9 milhões, um aumento de 5,2% em comparação com o mesmo período de 2023, que registrou US$ 547,4 milhões.
Dados da MCKinsey & Company mostram que o comércio eletrônico de produtos de beleza quase quadruplicou entre 2015 e 2022 e há uma previsão que de esse crescimento se mantenha nos próximos anos, à taxa de 12% ao ano entre 2022 e 2027.
Imagem 02 - Fonte: MCKinsey & Company: O mercado de beleza em 2023
Minha experiência com compra de maquiagem online
Uns anos atrás achei que o problema da compra de produtos de maquiagem em e-commerces estaria resolvido, quando comecei a estudar sobre coloração pessoal e descobri quais características das cores harmonizam comigo. A empolgação foi tanta que até me formei em consultoria de cores:
Imagem 03: do autor; meu certificado. Essa escola e curso que fiz são certificados pelo MEC.
Agora que sabia que minha pele era neutra fria, era fácil escolher minha maquiagem. Certo?
Bom, seria se as marcas especificassem isso em seus sites e produtos.
É comum ver esse tipo de informações em maquiagens importadas. É o caso da Fenty Beauty ou MAC, sendo que esta última utiliza a seguinte classificação das cores na descrição de seus produtos:
C: Cool (frio)
W: Warm (quente)
N: Neutral (neutro)
NC: Neutral cool (frio neutro)
NW: Neutral warm (quente neutro)
Imagem 04 - Site da Fenty Beaty. Acessado em 25 de outubro de 2024
Imagem 05 - Site da MAC. Acessado em 25 de outubro de 2024
Mas quando falamos das marcas nacionais, nem sempre encontramos informações suficientes para comprar esse tipo de produto online.
Eu já tinha planos de escrever esse artigo, mas hoje recebi o incentivo que faltava. Navegando pelo Instagram me deparei com um post em que anunciava um serviço oferecido por uma grande marca brasileira de cosméticos.
Imagem 06 - Captura de tela, site da marca. Serviços oferecidos em loja. Acessado em 25 de outubro de 2024
O vídeo mostrava esse último serviço listado, o “Experiência Color Lab”. Sim, é aquele teste de coloração do qual tenho formação.
Então pensei que a marca poderia ter melhorado a descrição de seus produtos de maquiagem e trazer informações mais claras sobre isso. Mas nada mudou.
Imagem 07 - Captura de tela; site, produto de maquiagem. Acessado em 25 de outubro de 2024
O site até mostra qual o subtom da base, se quente, fria ou neutra, mas para isso você precisa “rolar” a página e procurar naquele texto de detalhes.
Atualmente eu não tenho essa base em casa, mas tenho de outra marca do mesmo grupo. Então, resolvi conferir o site.
Meu teste de experiência no site
Aqui foi um pouco mais complicado pois não há informação sobre o subtom em nenhum lugar.
Além disso, as cores não estão em ordem (do mais claro para o mais escuro, por exemplo), falta rótulo no nome das cores, as fotos parecem genéricas (e mostram em grande parte apenas a embalagem), ao clicar em cada cor de base a página recarrega e ele traz duas “cartelas de cores” na imagem, sendo a primeira delas de outra base da mesma marca.
Há também uma certa confusão quanto às cores: o site diz ter 12, nas amostras à direita tem 11 e na cartela da foto são 10 cores.
Imagem 08 - Trecho do site com a descrição da base. Acessado em 25 de outubro de 2024
Mas como é comum nos sites das marcas do grupo, há uma opção para descobrir seu tom de base, por meio do upload de uma foto sua. Resolvi testar.
Imagem 09 - Prints das telas do simulador “encontre sua base”. Acessado em 25 de outubro de 2024
O site instrui sobre a forma correta de tirar a foto. Tirei a foto de frente a uma janela, usando luz natural.
Imagem 10 - Prints das telas do simulador “encontre sua base”. Acessado em 25 de outubro de 2024
Como imaginei, não deu certo. Inúmeros fatores como a luz ou a câmera do seu celular, podem interferir no resultado. Eis o motivo que prefiro fazer o teste de cores apenas presencial.
Na primeira imagem temos a recomendação de base feita pelo site. Além de escura, a base tem um aspecto amarelado. Minha pele é fria e portanto é mais rosada. Na segunda foto é a base na cor que uso. E na terceira foto eu apliquei a base Daily Tint Cor 13 na metade do rosto.
Importante ressaltar que não estava usando nenhum produto na pele quando fiz as fotos no simulador. Posteriormente, quando apliquei a base, usei apenas esse produto, sem hidratante, pó ou corretivo.
Todas as fotos foram tiradas no mesmo local, com intervalo de minutos entre elas. Importante destacar ainda que durante o teste, o simulador aplica um “filtro” sobre a imagem, o que é mais perceptível na última foto, onde não utilizo filtro. E não, não estou brava. Essa sou eu em um dia normal (risos).
Testando a experiência de compra com outros consumidores
Como designer de experiência do usuário (UX Designer) resolvi testar se essa experiência de compra de maquiagem online era desafiadora para outras pessoas também. Afinal, como analisar esses cenários faz parte do meu trabalho, poderia estar sendo exigente em excesso.
Comecei então a mapear alguns pontos e hipóteses:
Imagem 11 - Matriz CSD; Elaborado pelo autor. Novembro de 2024
A partir disso, elaborei um formulário simples, com 6 questões de múltipla escolha, para validar ou refutar algumas hipóteses:
Imagem 12 - Gráficos com o compilado de respostas do formulário; Elaborado pelo autor. Novembro de 2024
Sei que a amostra é pequena, mas a pesquisa confirma algumas suposições: a maioria das consumidoras fizeram o teste de coloração ou, no mínimo, tem interesse em fazer. Não por acaso o subtom da cor do produto é um dos itens mais relevantes.
Enviei um e-mail à escola onde me formei como consultora, a Studio Immagine. Queria estatísticas como o número de consultoras formadas, quantas e quais cartelas vendem mais, etc. Infelizmente não obtive resposta. No LinkedIn da empresa consta apenas que são mais de 5 mil consultores, mas não sei de quando é essa informação.
No site da escola há apenas um post no blog a respeito de uma pesquisa realizada em 2021, que constata que o Brasil tem mais peles frias, ou seja, peles com subtom rosado ou acinzentado.
Teste de usabilidade
Dentre as 5 pessoas que responderam ao formulário, 3 delas aceitaram fazer um teste de usabilidade. Cheguei a reproduzir a página do site da Eudora para usá-lo com uma ferramenta gratuita de teste de usabilidade. Infelizmente a ferramenta em si não funcionou como o esperado (talvez porque usei a versão gratuita?) e acabei fazendo o teste com a página oficial da marca.
Realizei o teste moderado em formato online, por meio de vídeo chamada e pedi aos participantes que compartilhassem sua tela. Eles deveriam falar em voz alta o que viam, quais as percepções, o que fariam e o porquê.
A tarefa era: “Você decidiu comprar esse produto para experimentar. Navegue no site e escolha a cor da sua base.”
Convidei ao teste apenas pessoas com tom de pele médio, pois se eu convidasse alguém muito branca ou de pele preta retinta, estas escolheriam a primeira ou a última cor de base respectivamente.
Teste 1
Imagem 13 - Teste de usabilidade 1; Adaptado pelo autor. Novembro de 2024
01 - “Considerando que não sei qual a minha cor dessa base, eu colocaria meu braço perto (da foto com a cartela de cores) pra tentar descobrir. Mas sei que a tela distorce a cor.”
02 - "Ah! Pra ver o nome da cor aqui tem que passar o mouse."
03 - Clicou na foto e ampliou a imagem na tentativa de entender qual o subtom da base. Não quer cor amarelada pois sabe que sua pele é fria.
04 - “Essa foto é a mesma ou muda conforme escolho uma cor?”
05 - “Compraria duas cores (as que ficou em dúvida) e misturaria”
06 - Olha o nome da cor, procura por mais informações sobre as cores que geraram dúvida. Rola a página e começa a ler a descrição.
07 - “Texto publicitário: fala um monte de coisa que ninguém liga. Cadê as informações sobre a base?”
Teste 2
Imagem 14 - Teste de usabilidade 2; Adaptado pelo autor. Novembro de 2024
1 - Reclamou do pop-up que apareceu na tela anunciando o para descobrir a cor da base;
2 - Clicou na foto;
3- Não gostou do zoom "automático"; Prefere ter a liberdade de poder decidir quando dar zoom na foto;
4 - Faltam informações no título; Tive que clicar na imagem da embalagem do produto pra ver, por exemplo, que é uma base matte;
5 - A foto parece genérica e não tem legenda;
6 - "Importante ter a tabela de cores, mas prefiro ver o produto aplicado na pele";
7 - "Pra mim, fica melhor base amarela. Acho importante ver essa informação";
8 - "Legal trazer a informação do vencimento";
9 - Ela deslizou a página, fez leitura dinâmica na descrição;
10 - Foi nos comentários e buscou por avaliações com foto; "poderia ter um filtro nos comentários pra buscar os que tem foto". Não notou que existia o filtro.
Imagem 15 - Print da tela do site; comentários. Novembro de 2024
11 - "Apresentaram as cartelas de cores, mas colocaram a do outro produto em cima".
12 - "Estou em dúvida entre as 03 primeiras, não sei a cor de fundo";
13 - "Deveriam colocar as cores em ordem, e na ordem da tabela. Acho que essas estão aqui em baixo porque o estoque esgotou."
14 - "Esse valor parcelado, é com ou sem juros?"
Teste 3
Imagem 16 - Teste de usabilidade 3; Adaptado pelo autor.
1 - Olhou a direto a foto da paleta de cores e ficou em dúvida entre 4 cores;
2 - Achou as cores diferentes na foto da cartela e nas amostras; "Fica mais fácil quando tem foto do produto aplicado na pele".
3 - Notou que falta uma cor na foto com a paleta;
4 - "Geralmente minha cor é bege médio";
5 - Rola a página até as avaliações, e busca algum comentário com foto que a ajude a escolher a cor.
6 - "Não me preocupo com a embalagem, quantidade, etc". Ressaltando que essas informações não são importantes para sua escolha.
Conclusão da primeira fase de testes
As 3 ficaram bastante confusas e nenhuma demonstrou segurança na cor escolhida. Reclamaram que queriam ver fotos do produto aplicado na pele e buscaram essa informação nos comentários.
Todas fizeram uma leitura dinâmica do texto descritivo, que não agradou a nenhuma delas. Além disso, elas só rolaram a página em busca de informações adicionais depois de tentar descobrir a cor da base a partir de fotos e títulos contidos no topo da página.
Teste da solução proposta
Então, o que poderia ser feito aqui para ajudar o consumidor a escolher um produto de maquiagem de forma online?
Com base nos testes, criei essa página (em meu site) com a proposta.
Imagem 17 - Proposta. Elaborado pelo autor. Janeiro de 2025
Após o desenho da proposta recrutei mais duas pessoas para uma nova rodada de testes. Desta vez, elas testavam as páginas A (atual da marca) e B, com a proposta que elaborei. Dei a elas a mesma tarefa que dei ao primeiro grupo: imagine que você irá comprar esse produto.
Teste 1:
Página A - Atual da marca
1 - Achou a tabela de equivalência de cores entre as bases da marca muito útil. Apesar de ter achado um pouco confuso o fato de que algumas cores tem mais de um tom equivalente. Isso se deve ao fato de que uma das linhas de base tem uma gama maior de cores que a outra.
2 - Gostou do fato do site recomendar produtos da mesma linha que se complementam.
3 - Mencionou que sempre olha a descrição do produto, mas acha irrelevante as instruções de uso e ingredientes.
4 - Mencionou também que sempre olha os comentários e avaliações dos outros clientes.
Página B - Proposta
1 - Gostou de ver a foto da Influencer que assina a linha de produtos;
2 - Achou a nova tabela de comparativo das bases mais didática;
3 - Gostou de ver as cores agrupadas por subtom: frio, neutro e quente;
4 - "Muito legal exemplos de aplicação da base em peles reais. Quando não tem no site, tenho que recorrer aos comentários ou procurar vídeos de teste em redes sociais".
5 - Gostou que as opções de filtrar comentários está mais visível na página.
6 - De um modo geral, achou o site mais completo.
Teste 2:
Página A - Atual da marca
1 - A tabela que compara as duas bases da mesma linha ajuda na escolha;
2 - Ficou em dúvida entre dois tons da base. Mencionou que gostaria que tivesse um "swatch" das bases aplicadas na pele de uma modelo, demonstrando as cores; ou ainda, poderiam ter fotos de rostos de modelos usando a base.
Página B - Proposta
1 - "Esse já me agradou de cara!"
2 - As fotos dos rostos das modelos usando a base facilitam a escolha do produto;
3 - Melhor disposição da tabela comparativa entre as bases;
4 - A categoria de subtom facilita na escolha das cores.
É importante destacar que a classificação do subtom das cores não tem qualquer embasamento nas informações do produto. Fiz apenas para esse projeto. Destaco ainda que as fotos dos modelos são de outra base da Eudora, utilizei a tabela de equivalência de cores da própria marca para selecionar as fotos.
Te convido a navegar na página e me dizer o que achou, na sessão de comentários.
Por que não usei o Figma?
Como mencionei anteriormente, eu pretendia usar uma ferramenta online para registrar dados de navegação. Mas para isso, precisava que o site fosse de meu domínio, já que era necessário fornecer autorizações específicas.
Outro ponto importante é que a ideia aqui não era criar um Design System (biblioteca de componentes) da marca. O site que utilizo é do tipo "arrastar e soltar", e eu precisava de uma forma de prototipação rápida.
Considerações finais
Minha intenção com esse artigo é apenas mostrar que, como consumidora da marca, percebo que há pontos de melhoria que podem tornar a experiência de compra no site mais fluída. Inclusive, ao acessar o site no mês de dezembro, notei que um ajuste foi feito:
Imagem 18 - Trecho do site com a descrição da base. Acessado em 07 de dezembro de 2024
Foi adicionado um menu "drop down", que destaca e facilita a seleção da cor. Algo semelhante ao que é apresentado em outra marca do grupo. Porém, essa última traz no nome da cor o subtom. Seria interessante manter a consistência nas outras marcas do Grupo.