Imagem com colagem dos valores do asaas antes e depois do redesign. À esquerda, a tela é azul e contém os valores de comprometimento, respeito e crescimento na versão antiga. À direita, a tela é rosa e contém os valores comprometimento e respeito na versão nova, mais colorida e atualizada. Ao centro, há uma folha com outras ilustrações de pessoas que passaram pelo redesign.

Ilustrando um novo Asaas

Entenda como e por que criamos um novo conceito de ilustrações para o Asaas

Mariana
Estação Asaas 🚀
6 min readDec 8, 2021

--

Uma marca é um conjunto de elementos que juntos representam a mensagem de algo ou alguém; geralmente um logotipo, um esquema de cores, um jeito de se expressar característico seja visual, sonoro, ou verbal. Assim como pessoas mudam de estilo com o tempo, marcas também são vivas (inclusive a do Asaas).

Passamos por muitas reformas nos últimos tempos, começando com uma atualização de logotipo, expandindo para um redesenho do site, do app e até uma reforma da própria sede da empresa.

Enquanto nos preparávamos para dar boas-vindas presenciais a nossos tripulantes após tanto tempo de isolamento, com uma sede toda colorida projetada pela equipe da Soar, vimos que as paredes dela precisariam de objetos, letreiros e imagens que marcassem essa nova fase. Então, aproveitamos o momento para tirar da gaveta uma necessidade que já existia: repensar nossas ilustrações.

Imagem com fundo branco e vários elementos ilustrados do Asaas. Há adesivos coloridos, ícones do aplicativo Asaas, prints de posts nas redes sociais e exemplos de bonecos ilustrados com a pele azul.
(a falta de) estilo anterior

Crescemos muito rápido, e nisso acabamos não tendo tempo para planejar a fundo a maneira como ilustramos. Acabamos com uma colcha de retalhos de estilos parecidos, mas não exatamente consistentes, e nem sob medida. Funcionou e funcionaria por mais um tempo, mas tinha alguns pontos fracos importantes que nos motivaram a mudar.

Por que renovar nosso padrão de ilustrações?

Imagem com fundo azul escuro e desenhos de duas pessoas. À esquerda, na versão nova da ilustração, há uma mulher de pele branca e cabelo loiro fazendo uma expressão de dúvida. À direita, a mesma mulher na versão antiga, tem a pele azul e o cabelo verde.

Comunicação atenciosa

Foto de um cachorro da raça corgi com a língua para fora em frente a um fundo branco. Ele tem a pelagem caramelo, pernas curtas e orelhas arredondadas apontando para cima.
Uma imagem amigável de respiro. (Photo by fatty corgi on Unsplash)

Em geral, imagens são processadas pelo cérebro mais rápida e intuitivamente que textos. Chamam atenção. Reforçam mensagens por redundância. Dão um respiro. Talvez você não estaria lendo esse artigo se ele parecesse uma “muralha de texto” gigantesca, e por isso precisamos pensar nas mensagens que elas transmitem com cuidado.

Força da marca

Ilustrações feitas sob medida favorecem a consistência. Consistência aumenta as chances da marca ser diferenciada de seus concorrentes em um piscar de olhos, e também mostra que é profissional e segura do que está fazendo.

Padronização e escalabilidade

Sem consistência entre si, nem sempre elementos podem ser reaproveitados entre materiais diferentes. Para evitar um frankenstein ou uma colcha de retalhos, os designers acabam tendo que desenhar muitas coisas do começo cada vez que precisam fazer algo novo.

Tendências de mercado

Estilos semelhantes aos que usávamos foram bastante utilizados por muitas empresas e sites de banco de imagens já há alguns anos, e isso não passa batido pela percepção das pessoas. Personagens parecidos, com pernas longas, cabelos arredondados e cores fantasiosas estão sendo marcados como a face do “big tech” e da “corporação forçadamente amigável”.

Imagem com meme sobre o “Big tech corporate art style starter pack”, que ironiza o fato da maioria das empresas utilizarem ilustrações parecidas e forçadamente amigáveis.
Vide memes: isso não é quem queremos ser

