A Localiza é uma empresa com mais de 50 anos e um ecossistema de produtos físicos e digitais que atende clientes globalmente.
O desafio foi criar uma biblioteca de ilustrações escalável e padronizada para um time de 29 designers, distribuídos em diferentes squads e localizações, com perfis diversos e foco em soluções integradas de mobilidade.
A iniciativa surgiu da necessidade de unificar a linguagem visual e melhorar a interpretação das interfaces. Pesquisas com usuários mostraram dificuldades na leitura de algumas telas, e internamente havia falta de consistência nas ilustrações.
A partir disso, iniciamos um processo de criação e gestão de uma biblioteca centralizada, com critérios claros de uso, visando eficiência, escalabilidade e alinhamento entre os times de design.
Alinhamento estratégico e definição do MVP
O primeiro passo foi reconhecer o problema e estruturar um processo com requisitos mínimos para a biblioteca.
Definimos escopo, MVP e métricas de sucesso, como em qualquer produto digital. Para alinhar expectativas, conduzimos uma matriz CSD e uma matriz de necessidades e oportunidades com stakeholders de diferentes áreas.
Também promovemos talks e pílulas de conhecimento para apresentar conceitos fundamentais de ilustração, esclarecendo termos e demonstrando o valor estratégico desse ativo para a empresa.
Definição dos princípios
Após o alinhamento inicial, conduzimos uma dinâmica com o time de design para definir os princípios da nova biblioteca. Utilizamos uma matriz de priorização para organizar ideias e alinhar expectativas.
Como resultado, chegamos a quatro pilares que orientariam todas as criações:
Diversa | Divertida | Amigável | Comunicacional
Com os princípios definidos, avançamos para uma etapa mais aprofundada do estudo, conectando esses valores à linguagem visual e ao uso prático das ilustrações.
Benchmark
Analisamos referências como Airbnb, Uber, Atlassian, Alibaba e bibliotecas open source (ex: Humaaans) para entender como grandes produtos usam ilustrações para se conectar com usuários.
Necessidades e oportunidades
Mapeamos pontos da jornada onde as ilustrações poderiam apoiar a compreensão das interfaces, validando com base em feedbacks e comportamentos de uso.
Contexto e dimensões
Levantamos as resoluções mais utilizadas e identificamos padrões em telas críticas, como páginas de erro, onboarding e ações que exigem interação do usuário.
MVP e métricas
Definimos um MVP com foco em ilustrações adaptadas a diferentes
regiões e perfis de uso, garantindo escalabilidade e relevância para
o dia a dia do cliente.
regiões e perfis de uso, garantindo escalabilidade e relevância para
o dia a dia do cliente.
Ativos de marca
Avaliamos como tipografia, cores e logotipos se conectam aos princípios definidos. A paleta final respeita a identidade da marca e os critérios de acessibilidade (WCAG).
Cores/Tipografia
As cores foram escolhidas para representar a diversidade cultural do Brasil. Realizamos testes e entrevistas para validar a percepção dos usuários.
Também fizemos um inventário dos ativos visuais com os quais a biblioteca deveria se integrar, incluindo paleta de cores, tipografia e ícones, garantindo consistência com a identidade da marca.
Ideação
Envolvemos o time de design no processo de ideação para garantir alinhamento e repertório visual. Utilizamos painéis semânticos e uma dinâmica no Miro para mapear os principais momentos em que as ilustrações poderiam ser aplicadas nos produtos.
Semântica/tokens
Com o inventário de ativos, princípios, cores , grids e resoluções.
Foi necessário criar uma semântica para construir os tokens e garantir a escala das ilustrações. Isso possibilitou que os arquivos no Figma fossem organizados e os componentes escalassem de maneira padronizada.
Ao lado estrutura usada para construção dos tokens
Com os tokens definidos tínhamos a visão do todo. Era hora de criar
as ilustrações.
as ilustrações.
Exemplo de ilustração usando mobiliário presente nas agências da Localiza e variantes disponíveis para uso.
Todas as ilustrações eram componetizadas. Permitindo aos designers a customização e mudanças de acordo ao contexto.
O mesmo modelo em escala se aplica aos personagens, cenários, mobiliários e elementos de apoio.
Desenvolvemos modelos específicos para telas de erro, integrando elementos visuais à linguagem definida no guia de writing da Localiza.
Os textos foram adaptados com base em estudos de regionalismo, garantindo maior proximidade e identificação com os diferentes perfis de clientes.
Realizamos testes A/B com variações de ilustrações exibidas de forma randômica para os usuários. Isso nos permitiu identificar quais versões geravam melhor entendimento e conexão com o contexto de uso.
Diferencial semântico
Ilustrações alinhadas à linguagem e valores da marca.
Ilustrações alinhadas à linguagem e valores da marca.
Teste A/B
Comparação de versões para medir impacto na performance.
Comparação de versões para medir impacto na performance.
Teste de usabilidade
Avaliação da clareza e apoio na navegação.
Avaliação da clareza e apoio na navegação.
Teste de atratividade
Verificação do apelo visual e engajamento.
Verificação do apelo visual e engajamento.
Teste close
Teste de compreensão isolada da ilustração.
Teste de compreensão isolada da ilustração.
As ilustrações foram aplicadas em diversos momentos da jornada do usuário, adaptadas conforme o contexto.
A biblioteca permitiu reduzir a entropia visual entre os produtos, garantir consistência e escalar o uso com base nos princípios definidos no início do projeto.
Aplicações e Resultados
As ilustrações foram aplicadas em diversos momentos da jornada do usuário, adaptadas conforme o contexto.
A biblioteca permitiu reduzir a entropia visual entre os produtos, garantir consistência e escalar o uso com base nos princípios definidos no início do projeto.