Como construímos o guia de ilustra do iFood
Nesse artigo conto como criamos o Guia de Ilustração do iFood e como estamos integrando a ilustração ao nosso design system
O desenho como forma de comunicação tem acompanhado o ser humano muito antes da história formal ser escrita. Não por acaso, somos constantemente seduzidos pela imagem e seu poder de comunicação.
Um exemplo é a diferença entre falar, escrever e desenhar uma ideia. Por exemplo: qual a diferença entre falar chuva, escrever chuva ou desenhar chuva?
Naturalmente, a palavra chuva é percebida mais rápido que o desenho da nuvem com pingos. No entanto, ela é uma convenção linguística. Se traduzirmos chuva para outro idioma muitas pessoas não serão atingidas pela mensagem.
Por outro lado, o desenho da nuvem com pingos é universal e, por isso, mais acessível. Mas ele não exclui a necessidade de texto. Apesar da imagem ter uma legibilidade universal, ela não consegue atingir alguns níveis de compreensão que os textos possibilitam.
Assim, uma combinação de texto e imagem é bem mais rica para a compreensão do público do que as duas linguagens isoladas.
Essa é a base da ilustração para produtos digitais e da forma como trabalhamos no iFood.
A ilustração em produtos digitais
Em muitos mercados, a ilustração é tratada como um item de consumo rápido que serve a propósitos pontuais. No iFood, porém, partimos do princípio de que ela pode ser muito mais.
Ela deve ajudar os usuários a navegarem pelas nossas interfaces de maneira prática e intuitiva. É mais produto de design que obra de arte. Sua portabilidade, adequação a plataformas digitais e interação com o usuário são decisivas para funcionalidade dos produtos.
Mas como chegamos nesse ponto?
Em janeiro de 2019, tínhamos uma pergunta: como a ilustração pode ajudar a construir um aplicativo? Na busca da resposta, fomos guiados por exemplos de empresas que usam ilustração como parte de um sistema de design, como o Dropbox e o Mailchimp.
Essas empresas têm dois pontos em comum: elas usam a ilustração para gerar valor para a marca e, ao mesmo tempo, exercer um diálogo atual e constante com seus consumidores. Essa abordagem só é possível porque, nessas empresas, a ilustração é realmente encarada como parte fundamental do Design System.
Com essa percepção, delineamos dois grandes momentos do trabalho de ilustração que desenvolveríamos no iFood:
- Criação de uma nova linguagem visual
- Inserção da ilustração no nosso Design System
Criando uma nova linguagem
Ainda no primeiro semestre de 2019, fizemos um benchmarking de outras empresas que elegemos como referências para nossa linguagem e para o nosso sistema. Não se tratavam só de concorrentes; grandes marcas do entretenimento também foram o foco.
Disney Pixar e Studio Ghibli são os melhores exemplos de criação de dossiês criativos e boards de ilustração. Como eles sempre têm o desafio de envolver totalmente a audiência numa história imersiva, seu cuidado com detalhes e refinamento se tornaram uma inspiração para qualquer empresa que queira trabalhar com ilustração.
Cartunistas como Saul Steinberg também são incríveis exemplos de conexão entre linguagem falada e escrita.
Mas nossa nova linguagem não precisava só de inspiração de mercado. Também buscamos alinhamento com nosso time de design de conteúdo e, por isso, bebemos dos conceitos do Guia de Conteúdo do iFood que havia sido criado recentemente por nossos contents.
Voz e tons
Quando começamos a construir nossa linguagem de ilustração, a brand persona do iFood já era bem definida no mercado publicitário, marcada pela grande irreverência presente em nossas peças para TV e redes sociais. Logo, os desenhos deveriam seguir esse humor.
Nas interfaces, porém, deveríamos ser mais leves e instrutivos. Manter a percepção de marca, claro, mas com a meta principal de que o consumidor atinja seus objetivos da forma mais simples possível.
A partir dessa ideia, rodamos uma dinâmica com os times de produto e marketing no começo de 2019. Nela, criamos uma régua utilizando palavras antônimas inspiradas em características de personalidade que consideramos importantes.
A partir da eleição coletiva de características, chegamos à conclusão que a mensagem visual do iFood deveria:
- Ser direta, mas sem deixar de lado o aspecto emocional;
- Ser mais simples do que detalhada, sem perder o charme de pequenas intervenções;
- Conter uma mensagem positiva, mas levando em consideração tons mais neutros;
- Ser o mais inclusiva possível, pois nosso produto é para todas as pessoas;
- Ser transparente, comunicando-se com o usuário sem floreios desnecessários.
Com essa régua em mãos, partimos para a criação das premissas de nossa ilustração e de suas metas. Assim, surgiu o primeiro mood board de ilustração do iFood.
Nesse primeiro board, já tínhamos a primeira visão do trabalho: simplicidade, humor, exploração geométrica, além de biotipo e gênero indefinidos.
E o board foi muito bem aceito pelo time! Sentimos que estávamos no caminho certo, mas ainda que aquilo ainda não se tratava de uma expressão genuína da marca.
Isso porque, naquele momento, ainda estávamos pensando na ilustração mais como arte do que como design. Essa etapa foi boa como referência inicial para as nossas futuras criações, mas insuficiente para o que precisávamos.
Guia de ilustração
Depois do primeiro board, criamos alguns outros. Eles tinham todo o humor que o iFood precisava e estavam no caminho do refinamento. Criamos figuras sem gênero, bem humoradas e em uma relação “exótica com a comida”.
Mas essas ilustrações ainda não conseguiam contar, dentro do fluxo de um produto digital, como pagar um pedido com QR Code, ganhar um cupom ou mesmo se cadastrar em um dos nossos serviços.
Era muito importante que as pessoas reconhecessem que estavam dentro do aplicativo do iFood. Ao perceber isso, passamos a experimentar a ilustração como forma sistêmica. Depois de vários testes, chegamos a uma linguagem de imagens com alguns propósitos. O Guia de Ilustração, de várias formas, foi nosso modo de criar unidade.
O nosso primeiro guia de ilustras foi feito a partir desses princípios acima. Hoje, contamos com esse manual para tudo que envolve ilustração na empresa, desde um projeto interno até ações de marketing.
Alguns exemplos do que delineamos no Guia:
Inserção da ilustração no Design System
Em setembro, com o guia em mãos, começamos a planejar os próximos passos que nos ajudariam a unificar a linguagem dentro da empresa e surgiu uma nova pergunta:
Como fazer para que a ilustração continue sendo relevante e adaptável para as realidades múltiplas e transitórias de uma empresa de tecnologia?
Foi aí que o Figma se tornou um grande parceiro. Como temos a possibilidade de criar uma biblioteca de símbolos dentro da plataforma, percebemos que poderíamos ter um sistema que garantisse a aplicação da ilustração em todos os produtos, gerenciando-a a partir de arquivos facilmente atualizáveis.
Isso significou um grande ganho e transformou a nossa ilustração em algo sistêmico.
Hoje, temos regras de dimensionamento para diferentes imagens. Criamos guides pra ilustrar o uso em relação ao formato de uma ilustração. Quando temos uma imagem muito simples, por exemplo, ela pode aparecer em tamanhos menores do que imagens em que a informação é mais complexa.
O sistema do Figma nos ajuda a guiar o uso de ilustrações dentro das necessidades de três grupos de usuários (e interfaces) diferentes: consumidores, restaurantes e entregadores. Com ele, podemos pensar em adaptações e numa gestão das imagens baseada em atualização automática, o que faz com que a ilustração se transforme num sistema de fato.
Olhando para o futuro (e o passado)
Esse foi nosso trabalho em 2019. Agora nos encontramos na fase de testes com o usuário final, levando em consideração suas impressões sobre nossos personagens, adaptando nossa linguagem aos propósitos dos produtos.
Não elaboramos algo descartável, e sim um sistema com constantes melhorias e adaptações.
Construir um guia de ilustrações é como criar uma nova língua. O entendimento das pessoas que usarão esta língua é sempre o mais importante. Para tanto, devemos sempre chegar a um acordo sobre se todos entendem a mensagem da imagem e se a ligação com o texto faz com que o consumidor compreenda melhor.
Assim como o “vosmecê” se tornou o “você” que hoje é “vc”, nossos personagens também vão se adaptando à linguagem social do momento de forma sistêmica, como deve ser a gramática, tanto a visual quanto a escrita.
Os sistemas mudaram com o passar dos anos. A informação é construída de formas mais complexas do que como era feito na parede das cavernas. Porém, a necessidade humana de comunicar e gerar entendimento é a mesma. É por isso que se faz uso de uma linguagem tão ancestral quanto a ilustração.
No final do dia, um homem da caverna desenhando um bisão na parede para falar sobre a caça não é tão diferente de uma ilustração de comida para ensinar e incentivar nosso clientes a pedirem no iFood.
Quer receber conteúdos exclusivos criados pelos nossos times de tecnologia? Inscreva-se.
