Introdução
A Startup de chat commerce possui um produto que amplia as funcionalidades do WhatsApp Business para empresas. Com uma interface própria, ela facilita o gerenciamento de conversas e atendimentos. Além disso, oferece recursos específicos para vendas, como integrações com e-commerce, disparo de campanhas, pedidos e pagamentos diretamente pelo WhatsApp.
Em resumo, este produto é uma solução completa para empresas que desejam melhorar o atendimento ao cliente e impulsionar suas vendas usando o WhatsApp.
Problema
Embora seja uma ferramenta poderosa, enfrenta desafios significativos relacionados à sua origem e evolução. Vamos explorar os problemas identificados:
Origem centrada no Desenvolvedor: Este produto de chat commerce foi idealizado e desenvolvido exclusivamente por programadores, sem a participação ativa de designers de interface ou especialistas em experiência do usuário (UX). Essa abordagem, embora comum quando os recursos são escassos, resultou em uma ferramenta funcional, mas carente de refinamento visual e usabilidade.
Crescimento sem foco em Design: Durante seus anos iniciais, cresceu organicamente, mas sem a devida atenção aos aspectos de design. A falta de diretrizes visuais e padrões coerentes prejudicou a experiência do usuário, tornando a ferramenta menos intuitiva e eficiente.
Robustez e complexidade: A ausência de design deliberado levou a uma ferramenta robusta, porém complexa. Os usuários podem se sentir sobrecarregados pela quantidade de recursos e opções disponíveis, dificultando a navegação e a compreensão.
Identidade Visual ausente: A falta de elementos visuais consistentes dificulta a associação da ferramenta a uma marca ou produto específico.
Qualidade visual e Experiência do Usuário: Embora pioneira em muitos aspectos, o produto estava deixando a desejar em termos de qualidade visual e experiência geral. Os usuários podem sentir frustração devido à falta de coerência e à interface pouco polida.
- Escalabilidade de design: A falta de regras e padrões de design acabava prejudicando o dia a dia dos Product Designers, que precisavam parar durante o processo para pensar em como criar elementos e componentes sem qualquer definição de base, reduzindo a qualidade final.
Em resumo, o desafio era encontrar o equilíbrio entre funcionalidade e design, criando uma experiência agradável e eficaz para seus usuários.
Exemplos de como estava antes do Design System
Proposta de solução
Propomos a criação de um Design System abrangente para o produto, concebido desde o início para fornecer diretrizes visuais e padrões de design consistentes. Este sistema será desenvolvido com base em uma análise detalhada das necessidades da plataforma e das melhores práticas do mercado. Ele incluirá uma identidade visual distintiva, diretrizes de design claras e uma biblioteca de componentes de interface reutilizáveis. Ao adotar uma abordagem centrada no design, a Startup de chat commerce estará posicionada para oferecer uma experiência de usuário que se destaque no mercado e atenda às necessidades dos usuários.
Este Design System será submetido a testes regulares de usabilidade e iterações contínuas com base no feedback dos usuários, garantindo sua eficácia e relevância ao longo do tempo.
Princípios
O ponto de partida da criação de um Design System é a definição dos princípios que serão os pilares de sustentação de todo o sistema. A partir desta definição teremos a base para organização das regras, diretrizes, padrões e estilos visuais para geração de elementos e componentes consistentes e eficazes.
Para chegarmos aos princípios, fizemos uma dinâmica com alguns colaboradores de diferentes áreas para entender como eles viam o produto e quais os princípios que acreditavam representar o produto. Numa segunda etapa, conversamos com algumas lideranças e com os fundadores para identificar pontos em comum e pegar uma perspectiva diferente, questionando sobre o produto que eles veem hoje x o produto que eles almejam para o futuro.
Após encerrar estas etapas, fizemos um brainstorm com todos os Product Designers, focado em discutir as informações coletadas e mapear os pontos mais fortes. Por fim, cruzando estes pontos com fundamentos essenciais de boas práticas de design, chegamos aos princípios deste Design System.
Diretrizes básicas
Um projeto dessa escala precisa de diretrizes para que haja consistência e unidade em tudo que for projetado. Principalmente porque o Design System é algo vivo que pode e deve crescer de acordo com que o produto evolui.
Desde modo, os alicerces deste projeto se deram na definição do Grid, das cores, da tipografia e ícones.
Grid
Até então não havia nenhuma regra de grid definida e nem mesmo padrão de colunas e breakpoints. Para resolver isto e já firmar as primeiras diretrizes, optamos por utilizar o 8PT GRID para seguir os padrões do mercado.
Assim garantimos a escalabilidade dos elementos, componentes e páginas facilitando o desenvolvimento tanto para os designers quanto para os desenvolvedores.
Breakpoints e colunas
Pensando na escalabilidade de um produto que atende do celular ao computador, defini os breakpoints conforme padrões de dispositivos mais utilizados no mercado somado a uma breve análise (a partir do Hotjar) dos dispositivos e resoluções mais utilizados pelos seus usuários. E determinei o guia de colunas para cada breakpoint, para facilitar a distribuição dos elementos dentro da página.
Cores
A Startup de chat commerce já possuía identidade de marca com duas cores-base, o amarelo e o preto. Porém, quando avaliamos sua aplicabilidade na plataforma, encontramos um problema de versatilidade e limitação de aplicações.
Para buscar resolver esta questão, fizemos um benchmarking com algumas marcas grandes (Spotify, Slack, Microsoft e Deezer) para entender como elas se posicionavam em relação às cores da marca e as cores de seus produtos. Estas marcas possuem suas cores-base, no entanto, trabalham com uma paleta de cores auxiliar para expandir sua aplicação de modo que atenda as necessidades do produto, mas ainda mantenha a identidade da marca.
Deste modo, concluímos que o melhor caminho era utilizar uma cor auxiliar para dar mais vivacidade e ampliar as possibilidades do uso das cores. E após uma rodada de testes e validações de algumas cores possíveis, chegamos a um tom de azul que tem um bom encaixe junto ao amarelo e preto original.
Para garantir a coerência na aplicação das cores, utilizamos uma distribuição de proporção de uso na tela, considerando as cores-base junto as cores neutras (branco e cinza), para ficar claro sua distribuição quando a pessoa designer for criar uma nova tela.
Sua distribuição traz 70% com a base da página que é branca, 15% de cinza para contraste e/ou profundidade no branco, 7% do preto com detalhes, 6% do azul para destaque sutil e 2% do amarelo para chamadas de ação ou finalização de jornada.
Analisando os cenários de aplicação, entendemos que para este projeto cada cor deveria ter 8 variações de tom, tanto tons escuros e quanto tons claros para intercalarem na aplicação de acordo com a necessidade. Deste modo conseguimos ter uma maior versatilidade no uso de cada cor.
Todos as cores e tons foram cuidadosamente testadas em diferentes aplicações para garantir que não ficassem abaixo da pontuação mínima de contraste, segundo regra da WCAG 2.0.
Por fim, para paleta de cores de alerta de sistema, utilizamos quatro cores-base e seis variações claras e escuras para atender as aplicações de fundo claro e escuro, sem perder sua consistência ou legibilidade.
Tipografia
Aqui definimos a família de fonte padrão do produto como a Roboto, pelo fato da sua excelente legibilidade e escalabilidade com diferentes variações.
Consideramos que o produto tem aplicação web app e mobile app, sincronizamos aquelas que funcionariam em ambos cenários mas também alinhamos algumas fontes com aplicação dedicada para garantir maior qualidade e cuidado na interface.
Ícones
Para a bibliotecas de ícones entendemos que não haveria necessidade e nem disponibilidade para criar todos os ícones do zero, então optamos por utilizar uma biblioteca base separando aqueles que faziam sentido para nosso produto.
No entanto, mesmo utilizando uma biblioteca pronta, algumas vezes não há nenhum ícone que represente tão bem aquilo que precisamos. E nestes casos é necessário criar um novo ícone, porém criei diretrizes e regras para garantir que estes novos ícones sigam o padrão da biblioteca base para que não haja inconsistência visual.
Tokens
Um ponto importante da sincronização entre o design e o desenvolvimento é a definição de tokens únicos para identificação dos elementos e componentes do Design System. Este ponto foi feito em parceria com os desenvolvedores front-end, responsáveis pela implementação do Design System, para assegurar um padrão e facilitar a identificação dos componentes.
Organização do conteúdo
Considerando as limitações do Figma e a quantidade de conteúdo que um arquivo de Design System possui, a organização torna-se essencial para um bom uso no dia a dia e claro, para apresentação para novos membros do time.
Componentes
Cada tipo de componente possui uma necessidade específica que pode torná-lo simples ou complexo. No entanto é importante entender estas necessidades para otimizar a construção deles de modo que tudo que fizer seja algo realmente necessário e útil.
Microcomponentes
Regras e cenários
Propriedades
Resultados
A implementação de diretrizes visuais claras e a criação de uma identidade visual distinta permitiram associar a ferramenta a uma marca reconhecível, ao mesmo tempo em que simplificavam a complexidade da interface.
Além disso, o design system proporcionou uma base sólida para o desenvolvimento de componentes de interface reutilizáveis, promovendo a consistência e a escalabilidade do design. Com regras e padrões definidos, os Product Designers puderam concentrar seus esforços na criação de elementos e componentes sem interrupções, resultando em uma melhoria significativa na qualidade final do produto.
Em suma, o projeto de design system não apenas abordou os desafios enfrentados pela Startup de chat commerce, mas também gerou resultados tangíveis em termos de qualidade visual, usabilidade e eficiência geral da plataforma. Ao encontrar o equilíbrio entre funcionalidade e design, a Startup de chat commerce está agora melhor posicionada para oferecer uma experiência excepcional aos seus usuários, mantendo-se à frente no mercado competitivo de comunicação digital.