Representatividade

O estilo acima é bem abstrato, e não favorece nenhuma etnia, cor, idade ou tipo físico específico. Parece ótimo, mas é exatamente esse o problema: não representa ninguém. Ao evitar o assunto, não conseguimos representar pessoas reais e nem nos ver no lugar dos personagens. Quando prezamos pelo acolhimento e pelo respeito, devemos abraçar as diferenças.

Imagem de fundo branco que contém dois bonecos tipo zé palito na cor azul no topo, sendo um homem e outro mulher. Logo abaixo, há uma grande chave horizontal que abrange outros sete zé palitos diferentes. Eles se apresentam num espectro de tons de pele diferentes, alguns têm deficiências físicas e diferentes tipos de corpos.

Como estruturamos o redesign

Com o prazo da entrega da obra da sede, muito planejamento e muito material para entregar, seria um eufemismo dizer que a sensação era a de estar em um consultório médico ouvindo a clássica expressão:

Imagem com meme que contém uma foto de um idoso tendo sua pressão aferida por uma enfermeira. Ela diz “você vai sentir uma leve pressão” e ele responde “ok”.

Para podermos nos expressar melhor como marca, era preciso primeiro entender quem somos e o que queremos dizer.

“Quem somos? Onde vivemos? Do que nos alimentamos?”

Com ajuda da pesquisa hercúlea de entrevistas, questionários e grupos focais feita para nosso guia de conteúdo, tínhamos algumas respostas do ponto de vista de colaboradores e de clientes sobre suas percepções a respeito do Asaas.

Imagem de fundo branco e textos em rosa e azul escuro. À esquerda, está escrito “Como é nossa voz: Profissional, informativa, inteligente”. À direita, “Queremos que nossos clientes se sintam: confiantes, seguros, respeitados.” Há um círculo abraçando estas palavras e uma seta para a palavra segurança. Abaixo, está escrito “Como é nossa voz: amigável, cuidadosa e simpática. Queremos que nossos clientes se sintam: confortáveis, satisfeitos e compreendidos.” Há uma seta para a palavra “simpatia”.

Estudo de referências externas

Era importante nos diferenciarmos dos nossos concorrentes e similares, mas não ao ponto de parecermos algo estranho (e pouco seguro). Coletamos também referências deles, referências de tendências de ilustração, e percebemos alguns movimentos.

Evoluindo para longe do “Corporate artstyle”, temos basicamente duas vertentes nas ilustrações para marcas:

  • Mais abstração, com formas geométricas, colagens e elementos soltos;

ou

  • Mais realismo: personagens que lembram mais personagens de quadrinhos, com mais detalhes, expressões e referências fotográficas de pessoas reais.

Honrando nosso valor institucional de Respeito e nossa preocupação com inclusão de clientes e tripulantes cada vez mais diversos, a segunda opção fez mais sentido no nosso caso. Para nós, é importante que as pessoas consigam se sentir representadas. A partir disso, buscamos adotar o estilo mais realista para nos representar.

Expressando algo abstrato em gráficos

Como humanos, temos algumas conexões entre formas e significados pré-instaladas no cérebro. Elas variam de acordo com a pessoa, período e cultura, mas em linhas bem gerais:

  • Segurança pode ser associada ao azul e a cores mais sóbrias, formas geométricas, composições estáveis, linhas contínuas e formas contidas. Formas geométricas remetem a construções artificiais, padrão, eficiência e ordem. Podem parecer confiáveis e estáveis, mas o excesso transmite frieza ou agressividade, se houverem muitos ângulos.
  • Simpatia pode ser associada a cores vivas e quentes, linhas orgânicas, pessoas expressivas, composições dinâmicas, coisas feitas à mão, sorrisos, corações e emojis. Formas orgânicas são mais familiares por serem algo com que convivemos a mais tempo e vemos mais na natureza. Pela irregularidade, passam mais espontaneidade e criatividade, mas o excesso pode dar a sensação de instabilidade.

