A nova biblioteca de ilustrações da Conta Azul: Da conceituação à implementação de um modelo customizável e escalável

Mariane Neumann
Conta Azul Design
Published in
8 min readDec 3, 2020

Como o time de Design Ops aproveitou o rebranding da marca para repaginar — e humanizar — a biblioteca de ilustrações, transformando em uma ferramenta customizável para o time de Product Designers.

Há um tempo atrás, o Zanini —nosso Designer Manager — escreveu o artigo “Escalando ilustrações, sem um ilustrador”, contudo de lá para cá muitas coisas mudaram dentre elas: a marca se repaginou, construímos uma nova identidade visual e eu, Mari, entrei para o time 🙌🏻

Olá, sou a Mariane — ilustradora aqui no time de Design Ops — e assim como a maioria das pessoas que são apaixonadas por desenhar eu sou ilustradora desde o meu primeiro traço e vim aqui contar para vocês um pouco como foi o processo de refatoração e implementação das novas ilustrações da Conta Azul.

Em dezembro de 2019 eu ingressei no time de Design da Conta Azul com o desafio de recriar as ilustrações da empresa, alinhando-as com ao processo de rebranding que estava em progresso. Durante este processo, entendemos que precisávamos evoluir nossa comunicação visual como um todo e criar ilustrações que fossem autênticas, afinal, além da nova identidade visual, também construímos uma tipografia exclusiva, ou seja, para fazer uma entrega completa da nova experiência visual da marca as ilustrações eram uma parte importante dessa mudança.

O começo: integrar os atributos da marca ao conceito das ilustrações

A base fundamental para o ponta-pé inicial no processo de conceituação era integrar os atributos da nossa marca, o novo desenho deveria transmitir as mesma linguagem e características redefinidas no processo de rebranding:

  • Simples — porque é objetiva;
  • Parceira — porque é boa ouvinte;
  • Transformadora — porque olha para o futuro;
  • Segura — porque inspira confiança.

A partir de uma análise mais abstrata dessas características combinadas com os elementos da cultura, inspirações de estilos gráficos e um estudo mais aprofundado de cores, demos início ao processo criativo com a montagem de moodboards.

A nossa cultura nos inspira todos os dias, por que não ser a nossa inspiração?

Moodboard inspiração lugar. #PraCegoVer: Imagem de várias fotos de ambientes Conta Azul. Dois ambientes com sofá azul e almofada branca, uma vista superior de varias mesas com computadores e blocos azuis e roxos ao lado, e outro ambiente com um puf azul e dois amarelos, escrito Conta Azul em branco ao fundo.

A cultura da Conta Azul é sim contagiante! Para quem nos conhece — principalmente pessoalmente — sabe que nos cercamos de valores e princípios, mas há também muita simbologia espalhada por todo canto. Portanto, fomos buscar e identificar todos elementos que refletissem o que a empresa representa. Existem alguns símbolos que são bastante presentes na nossa empresa e assim, foi a partir deles que iniciamos os primeiros rascunhos.

Autenticidade como identidade: a busca por estilos gráficos únicos

Moodboard inspiração estilo gráfico. #PraCegoVer: Imagem dividida em quatro partes, na primeira parte cinco mulheres desenhadas, escrito ao lado traço orgânico e curvilíneo. Segunda parte ao lado, cinco personagens caminhando em fila, escrito brush personalizado e proporção de corpo livre. Terceira imagem, dois cachorros e duas cercas de madeira desenhados de forma bem simples, escrito traço como desenhado à mão. Quarta imagem, quatro personagens femininas caminhando de braço engatado uma na outra, escrito braços e pernas simples.

Para trazer o atributo “Simples” para o conceito, fizemos uma pesquisa em torno de estilos, artistas e construções visuais a fim de criar um painel com inspirações de estilos gráficos que são bem-sucedidos em transmitir a sensação de simplicidade, objetividade, através do traçado do desenho, afinal, este também é um dos pilares do time de design: “Transformamos o complexo em simples”.

As cores da marca ganham reforços nos desenhos

Moodboard inspiração de cores. #PraCegoVer: Imagem dividida em cinco partes. Primeira parte, várias cabeças de personagem desenhado com cabelos azuis e preto, formas orgânicas ao fundo nas cores azul, amarelo e rosa claro. Segunda imagem formas geométricas nas cores azul, amarelo, salmão e roxo. Terceira imagem, dois personagens, de contorno, cabelos pretos e blusa amarela, montando um quebra-cabeça azul. Quarta imagem, uma personagem feminina, com pele amarela, cabelo e calça azul escuro, segurando uma câmera fotográfica. Quinta imagem, várias personagens femininas, desenhadas em várias posições diferentes, aparentando estar dançando, em tons de azul e branco.

