Desafio
À medida que a Dito continuava a crescer, tanto como produto quanto como empresa, um dos desafios que enfrentávamos era aprender a refinar a identidade da marca e aplicá-la de forma coesa em cada um de nossos produtos. Criamos esse guia de estilo para atuar como um local central, onde hospedamos um inventário ativo de componentes da interface do usuário, diretrizes da marca, ativos da marca, trechos de código, diretrizes do desenvolvedor e muito mais.
Linguagem de design coesa
Garantir uma linguagem visual mais simples, divertida e comunicação mais clara com todos.
Velocidade nos processos de design
O Styleguide é um inventário vivo de componentes de interface, padrões de design, ativos de marca e diretrizes e processos de design.
Etapas na construção
Entendimento do problema
Pesquisa sobre maturidade do Design para entender a percepção do time e stakeholders
Conversa com envolvidos para entender processos
Workshop para definição de princípios
Analise de inconsistências e definição de correções e processos com o time
Teste de ferramentas para documentação e integração com a Stack utilizada
Documentação
Repasse do conteúdo para toda a empresa e criação de material para onboarding
Dinâmica de facilitação para entender os fluxos internos, processos e gaps do time.
Princípios definidos pelo time
Clareza
Escalabilidade
Consistência
Qualidade
Definição de documentação
Building Blocks: Paletas de cores, escalas tipográficas, grids e icones;
UI Patterns: Templates, modulos, componentes e elementos;
Rules: Design principles, Guidelines e brandbook.
Processos, briefing e área educacional
Ferramentas usadas
Branding
Cores
Durante o estudo o time de marketing levantou as dores que havia durante o processo de impressão. Pois durante a construção da marca, foi priorizado o digital o que dificultou processos de impressão para algumas cores e por vezes gerando inconsistências.
Realizei o estudo de WCAG para entender se as cores que a marca utilizava atendia os padrões de acessibilidade. E se isso poderia gerar alguma dificuldade para nossos usuários finais.
Todas as cores passaram a ter a versão CMYK e Pantone, visando resolver os problemas do marketing para criação de materiais promocionais e evitando ruídos da marca internamente.
Todas as cores estavam relacionadas ao documento base construído no Figma, e qualquer mudança significativa na marca seria atualizada automaticamente no documento.
Durante a pesquisa do projeto, ficou claro que muitas pessoas não entendiam os termos usados pelos designers.
Diante disso, foi criado um glossário para facilitar a compreensão.
Este glossário é exibido ao final de toda página. E era nutrido conforme o surgimento de palavras novas ou relato de dificuldade durante o onboarding.
Recursos
A documentação disponibilizou toda tipografia e imagens nos formatos padrões. Facilitando a comunicação interna e uso incorreto das definições pré-estabelecidas.
Processos
Com a Stack definida pelos designers de Marketing e Produto. Definições documentadas e alinhamento com times da empresa, foi necessário construir uma área para solicitação de demandas ou relato de desejos. Para isso foi criado uma integração entre o Styleguide e form através do Pipedrive onde era construído o Kanban do time e definido a urgência da demanda solicitada.