A função da ilustra no Design System PagSeguro
Oooh, você desenha? Você é artista? Você pinta? Que BONITINHO.
Mais ou menos assim que eu exemplificaria as reações que recebia quando comentava da minha formação: Artes Plásticas. Por muitos anos, o que eu fazia exclusivamente era ilustrar. Sempre fui apaixonado por histórias em quadrinhos e se as artes plásticas me ensinaram sobre auto-expressão, os quadrinhos me ensinaram sobre comunicação: como contar uma história visualmente. Ritmo e composição. E como isso se encaixa em design de produto?
Comunicação & ilustração
Ao trabalhar com design de interfaces, inicialmente, tentei evitar ilustrar. É desafiador ilustrar para um mundo cheio de convenções e padrões visuais. Mas a necessidade da ilustração na construção de algumas interfaces é evidente, não como elemento decorativo… mas como apoio para comunicação.
A ilustração, com sua forma sintética e objetiva, amplifica a mensagem e traz mais universalidade ao seu entendimento. É uma ferramenta para ajudar a contextualizar o usuário, enriquecer a experiência e refletir os valores da marca. Deve ser consistente ao longo da jornada e precisa refletir nossos usuários.
O cenário do PagSeguro em ilustração era o mesmo que muitas empresas grandes de tecnologia já tiveram (ou têm!): vários estilos diferentes convivendo, inconsistência nas aplicações, linguagem indefinida. As ilustrações acabavam sendo utilizadas repetidamente em diversos fluxos distintos e se tornavam apenas um ruído. Não havia um consenso de como utilizá-las, o que gerava dúvidas sobre a melhor forma de aplicá-las. Ícones em lugares onde caberia uma ilustração, ilustrações em lugares onde caberiam ícones. Precisávamos de definições.
Pensar em ilustração sistematicamente não é arte: é design.
Com a chegada de um ilustrador dedicado, Bernardo, o time de design conseguiu fôlego para esse trabalho com o mapeamento de todas as ilustrações que já tínhamos dentro de nossos produtos digitais.
O time precisava de um caminho para seguir e precisávamos de novas ilustrações naquele momento. Não poderíamos esperar um mundo ideal, uma proposta de um novo estilo. Algumas escolhas deveriam ser feitas: Bernardo desenvolveu uma documentação para o Design System do PagSeguro, utilizando o estilo que encontrou. Haveria uma evolução natural do estilo conforme novas ilustrações fossem feitas, mas a documentação inicial já existiria. O guia visual era importante para manter a consistência — cores, linha, composição e grid.
Mesmo num cenário em que a ilustração já era amplamente usada por grandes empresas digitais, naquele momento havia poucas referências de documentação focada em ilustração — no que se refere a princípios de utilização em design. Pesquisamos e estudamos todo material que pudéssemos encontrar referente a ilustração em produtos digitais. Duas empresas serviram como referência neste uso: Dropbox e Shopify.
Acrescentamos na documentação as diferentes formas de aplicação de ilustração.
Precisamos de princípios
Definimos alguns princípios que sintetizassem tudo o que havíamos discutido sobre a função da ilustração no design.
Útil
A ilustração deve adicionar ou complementar informações. Não é um elemento decorativo.
Consistente
A ilustração carrega o DNA da marca PagBank e a consistência deve estar presente independente de qual ponto da jornada nosso usuário esteja.
Focado
A cada ilustração, nos perguntamos “o que estamos tentando dizer?”.
Representativo
A ilustração é um ponto de contato, comunicação e identificação com a base de usuários PagBank, além de clientes em potencial distribuídos pelo território nacional. É essencial representar a diversidade étnica do Brasil, que apresenta cerca de 52,3% de pessoas não-brancas, de acordo com o Censo 2010 feito pelo IBGE.Incluímos também a representação de diversidade de gênero do nosso público.
Enfim, componentes
Documentamos as forma de aplicação, cada uma com sua função específica. Dividimos da seguinte forma:
Icon Spot
Ilustrações simples e diretas: tem o objetivo de apoiar de forma rápida e concisa um texto curto. São interpretadas rapidamente. Não transmitem mensagens complexas ou apresentam um grande número de elementos.
Spots/Empty States
É utilizado em situações de aviso e status. Literal, transmite instruções simples, atenua mensagens negativas e a complexidade de algumas mensagens/conceitos.
Hero/Mini Hero
Aspiracional, interpretável, metafórico. Incentiva o uso, destaca uma funcionalidade. É uma ilustração com um tom de voz positivo, convidativo e vendedor. Incentiva-se o uso de personagens interagindo entre si e com produtos. Incentiva-se também o uso de metáforas visuais envolvendo produtos, funcionalidades e processos com o objetivo de trazer um aspecto lúdico à imagem.
Questionando inclusão e representação
Ilustração conta uma história, mas a perspectiva do ouvinte é crucial para que a mensagem seja transmitida. O usuário precisa se sentir representado. Tomamos deliberadamente a decisão de não utilizar personagens com pele colorida (vermelho, azul, roxo etc), ou mesmo somente linha sem preenchimento (fundo branco), por acreditar no caráter eurocêntrico dessa representação. É uma discussão de inclusão e representatividade que foi bem abordada pelo AirBnb e também dentro do Shopify, não só na questão étnica mas também pelas diferentes características físicas (idade, tipos de corpo, deficiências).
A solução utilizada por muitos de ilustrar pessoas com cores “irreais” para representar metaforicamente diversidade não enfrenta o problema. Não são pessoas reais, não representam ninguém e frequentemente mantém as características físicas de pessoas brancas. Até mesmo o Facebook, que se limitava a pessoas azuis e tentava diferenciar tons de pele com diversos contrastes do azul, tem abraçado de uma forma mais incisiva as diferenças étnicas.
Com base nas 8 personas que temos dentro do PagSeguro, mapeamos diferentes tonalidades de pele e tipos de cabelo que espelhassem a diversidade da nossa base de usuários.
Validando nossas ilustrações
Mesmo com o objetivo de sermos mais representativos, discutíamos até que ponto era efetiva nossa comunicação através de nossas ilustrações. Onde estávamos acertando e onde estávamos errando? Nosso cliente se sente representado com esse estilo?
Começamos uma série de pesquisas para entender a percepção do nosso usuário sobre as ilustrações: se os valores da marca eram representados, que tipo de emoções elas geravam, se ele se via representado no estilo. Temos trabalhado junto da área de Research Ops para responder essas perguntas e sermos mais assertivos na comunicação e na representatividade dos nossos clientes.
Em breve… novidades.
Ilustrações por: Bernardo Abreu, claaaro!
