Estudo autoral sobre o e-commerce da Growth Supplements: da pesquisa com usuários até um design system em Design Tokens, com escalas de cor, modo escuro e taxa de contraste documentada.
QuandoSetembro e outubro de 2023
O que éEstudo autoral, não um projeto contratado pela marca
MétodoDouble Diamond, Crazy 8’s, Design Tokens
FerramentasFigma e Google Forms
Processo
Por Dentro do Processo
Para orientar nosso projeto, adotaremos uma abordagem amplamente reconhecida: o Double Diamond. Esta metodologia é particularmente eficaz em projetos de design UX/UI, como o que estamos prestes a explorar em nosso estudo de caso.
Nosso processo incluirá os seguintes elementos: pesquisa aprofundada, desenvolvimento do processo de interface, definição do processo inicial para o sistema de design e implementação das melhores práticas para realizar o Handoff. Esses pilares fundamentais garantirão a qualidade e eficácia de nossa entrega, atendendo às necessidades do projeto com excelência.
Razões para a Escolha da Growth. A escolha da Growth como foco deste estudo de caso foi baseada no fato de ser uma marca sólida que já conquistou uma posição proeminente no mercado, tornando-se uma referência pessoal na busca por suplementos e acessórios de treino ao longo do último ano.
Desafios no aspecto da experiência do usuário podem ser cruciais para o sucesso contínuo da empresa, especialmente considerando o uso crescente de dispositivos móveis para compras online.
Discover
O que a pesquisa mostrou.
O cenário do E-commerce no Brasil. Iniciando nossa pesquisa, foi possível identificar que o segmento de e-commerce brasileiro vem crescendo exponencialmente. Isso nos traz a necessidade de nos destacarmos frente à concorrência e oferecer uma experiência de usuário excepcional, conforme mostra uma pesquisa realizada pela Visa Consulting & Analytics.
+de70 Mil
empresas entraram para o e-commerce desde o início da pandemia.
Qual é a empresa Growth Supplements? Você a conhece? A Growth Supplements é uma empresa brasileira que fabrica e fornece suplementos alimentares. Em 2022, ela foi premiada como a melhor loja virtual do Brasil pelo 19º Prêmio NielsenIQ E-bit e reconhecida como uma das 100 melhores empresas em satisfação ao cliente pelo Instituto MESC.
A marca também se destaca por ter sido aprovada em testes de qualidade de suplementos brasileiros. Seu catálogo inclui proteínas, aminoácidos, vitaminas e minerais, e eles oferecem um serviço de nutricionista online para ajudar os clientes a escolher os produtos certos.
User Research — Hora de falar com nossos usuários. Research Tools: Google Forms
Essa é a hora de entendermos o que os usuários pensam e fazem em relação ao produto, por isso é uma ferramenta valiosa para adquirir insights qualitativos e quantitativos que podem enriquecer diversos estágios do processo de design.
Através da pesquisa, consegui aprofundar melhor meu entendimento sobre os desafios que os usuários enfrentam ao comprar suplementos on-line e suas experiências com outros sites do mesmo segmento.
Ao elaborar o questionário, tive o cuidado de evitar suposições e perguntas tendenciosas, garantindo assim que os dados coletados refletissem com precisão as experiências e necessidades dos usuários.
Perguntas:
Qual Site você costuma comprar Suplementos?
O que você procura ao acessar um site suplementos on-line?
Avalie sua experiência de compra online
Quais critérios são mais importantes para você ao escolher um site de suplementos para fazer compras?
Quais são os principais aspectos que influenciam sua decisão de compra em sites de e-comerce de suplementos?
Como você define sua experiência ao navegar pelo site em que costuma comprar Suplementos?
Cite pontos positivos e negativos que você encontra ao comprar Suplementos On-line
O que faria sua experiência de compra online ser mais agradável?
Descobertas:
Através da pesquisa, foi possível identificar que 75% dos usuários acessam o site com um objetivo de compra definido, ou seja, o usuário não passa muito tempo navegando pelo site, por isso devemos ter uma home personalizada com fácil acesso aos produtos mais comprados.
Descobrimos também, que a principal motivação dos usuários do serviço é o custo-benefício do produto e a agilidade de entrega, complementados por um canal que seja claro e de simples navegação.
Análise da concorrência. Agora, vamos olhar com um pouco mais de profundidade para nossa concorrência, assim podemos identificar oportunidades para melhorar ou diferenciar o próprio produto. Ao entender o que os concorrentes estão fazendo bem e onde estão falhando, podemos identificar oportunidades para inovação e melhorias.
Os concorrentes diretos que analisamos incluem Blackskull, Max Titanium, Soldiers Nutrition, New Nutrition e Integralmédica. Além disso, consideramos o Mercado Livre como um concorrente indireto.
Com o objetivo principal de aprimorar a experiência do usuário, listamos alguns critérios para avaliar esses concorrentes:
Navegação no site — Avaliamos a facilidade com que os usuários conseguem encontrar o que procuram. O site é intuitivo e de fácil utilização?
Design das telas de produtos — Observamos como os produtos são apresentados. As imagens são claras e atrativas? As descrições dos produtos são úteis e completas?
Experiência do usuário em dispositivos móveis (Mobile UX) — Como é a experiência do usuário em dispositivos móveis? O site é responsivo e fácil de usar em diferentes tamanhos de tela? Ele mantém sua funcionalidade e estética em dispositivos móveis e tablets?
Avaliações e depoimentos — O site disponibiliza avaliações de produtos e depoimentos de clientes? Eles são fáceis de encontrar e ler?
Imagens e Ícones — As imagens e ícones utilizados são de alta qualidade? Eles contribuem para melhorar a compreensão do usuário sobre o produto ou serviço?
Para otimizar a análise, utilizei uma escala de 0 a 5 para avaliar cada tópico, onde 5 indica que o site atende perfeitamente aos requisitos e 0 indica que o site não atende aos requisitos. Abaixo estão os resultados obtidos:
Resultado da análise: cada concorrente pontuado de 0 a 5 nos cinco critérios.
Define
Qual será nosso desafio?
Durante nossa pesquisa, identificamos um aspecto interessante sobre o site da Growth Supplements. Ao contrário de seus concorrentes, o design do site não foi atualizado por um período considerável.
Isso indica que o site não está em sincronia com os avanços tecnológicos recentes, resultando em uma experiência de usuário menos responsiva do que o ideal.
Portanto, propomos a implementação de um Design Responsivo. Este processo envolve a adaptação do design do site para diferentes tamanhos de tela, garantindo uma experiência de usuário coesa e eficiente em todos os dispositivos.
Além disso, a organização e disposição dos elementos serão otimizadas para melhorar a navegação e compreensão dos usuários.
Crazy 8’s: Hora de gastar nossa caneta.
Crazy 8’s é uma técnica fundamental do Design Sprint. É um exercício rápido que desafia as pessoas a esboçar oito ideias distintas em oito minutos. O objetivo é superar a sua primeira ideia, frequentemente a menos inovadora, e gerar uma ampla variedade de soluções para o seu desafio.Google — Design Sprint Kit
Crazy 8’s: Como resultado, desenvolvi 8 layouts que me auxiliaram a identificar pontos-chave para iniciar a próxima etapa do nosso novo design da página inicial.
Os oito esboços do Crazy 8’s, feitos à mão em oito minutos.
Criação dos wireframes — Média fidelidade. Design Tools: Figma
Os wireframes são componentes essenciais nesta fase do projeto, atuando como o esqueleto do nosso novo design. Eles fornecem uma estrutura visual que nos auxilia a planejar a disposição de elementos e funcionalidades de maneira eficiente.
Iniciei o desenvolvimento de wireframes de média fidelidade utilizando o Figma, uma etapa crucial na preparação para a próxima fase da construção do design. Com os wireframes de média fidelidade, podemos testar rapidamente nossas ideias, concentrando-nos na estrutura e disposição dos elementos. Isso nos permite ter uma visão mais ampla e simplificada do resultado final.
Para facilitar a compreensão, em algumas áreas, adicionei texto para destacar as várias seções que planejamos incluir na página inicial.
Wireframe de média fidelidade da nova home, com as seções anotadas.
Develop
Um sistema, não um conjunto de telas.
Wireframe de alta fidelidade. À medida que avançamos em nosso processo de design, chegamos a uma etapa que é, particularmente, a minha favorita: a criação de wireframes de alta fidelidade.
Nesta fase, cada detalhe é meticulosamente elaborado e cada elemento da interface é aprimorado. Nosso objetivo é não apenas criar uma experiência de usuário excepcional, mas também assegurar que a estética esteja em perfeita harmonia com a usabilidade.
Wireframe de alta fidelidade da home.
Iniciando um Design System. Desenvolver um Design System é vital para a consistência e eficiência no design. Ele permite a incorporação de melhores práticas e feedbacks, resultando em um produto final coeso e fácil de usar, além de economizar tempo e recursos. Existem várias abordagens para criar um Design System, como Atomic Design, Material Design, Foundation-Based e Design Tokens. Para nosso projeto, vamos usar Design Tokens.
Design Tokens cobrem uma variedade de propriedades de design, como cores, tipografia, espaçamento, sombras, tamanhos de ícones e muito mais. Eles são variáveis que armazenam informações de design, facilitando a transição do projeto para a equipe de engenharia.
Para construir um Design System escalável e funcional, é importante estabelecer esses tokens com base em boas práticas de design, considerando a identidade da marca.
Os Design Tokens são estruturados em três camadas:
Tokens Primitivos — São os valores mais básicos, como cores, tipografia, tamanhos e espaçamentos. Eles representam os blocos de construção essenciais do sistema de design.
Tokens Semânticos — Esta camada adiciona significado aos tokens primitivos. Por exemplo, em vez de apenas ter uma cor de botão, você teria um token semântico como “botão principal” que faz referência a uma cor específica.
Tokens de Componentes — Esta camada agrega os tokens semânticos em componentes de interface completos, como botões, campos de formulário, barras de navegação, etc.
Portanto, os Tokens Primitivos, Semânticos e Componentes são uma abordagem estruturada para organizar os design tokens, garantindo que eles sejam utilizados de maneira consistente e significativa em todo o sistema de design. Isso contribui para a flexibilidade, escalabilidade e coesão do Design System.
Escalas de Feedback.
Normalmente, usaríamos a cor verde para feedback positivo e vermelho para negativo. No entanto, como a cor vermelha pertence à marca, não queremos associar a identidade da empresa com algo negativo. Por isso, optamos por usar o laranja para feedback negativo.
Definindo nossas cores primitivas. Em relação às nossas cores primárias, adotaremos uma escala de 10 a 100. O valor 10 representa a proximidade com o branco e o valor 100 indica a cor mais próxima do tom preto.
Nesta etapa, é essencial considerar tanto os aspectos da identidade da marca quanto as demandas específicas do ambiente digital.
Para a Growth Supplements, incorporaremos as duas cores principais da marca, vermelho e azul. Levando em conta as necessidades do sistema, também adotaremos uma escala de cinza.
Esta escala de cinza será aplicada de maneira abrangente, abrangendo elementos como tipografia, bordas e outros aspectos que possam surgir durante o desenvolvimento.
Também estabeleceremos uma escala para feedback, abrangendo tanto feedback positivo quanto negativo, para garantir uma experiência do usuário completa e coerente.
As cinco escalas primitivas — vermelho e azul da marca, mais cinza, laranja e verde. Cada tom traz o nível de contraste que atinge, AA ou AAA. A escala laranja é a que substitui o vermelho no feedback negativo.
Modo Escuro. Ao construir o modo escuro, garantimos que ele contenha a mesma quantidade de cores que a paleta clara, refletindo as mesmas nuances e matizes. Durante esse processo, fazemos ajustes detalhados e, quando necessário, efetuamos pequenas adaptações nas cores para garantir que a experiência seja consistente e visualmente agradável em ambos os modos de exibição.
A paleta em modo escuro, espelhando a clara.
Taxa de Contraste. Ao trabalhar com cores, é importante lembrar que a acessibilidade é fundamental. Precisamos considerar a taxa de contraste das cores, representada pelos ícones AA e AAA, de acordo com as diretrizes da WCAG (Diretrizes de Acessibilidade para Conteúdo Web).
Essas diretrizes nos ajudam a garantir que as cores sejam escolhidas de forma a tornar o conteúdo digital amigável e acessível para todos, independentemente de suas necessidades visuais.
Cada par de cores documentado com o nível de contraste que atinge.
Deliver
O handoff estava no próprio sistema.
A entrega para engenharia não precisou de um documento à parte, porque a arquitetura de tokens já fazia esse trabalho.
Em vez de passar uma tela com um azul específico, o que se entrega é um botão principal que referencia um token semântico, que por sua vez referencia um primitivo. Quem implementa recebe nomes e relações — não valores soltos que se perdem na primeira mudança.
As três camadas funcionam como a documentação: o primitivo diz quais cores existem, o semântico diz o que cada uma significa, e o de componente diz onde se aplica. Trocar a cor da marca vira uma alteração num lugar só, em vez de uma varredura por todas as telas.
E a taxa de contraste documentada em AA e AAA fecha o pacote: quem implementa não precisa decidir se uma combinação passa no critério de acessibilidade — está anotado ao lado da cor.
Origem
De onde veio e onde para.
A parte de design system deste estudo foi construída durante o Design System Advanced, bootcamp ao vivo de 16 horas que fiz entre 20 e 30 de setembro de 2023, com o instrutor Glauber Laender — ou seja, no meio do próprio estudo. É de lá que vêm a arquitetura em três camadas de tokens, a estratégia de escalas de cor e a atenção à taxa de contraste.
O que o curso cobriu:
Estratégia escalável para Design Tokens
Boas práticas para arquitetura das bibliotecas
Arquitetura para multi-marcas, temas e modos
Figma: variants, properties e interactive components
Documentação no Zeroheight
Acessibilidade para design systems
O sistema foi construído até a documentação de tokens e contraste. Não houve implementação em código nem teste de usabilidade com o resultado final — o estudo termina no design entregue, não no efeito medido.
Registro isso porque um design system só prova seu valor quando um time usa. O que este trabalho demonstra é a construção: as decisões de estrutura, a resolução do conflito entre marca e semântica, e a documentação que torna a entrega utilizável por quem implementa.
