Ilustrando UX: Inserindo ilustrações em produtos digitais

Como foi o processo para adicionar ilustrações em uma Ferramenta de Marketing

Sandra Carciofi
Design RD
Published in
7 min readJan 7, 2021

--

Eu sempre amei desenhar. Minha mãe guarda até hoje um desenho que eu fiz quando tinha 3 anos de idade: uma beringela com braços, olhos e tudo mais.

Eu realmente queria ser uma ilustradora, mas sou uma Designer. Desenhar foi meu hobbie por muito tempo e, de certo modo, designers e ilustradores têm muitas coisas em comum.

Uma delas é comunicar gerando sentimentos.

Se você trabalha com produtos digitais, com certeza sabe que pode ser um pouco complicado comunicar algumas informações de maneira agradável.

Hoje em dia, estamos acostumados a ver ilustrações em produtos digitais. Existem ótimos cases sobre isso na internet, como o incrível trabalho feito no Airbnb pela Jennifer Hom.

Ilustração em produtos digitais: Ifood, Nubank e Patreon. As ilustrações comunicam falta de conteúdo nas telas
Ilustração em produtos digitais: Ifood, Nubank e Patreon

Mas e se seu produto digital é uma ferramenta de trabalho, com a qual profissionais passam horas trabalhando, batendo metas, realizando ações que impactam em seus negócios? Como saber o momento certo para usar ilustrações? Como convencer os stakeholders? Como sincronizar a subjetividade da ilustração com o objetivo da tela? Faz sentido usar ilustrações, afinal?

Quando comecei a trabalhar com o RD Station Marketing, meu foco foi trabalhar com a equipe responsável pela geração de relatórios. Conversei com muitas pessoas que tinham dúvidas e, por vezes, estavam frustradas por não entenderem bem como interpretar ou encontrar os resultados de suas campanhas ou ações de marketing. Como métricas fazem parte de quase todo o produto, nas entrevistas e testes pude observar como as pessoas usuárias se sentiam usando o produto, e aí tive a certeza de que precisávamos colocar mais calor e vida na nossa ferramenta.

Não tínhamos ilustrações, o que chamávamos de ilustração eram ícones, maiores e mais coloridos que os demais. Aproveitando que a empresa estava passando por um processo de Rebranding e Redesign, soube que era o momento certo para propor esse avanço!

Ilustração triste que não transmite a proposta real da feature

Como foi esse processo?

Validando a ideia

Você já ouviu aquela máxima de “melhor pedir desculpas do que permissão”?

Durante nosso Redesign, tivemos algumas semanas para que todos os designers saíssem da rotina das squads e focassem em sessões de cocriação de resolução de problemas e adequação das nossas telas. Nos últimos dias de teste com pessoas usuárias, validávamos nosso trabalho como numa design sprint. E aí veio a oportunidade de adicionar as ilustrações (de banco de imagens por enquanto) para reforçar mensagens ou ações dentro desses novos designs.

Percebemos que, além de dar muito certo na proposta de comunicar, nossas pessoas usuárias relataram um sentimento de bem-estar, leveza e felicidade por conta da simples ilustração (por vezes um gif) ao final de processos mais complicados.

Adequando a ideia aos princípios de design

Ideias validadas, o próximo passo foi alinhá-las com nossos princípios de design. Aqui na empresa toda quinta-feira pela manhã é reservada para atividades como cocriações, workshops e critiques. Aproveitando esse horário com os designers, apliquei um workshop de cocriação.

Nesse workshop, passamos os motivos base para o uso de ilustrações em produtos digitais, olhamos alguns cases, aprendemos boas práticas e fizemos algumas atividades juntos.

PrintScreen minimo da tela do Miro com a apresentação do workshop e resultados das cocriações
Workshop e exercícios com o Chapter de Design da RD

Somente esse tópico já daria um artigo completo, porém passando rapidamente pelo que fizemos, foi possível entender o que queríamos ou não transmitir com as ilustrações e definimos nossas premissas que agora estavam baseadas nos nossos princípios.

Nossas premissas para ilustrações baseadas nos princípios, postits;
Painel de premissas

E se: Illustration System?

Nosso produto está sempre evoluindo, afinal de contas somos 20 designers trabalhando em frentes diferentes. Pensando a longo prazo, velocidade, escala e autonomia do time nasceu a ideia de criar nosso próprio Illustration System.

O projeto agora fazia ainda mais sentido.

Se eu pudesse te dar uma única dica de como vender a ideia de ilustrações na sua ferramenta, seria o Illustration System. Principalmente se você não tem planos ou previsão de ter uma pessoa ilustradora fazendo parte integral do time de design.

Com um sistema de ilustração, além de economizar orçamento (não precisará pagar por demanda de ilustração), além de tudo citado acima, fica mais fácil de trazer diversidade, mantendo um padrão visual consistente em todo o produto.

Se você ainda não é familiarizado com esse tipo de sistema, um ótimo site para visitar (e se divertir) é o blush.design!

Imagem da tela onde você consegue escolher os elementos da ilustração, personalizando sua imagem
Blush.design