Buscamos um balanço entre essas duas formas: linhas sólidas e seguras, cores vivas, formas mistas, transitando entre poses dinâmicas para comemorações e convites; e poses estáveis para atividades calmas ou notícias sérias. Nossos personagens nunca transmitem frustração ou tristeza.

Simplificando a construção de algo complexo

Adicionar mais detalhes quer dizer ilustrações mais elaboradas, e mais tempo envolvido no desenho delas.

“Mas espera aí, achei que você tinha implicado que a padronização ia ajudar designers a economizar tempo de desenho.”

Imagem com fundo branco e dez ilustrações de rostos na nova versão das ilustrações do Asaas. Eles apresentam diferentes tons de pele e formatos diferentes de queijo, nariz, boca e sobrancelhas.
Imagem com fundo branco e um círculo azul escuro ao centro. Na frente dele, há duas ilustrações de mulheres conversando, sendo que à esquerda uma delas está sentada e segurando uma maçã, e à direita a outra está de pé segurando um celular. Há um balão de conversa vazio entre elas.
Imagem com fundo branco dois desenhos de personagens de ilustração do Asaas. O primeiro tem algumas linhas de guia no meio do tronco e dos membros. Ao lado dele, a mesma figura, porém sem as linhas.

Sim. Com a escolha de caprichar em pequenos detalhes, é preciso poupar tempo em outro lugar. Inspirados por bibliotecas modulares, sites de montar dolls dos anos 2000 e animação esquelética, nossos novos personagens são compostos por módulos de narizes, olhos, bocas, cabelos, roupas e sapatos que podem ser combinados entre si.

As roupas têm cores da nossa paleta institucional, sem sombras, mas com padronagens minimalistas como as que já usamos em outros materiais.

Além de combináveis entre modelos, os braços, pernas, troncos e a maioria das roupas que os cobrem não são formas convencionais: nossos personagens têm “esqueletos” compostos por linhas que se dobram nas juntas naturais do corpo, e podem ser posadas, recoloridas, engrossadas e afinadas.

Com esse projeto nas mãos de nossos designers, eles perdem menos tempo com trabalhos maquinais para pôr suas ideias em prática.

Aonde vamos?

Foto da área de convivência do Asaas. Há mesas dispostas pelo espaço, um balcão com banquetas para refeições. Há utensílios para preparo de refeições (sanduicheiras, cafeteiras e geladeiras). Ao fundo há um piso de grama sintética, pebolim, dois pufes para sentar, tablados com colchonetes e almofadas e uma tv. Nesta parede há a frase “Acima das nuvens sempre há um céu azul!”. Nas demais paredes há plantas sob prateleiras, adesivos com os valores do Asaas e uma frase.
A nova área de convivência

A partir daqui, temos dezenas de adesivos grandes e pequenos colados pelas paredes da nossa nova sede, cumprimentando nossos visitantes, caracterizando espaços, propondo ações, transmitindo mensagens e frases inspiradoras. Saímos à caça de materiais que continuam usando ilustrações antigas (onde nem percebíamos mais que elas estavam) e vamos substituindo eles aos poucos.

Imagem com fundo azul escuro e 14 ilustrações novas. Entre elas, figuram um celular, um computador, aviõezinhos de papel, nuvens, foguetes, uma raposa, uma boneca matrioska e uma cerejeira.
Algumas imagens da biblioteca

Organizamos uma biblioteca de imagens com fundos transparentes para todos os nossos tripulantes usarem como adesivos em apresentações e documentos, e continuamos a expandi-la cada vez mais. Além disso, vamos adaptar ilustrações a formas mais enxutas para mensagens do app Asaas conforme ele for reformulado.

Assim como as pessoas que representamos, nossa marca também é viva, e esse projeto continua crescendo sem perder a essência dos nossos valores.

Estamos com oportunidades abertas! Confira nossas vagas e venha trabalhar com a gente.

Ah, e se você curtiu esse post, não deixe de bater palmas pra ele! 👏

--

--