Embora tivéssemos uma paleta de cores já definida no brandbook, entendemos que para trazer um caráter funcional para as ilustrações seria preciso criar uma paleta de cores adicional que fosse especial para o uso nas ilustrações. É preciso reforçar que as ilustrações estarão sempre presente nos fluxos e navegação do produto, na comunicação, na publicidade e, nesse universo, é preciso adicionar mais vida e contraste, trazer personalidade e destaque para os desenhos tornando-os mais fáceis de serem interpretados e, também, mais atraentes.

Após estas etapas geramos algumas alternativas que expressavam aplicações de estilos diferentes entre si, considerando estilo do traço, uso de cor, inspiração, tendência, etc. — todos tinham construções diferentes para o mesmo conjunto de atributos.

Geração de alternativas. #PraCegoVer: Imagem com vários desenhos de personagens, com formas orgânicas ao fundo, em tons de azul, amarelo e roxo. Três personagens estão em pé, e quatro personagens estão sentadas, um deles está sentado em uma cadeira com as pernas erguidas, os demais, sentados no chão.

Co-criando para refinar junto com o time

Com as alternativas prontas, envolvemos o time de Design a fim de capturar as impressões dos nossos “usuários primários”, afinal, são eles que incluem as ilustrações no contexto de produto e são criteriosos com aspectos estéticos e funcionais. Para esta etapa, utilizamos um formato de critique onde trouxemos novamente os atributos para que os Designers elaborassem críticas e sugestões de melhorias inspirados nas palavras chaves que queríamos transmitir com as ilustrações.

As opções foram dispostas lado a lado e disponibilizamos post its para que cada designer pudesse comentar em cada alternativa. O objetivo aqui, não era escolher a melhor alternativa, mas sim aproveitar os insights para fazer ajustes e melhorias nas alternativas e evidenciar nelas os pontos fortes percebidos pelos Designers.

Critique realizada com o time de Design. #PraCegoVer: imagem dividida em duas, onde em cada imagem, um designer, escreve em um post it sobre uma parede de vidro. Na parede de vidro há várias folhas A4 com as alternativas de ilustrações coladas com fita crepe azul. Através do vidro se vê ao fundo quatro mesas brancas pequenas com quatro cadeiras cada, uma escadaria grande e marrom, três palmeiras pequenas em um vazo quadrado cor marfim, e letras grandes em 3D escrito Conta Azul em azul.

Alternativas selecionadas. Hora de experimentar e testar!

Após os ajustes, eu e o time de Design Ops selecionamos 2 alternativas que gostaríamos de prosseguir para a próximas etapa: a experimentação!

Como a base de toda a conceituação foram os atributos, nada mais justo que a metodologia escolhida para o primeiro teste fosse a “Escala de Diferencial Semântico” em conjunto com um “Teste de Desejabilidade”. O objetivo era avaliar percepções espontâneas das ilustrações e confrontá-las com os atributos principais da marca.

Em um primeiro momento convidados pessoas do time Conta Azul, de áreas de atuação diferentes para que eles pudessem avaliar as ilustrações — era importante que as pessoas da empresa sentissem conexão com o processo. Para uma segunda rodada, conversamos com clientes: contadores e donos de negócio. Afinal, eram eles quem iriam ser impactados e precisavam avaliar se o caminho que escolhemos passava os atributos que estávamos buscando. Mesclamos formato presencial com remoto para performar as pesquisas, uma vez que não teríamos como trazer todos os donos de negócio presencialmente.

Diferencial semântico e teste de desejabilidade. #PraCegoVer: imagem ilustrando a diferença entre diferencial semântico e teste de desejabilidade. Abaixo do texto diferencial semântico há quatro fileiras de bolinhas em tons de amarelo, com linhas cinza no lado esquerdo e direito representando o texto. Abaixo do texto teste de desejabilidade há alguns post its amarelos.

Para a “Escala de Diferencial Semântico” foram elencados 9 adjetivos que representam características desejáveis da nova identidade visual. Como parte da metodologia, para cada adjetivo definimos um antônimo para criar a escala diferencial.

A coleta foi realizada avaliando as duas propostas escolhidas (abaixo o exemplo):

Proposta A

Proposta A. #PraCegoVer: ilustração de personagem feminina, em tons de azul, de cabelos ondulados solto, sentada no chão em posição de meditação com leve sorriso no rosto, vestindo camiseta, calça e tênis. Em volta dela há desenhada uma cifra de dinheiro, uma tabela de boleto e três círculos em cinza claro.

Proposta B

Proposta B. #PraCegoVer: ilustração de personagem feminina, em tons de azul, com penteado rabo de cavalo, em pé com a perna direita levemente levantada, vestindo camiseta listrada, calça e sapatilha. Com o braço direito ela mostra um boleto amarelo com três pequenas estrelas em volta e ao fundo um círculo ondulado com contorno deslocado em tom azul claro.

Primeiramente, os participantes visualizavam a proposta da ilustração e depois responderam a escala. Cada participante viu apenas uma das opções, pois o objetivo era evitar comparações entre a proposta A e B. Nosso objetivo era entender como cada proposta individualmente manifestava-se e como cada participante capturava estas impressões.