Imagine que você é designer e está trabalhando em uma tela de confirmação de envio de emails, que exige muita atenção da pessoa usuária, então você se questiona: Qual imagem seria melhor utilizar? Qual contraste é mais adequado? Qual sensação quero transmitir? Tendo um sistema de ilustração, em poucos passos e cliques você monta a imagem para poder usar e validar. Maneiro, não é?

Levantamento e alinhamento com Branding (Marketing)

Foi preciso estimar o volume inicial de ilustrações. Para isso convidamos os designers para uma dinâmica onde conseguimos ter uma visão melhor deste volume. Juntos estudamos o produto e entendemos onde seria necessário adicionar as ilustrações, cuidando sempre para não saturar de imagens.

Dica: A ilustração precisa respeitar os espaços em branco, e ser usada apenas quando realmente necessário para comunicar com clareza ou trazer um estímulo ou sentimento, por exemplo.

Depois disso chegou o momento de alinhar com o time do Marketing o estilo que seria usado.

Agora já era claro que autenticidade, personalidade, representatividade era muito importante para conversar com o Rebranding.

Foram criados moodboards com diversos estilos, aplicamos uma pesquisa com matriz semântica utilizando a plataforma Qualtrics, e assim pudemos entender de fato como os nossos clientes se sentiam em relação aos estilos de ilustração que estávamos propondo.
As premissas agora também levavam em conta os valores da empresa e algumas diretrizes de estilo foram definidas nessa etapa.

A pessoa ideal para o estilo ideal

Agora precisávamos de uma pessoa que nos ajudasse a desenvolver nosso estilo.
A dica aqui é: converse com as pessoas candidatas não apenas por mensagem ou email, se não for possível de forma presencial, realize pelo menos uma videoconferência. O segredo do sucesso é que não somente o estilo de desenho da pessoa seja ideal pro seu projeto, mas a pessoa precisa estar alinhada com os valores do seu time (ou seu) e da marca.

Na hora de conversar sobre o orçamento, é importante apresentar a estimativa feita sobre o volume de ilustrações. Os valores das peças do Illustration System que são mais simples podem ter diferença dos valores de ilustrações especiais que tem briefing definido e são mais lúdicas, por exemplo. Outra coisa que influencia no valor final é o tempo de projeto, por isso é importante um cronograma definido.

Durante o levantamento de volume você provavelmente coletou as informações necessárias sobre os tipos de ilustrações necessárias para o sistema. Uma boa dica é: separe um tempo antes de pedir orçamentos e faça uma lista de cada peça necessária, assim você solicita um orçamento mais assertivo. Por exemplo, definir que a pessoa ilustradora precisa entregar 5 rostos com etnias diferentes, 3 pernas sentadas, 2 pernas em pé, 2 pernas em movimento, fundos diversos como escritório, sala de casa etc.

Tela do Redesign do RDStation.com com a ilustração nova, mulher negra percorrendo um caminho com as formas da marca, colorido
Ilustração e estilo criados pela artista Schi Martins (https://www.instagram.com/schi_m/)

Com as ilustrações agora tão autênticas, cheias de personalidade, representatividade e o estilo aprovado, começamos a tocar pra frente nosso cronograma e liberar algumas ilustrações especiais e a montar nosso Illustration System.

Mas esse processo eu contarei na próxima parte deste artigo! ;D

Não se engane. Não será fácil, nem super rápido. Coisas ótimas levam algum tempo, e tudo bem. Seja realista nas suas metas referentes a esse tipo de projeto, ainda mais se sua escolha de ilustração foge do ordinário. Trabalhar com arte dentro da UX de produtos digitais pode ser um desafio de paciência.

Não é comum ter a oportunidade do Redesign e Rebranding juntos para emplacar um projeto desses, principalmente em grandes empresas. Aproveite então as novas entregas, as pequenas melhorias ou atualizações para ir experimentando com as pessoas usuárias a diferença que as ilustrações podem trazer na experiência delas com seu produto. Compartilhe esses resultados com todas as pessoas envolvidas, planeje as apresentações de maneira que todos tenham vontade de “lamber a tela”.

Tente não envolver muitas pessoas em decisões de estilo. Todos temos gostos pessoais sobre arte e quanto mais gente envolvida nessa etapa, mais demorada e difícil ela será. prepare-se para as apresentações do progresso com todas as premissas e relembre constantemente o porquê das decisões previamente tomadas. O mais importante é não deixar a proposta inicial fugir, a armadilha de cair num lugar comum, numa ilustração de banco de imagens fica muito mais fácil quando se quer agradar a todos.

Percebeu que falei bastante sobre sentimentos na nossa conversa?

Nosso software de marketing digital é usado diariamente pelos nossos clientes. Nossos clientes são pessoas, que no final do dia, precisam conseguir com sucesso realizar suas tarefas.

Se pudermos ajudar a valorizar seu tempo motivando, incentivando e comemorando suas conquistas com mais alegria e descontração estaremos gerando esses sentimentos quentinhos de calor humano. E isso me deixa feliz com meu trabalho. E você?

Vejo você na parte II deste artigo, em breve! ;)

--

--