A Localiza é uma empresa com mais de 50 anos e com inúmeros produtos digitais e físicos para atender necessidades de clientes globalmente.
Durante a construção do estudo, enfrentamos o desafio de construir uma biblioteca capaz de atender o Design Team, que contava na época com 29 Designers (e crescendo) atuando em diferentes tribos e squads de acordo com a unidade de negócio, pensando design de forma holística e atendendo diversos times e perfis de usuários.
Além disso, profissionais com perfis variados, distribuídos em inúmeros estados do Brasil, todos com vivências e bagagens profissionais bastante diferentes, com o mesmo desafio de transformar o futuro da mobilidade.
O projeto nasceu de uma necessidade de padronizar e garantir a escalabilidade das ilustrações usadas nos produtos.
Diante de pesquisas com clientes que tinham dificuldade de interpretar algumas telas e do time em ter ilustrações padronizadas e validadas. Surgiu a necessidade de realizar uma processo para criação e biblioteca.
O primeiro passo foi reconhecer a existência de uma dor. E criar um processo para garantir alguns requisitos básicos.
Assim como em desenvolvimento de qualquer produto, foi estabelecido um escopo e definição de MVP e definições de quais seriam as métricas de sucesso da biblioteca.
Realizamos uma matriz CSD e matriz de necessidades e oportunidades com stakeholders para ter as definições claras.
Além disso, foram realizados pílulas de conhecimento e talks para apresentar termos e conceitos de ilustrações. Garantindo que termos e o que poderia proporcionar a empresa.
Definição dos princípios
Junto ao time de designers após repassar todo o contexto foi utilizada uma matriz para definições de princípios. Da qual obtivemos 4 pilares:
Diverso l Divertida l Amigável l Comunicacional
Agora era hora de trazer um pouquinho dos princípios e aprofundar o estudo.
Discovery
benchmark: foi necessário realizar o processo para entender como os concorrentes de mercado se posicionavam e dialogavam com os usuários através das ilustrações.
aqui foi possível descobrir vários produtos que já desenvolviam bibliotecas de ilustrações e que eram referências de mercado. Exemplo airbnb, Uber, Atlasian e Alibaba. Além de bibliotecas open source como hummmans.
Mapeamento de oportunidades, necessidades e riscos: nessa etapa buscamos entendendo se de fato os nossos clientes tinham a necessidade de apoio das ilustrações nas interfaces para facilitar o entendimento
Dimensões: devido a necessidade de atender diferentes produtos e contextos. Foi necessário realizar um levantamento das resoluções mais usadas dentro da companhia. E verificadas algumas métricas relacionadas a telas recorrentes como páginas de erro como 404, erro de carregamento, onboarding ou ação por parte dos usuários.
Definição de MVP e métricas: além das resoluções, o estudo para entender através de métricas onde localizam o maior número de clientes nos ofereceu a possibilidade de construir ilustrações customizadas conforme a região e hábitos dos clientes. Além de oferecer a possibilidade garantir escalabilidade é ilustrações adequadas ao dia a dia dos usuários, possibilitando um diálogo maior entre empresa e cliente.
Levantamento de ativos
nessa etapa foi necessário entender como os ativos da marca como tipografia, cores e logotipos de diferentes unidades d e negócio conversariam com a marca. Além de respeitar os princípios definidos pelo time.
A partir do estudo construímos uma paleta de cor capaz de atender aos padrões de WCAG garantindo a acessibilidade e que dialogasse com os ativos da marca.
Cores/Tipografia
Todas as cores foram pensadas para garantir uma maior representatividade e diversidade do país. Foram realizados testes e entrevistas para validar o uso e percepção dos clientes.
Nessa etapa realiza os um inventario para entender todos os ativos que a biblioteca precisaria conversar.
Incluindo ícones e tipografia.
Ideação
Além dos levantamentos de requisitos, foi necessário envolver o time no processo de ideação para construção das ilustrações. Além de painéis semânticos fizemos um levantamento através do miro sobre os principais momentos em que eles acreditavam que as ilustrações poderiam ser usadas dentro do produto.
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.
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.
Modelo de ilustração usada para páginas de erro. Exemplo de aplicação de writing de acordo com o guia de writer e estudo de regionalismo. Garantindo uma maior proximidade com os clientes
- Diferencial semântico
- Teste AB
- Teste de usabilidade
- Teste de atratividade
- Teste close
Para validação e maior entendimento das ilustrações foram realizados testes AB. Apresentando aos usuários de maneira randômica e nos dando a possibilidade de entender contextos de qual tem o maior poder de se comunicar com os clientes.
Uso das ilustrações em diferentes momentos e contextos. Com a biblioteca foi possível reduzir o nível de entropia entre os produtos e garantir a escala e princípios que eram os objetivos iniciais.
Uso de ilustrações relacionadas ao modelo de negócio. Tornando as mensagens lúdicas e se adequando ao guia de reiterar.
Durante o estudo foram realizados testes de diferencial semântico e usabilidade para entender o entendimento dos usuários sobre as ilustrações e momentos de uso dos produtos.
Alguns resultados foram apresentados com a nova biblioteca. Podemos destacar a maior unidade na linguagem entre produtos e momentos de uso e maior entendimento dos clientes sobre o que deveria realizar