Como criamos um guia de estilos para a CoBlue
Quando montamos o time de UX/UI na CoBlue eu fiquei responsável por UX e o Wesley Regis por UI, éramos a dupla perfeita e tocávamos os projetos com consistência do início ao fim. Mas com o passar do tempo tivemos um ótimo problema: a CoBlue cresceu!
Consequentemente, o nosso time também cresceu e com a chegada da Sté, do Luan e da Alice sentimos na pele a necessidade de padronizar as nossas criações em UI para não transformar a plataforma em um carnaval de cores, fontes e botões.
Foi um processo novo para todos nós por isso tivemos que estudar alguns conceitos e contornar alguns desafios durante o processo para que então ao final tivéssemos a versão do Guia de Estilos de UI da CoBlue, e assim permitir que os designers fossem mais independentes e escalassem a produção de telas, consequentemente diminuindo o tempo de criação nos projetos pela metade.
Vou comentar abaixo um pouco sobre como foi o processo de construção do guia:
Divisão das tarefas
Por mais que o time tivesse crescido ainda não tínhamos braços o suficiente para conseguir alocar uma pessoa em tempo integral para se dedicar totalmente à construção do nosso guia.
Dessa forma, transformamos o que seria uma entrega de uma pessoa para uma entrega do time. E assim, toda semana, durante um mês e meio, nos reuníamos para discutir e criar nossos elementos.
Essa “divisão” de tarefas foi uma prática que agregou muito para todo o time, conseguimos criar um sentimento de colaboração, no qual todos estavam trabalhando juntos, tomando decisões e contribuindo de alguma forma independente do seu cargo ou experiência.
Estrutura
O guia de estilos foi uma construção em equipe para a equipe, assim, as primeiras decisões que tivemos que tomar foram: onde ficaria documentado e o que colocaríamos nele.
Para a documentação, como utilizamos o Figma na elaboração das interfaces, optamos por construir e criar os componentes diretamente nessa plataforma, para escalar o processo de construção e alteração de telas no futuro.
Como bons UXs, quanto a decisão de quais elementos construiríamos, pesquisamos em dados secundários online o que seria melhor para nossa primeira versão. Além de analisar a nossa opinião como designers do que precisávamos padronizar naquele momento. Assim, definimos que nossa primeira versão do guia contemplaria: cores, tipografia, botões, inputs e ícones.
A contribuição desses materiais de referência foi fundamental no nosso processo de construção, e gostaria de deixar alguns artigos de referência que utilizamos: UI cheat sheet: buttons, Botões em UI Design, Você sabe usar tipografia em UI Design?.
Construção e Validação
Nossos encontros semanais tinham que ser super focados para conseguirmos cumprir nosso prazo de entrega do guia. Reservávamos 2 horas para a construção dos elementos e o objetivo de cada encontro era sair com o máximo de elementos prontos e como componentes no Figma para já conseguirmos utilizar nas telas e começar a validar.
Dito isso, a nossa missão principal era construir um guia de estilos mais “simples” que nos possibilitasse, paralelamente, criar as telas dos projetos e aproveitar os momentos de teste de usabilidade para validar as mudanças, seguindo o ciclo de construir rápido, testar rápido, arrumar mais rápido ainda, agregando ao valor Lean da CoBlue.
Padronização da plataforma
Não éramos uma equipe madura o suficiente para de início criar um Design System com a equipe de front-end para toda a plataforma e ainda não tínhamos os recursos necessários para padronizar todo o sistema de uma única vez, o que é um grande sonho da nossa equipe. Mas ainda assim tínhamos os dois desafios de padronizar: os projetos antigos no Figma e os componentes no sistema em produção.
Os projetos que já estavam em andamento no Figma foram adaptados com os novos componentes e aqueles finalizados preferimos não alterar o histórico dos projetos, visto que já estavam em produção.
Para a plataforma, optamos por atualizá-la aos poucos, por meio do desenvolvimento das nossas features e melhorias que temos no roadmap, e assim conseguimos fracionar os custos de desenvolvimento das alterações, essa prática funcionou muito bem para conseguirmos fazer melhorias incrementais no sistema.
Adaptação dos desenvolvedores
Agora que tínhamos um novo guia de estilos foi o momento de ensinar os nossos desenvolvedores a encontrar as informações no Figma. Felizmente não tivemos nenhum problema com essa adaptação, pelo contrário, conseguimos diminuir os retrabalhos de detalhes que sempre apareciam nas telas, agora eles têm um padrão para seguir ficou mais fácil para todos.
Próximos passos
Com a evolução dos nossos projetos e testes com usuários estamos validando aquilo que foi construído e assim conseguimos cada vez mais aprender e evoluir nosso guia de estilos, para que um dia esteja maduro o suficiente para se tornar um Design System.
Particularmente, para mim, a construção do guia foi um grande desafio, visto que UI nunca foi um dos meus pontos fortes, foi com certeza um passo marcante na minha carreira. Não obstante, foi importante para todo o time e para aumentar a maturidade de UX na CoBlue.
Se eu tivesse que dar uma dica para quem sente as mesmas dores que tínhamos com UI é: Comece! Construa rápido para aprender mais rápido e corrigir os erros ainda mais rápido. O design é dinâmico e estará em constante mudança, então não espere tudo estar perfeito para lançar de uma única vez, o legal de se trabalhar com design é aprender com tudo o que fazemos.
Algumas das referências utilizadas
UI cheat sheet: buttons — https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112
Botões em UI Design — https://medium.com/tableless/botoes-em-ui-design-e8e8a7473747
Build it in Figma: Create a Design System — Foundations — https://www.youtube.com/watch?v=EK-pHkc5EL4&t=591s
The type system — https://material.io/design/typography/the-type-system.html
Você sabe usar tipografia em UI Design? — https://medium.com/ui-lab-school/voc%C3%AA-sabe-usar-tipografia-em-ui-design-9ce4ccdbab43
Foundation Color | Lightning Design System (Community) — https://www.figma.com/file/unzxSaViCiGBf0m6VJnTOp/Foundation%3A-Color-%7C-Lightning-Design-System-(Community)?node-id=0%3A5
VKUI Color Pelette (Community) — https://www.figma.com/file/kjt1xX7orSD6eflSbAaaFb/VKUI-Color-Palette-(Community)?node-id=0%3A1
VKUI Web Library Beta (Community) — https://www.figma.com/file/wGE4wvybyh8HMuDy6N2Ton/VKUI-Web-Library-%C2%B7%C2%A0Beta-(Community)?node-id=1%3A35
Bean UI Kit (Community) — https://www.figma.com/file/D6fR42GJuZcGUL2G42VHRO/Bean-UI-Kit-(Community)?node-id=0%3A1
Carbon Design System — https://www.carbondesignsystem.com/contributing/contribute-icons/