O “Teste de Desejabilidade” teve o formato de uma dinâmica com post-its, onde colocamos os adjetivos (os mesmos usados no diferencial semântico) dispostos de forma aleatória e expusemos as duas propostas de ilustração simultâneamente. Os participantes deveriam escolher quais adjetivos mais se assemelhavam com as ilustrações e contar um pouco do seu racional.

Testes de ilustrações realizados com clientes. #PraCegoVer: A imagem está dividida em duas fotos, na primeira uma mulher de cabelos escuros está observando o computador com uma ilustração. Na segunda, uma mulher com cabelos claros está observando dois computadores, um com o formulário da pesquisa e o outro com a ilustração.

Achados da escala de diferencial semântico

Resultado do diferencial semântico entre A e B. #PraCegoVer: imagem ilustrando a diferença entre resultado das propostas A e B. Abaixo do texto proposta A, bolinhas cor amarelo se aproximam mais dos textos: alegre, clara, simples, transformadora, parceira, gentil, viva, ambígua e amigável. Abaixo do texto proposta B, bolinhas cor amarelo se aproximam mais dos textos: alegre, clara, simples, parceira, gentil e amigável. Três bolinhas ficaram no meio entre as palavras: transformadora e conservadora, viva e apática, ambígua e precisa.

Durante as entrevistas, anotamos todos os comentários que eles faziam. Isso foi bastante importante, afinal é a captura do comportamento espontâneo é uma fonte transparente das primeiras impressões. Abaixo, alguns comentários extraídos durante a pesquisa:

Comentários Proposta A

“Entendi que ela está tranquila porque as finanças estão em dia”

“Ela tem cara de parceira, não seria uma inimiga”

“Ela me parece apática com esse estilo zen, não está muito viva não”

“Me parece ambígua porque ela está tranquila com os boletos mas não tenho certeza se é um boleto ou tabela”

Comentários Proposta B

“Acho que ela é transformadora, me parece bem destemida”

“Ela está bem viva, esse movimento do corpo dela me parece que ela está bem viva”

“Ela não tem rosto então pelo jeito do corpo me parece feliz mas não tenho certeza”

“Achei confusa porque me parece que ela está segurando um papel mas não sei o que é”

Achados do teste de desejabilidade

No teste de desejabilidade também mapeamos comentários importantes que trouxeram grandes insights para o caminho que deveríamos seguir:

#PraCegoVer: imagem ilustrando a diferença entre resultado das propostas A e B. Abaixo do texto proposta A, há a ilustração da personagem sentada, com post its escrito as palavras: simples, transformadora, organizada, gentil e serena. Abaixo do texto proposta B, há a ilustração da personagem em pé, com post its escrito as palavras: clara, simples, viva, transformadora, problema resolvido, gentil, amigável e bem sucedida.

Comentários Proposta A

“Simples pelo visual dela, estilo de vestimenta”

“Ela sabe que tudo está ok então por isso ela tá relaxada”

Comentários Proposta B

“Passa a impressão que alguma coisa deu certo”

“Viva, desenho com vida mesmo sem rosto. Transmite boa energia, carismática”

“Amarelo chama atenção e ajuda a dar vida”

Criando e definindo o estilo Conta Azul de Ilustração

Com os testes e análises finalizados conseguimos trazer novas percepções e alguns entendimentos sobre os desenhos:

  • Proposta A aproximou-se mais das características da nova identidade visual;
  • Proposta A transmitiu um tom ambíguo em comparação com a Proposta B;
  • O desenho das expressões do rosto enviesa diretamente na emoção transmitida pelas ilustrações;
  • A cor amarela ajudou a trazer um sentimento de vivacidade.

Assim, entendemos que deveríamos usar a proposta A como guia, mas aprimorá-la com pontos positivos da Proposta B, tais como:

  • O uso da cor amarela como elemento de destaque;
  • Ausência de rosto, pois o corpo parece já ser suficiente para transmitir a emoção e o rosto é uma complexidade a mais na produção;
  • Movimento do corpo;
  • Redução na complexidade (quantidade de elementos).
Refinação final. #PraCegoVer: duas personagens, uma sentada e outra em pé segurando um boleto, em uma animação que faz alternar entre as propostas utilizadas nos testes AB e refinação final dessas ilustrações.

Obrigada por ler!

Este foi um processo de bastante aprendizado e evolução. Cada conversa — interna ou externa — aprendemos um pouco mais sobre o padrão e como ele comunicava. Foi realmente importante fazer estas validações para ter certeza do caminho que estávamos seguindo.

No próximo artigo, vou detalhar um pouco mais a continuação deste processo. Como construímos os personagens, testamos as cores e como aplicamos os grafismos para criar uma biblioteca autêntica e reconhecível por todos os nossos clientes. Aguardem o próximo post :)

E vocês, já passaram por um processo assim? Como foi construído o padrão de ilustrações onde vocês trabalham? Tem uma pessoa dedicada ao tema?

Deixe um comentário pra mim contando como é onde você trabalha.

Até o próximo artigo!

--

--