Construindo um sistema de ilustração que funcione para todos — Parte 03
Estruturando a fundação de uma biblioteca de ilustrações inclusiva e escalável
Que bom te ver por aqui!
👋🏽 Olá! Eu sou a Maria, Brand Designer e líder da guilda de ilustração do Jusbrasil, e no terceiro artigo da série sobre o redesign do nosso Illustration System vim compartilhar como estruturamos o funcionamento de uma nova biblioteca de ilustrações a partir da criação do nosso novo guia de ilustra e como diversidade e inclusão foram partes importantes de tudo isso. Caso você tenha perdido a parte 01 ou a parte 02, recomendo lê-las para entender melhor as tomadas de decisão que eu, Maryana, Larissa e Dricka — atuais ilustradoras do time de Design — tomamos.
Novo guia de ilustração — construção e conteúdo
Com o intuito de garantir um bom uso dos padrões estabelecidos anteriormente, e para que todos os stakeholders envolvidos no processo internalizassem cada tomada de decisões por parte da equipe, surgiu a necessidade da reformulação de um novo um guia de ilustrações detalhando os processos de construção de um desenho, bem como o que deveria ser feito caso surgisse a necessidade de criar ilustrações dentro do novo estilo de desenho do Jusbrasil. Tal documentação é fundamental para a estruturação de um sistema robusto e escalável, afinal, de nada adianta estabelecer um padrão em que as partes envolvidas não consigam usar e replicar.
A intenção e motivação principal para o nascimento deste estudo era que qualquer pessoa designer ou membro do Jusbrasil fosse capaz de criar e utilizar uma ilustração, seguindo um estilo e combinações entre elementos previamente determinados. De acordo com Edmar Almeida, ilustrador e designer do iFood, “construir um guia de ilustrações é como criar uma nova língua”, portanto, delimitar esses padrões foi extremamente importante para perpetuarmos um estilo consistente, único e alinhado aos valores de comunicação e produto.
Documentação é a palavra de ordem: Como iniciamos
Foram estruturados mapas mentais dentro do aplicativo Miro, os quais não apenas continham as estruturas básicas para construção de personagens, cenários e objetos como também contavam com a presença de um direcionamento base para acessibilidade e diversidade dentro do novo sistema de ilustração da empresa. Divididos por categorias, o preenchimento desses mapas se deu de maneira síncrona via videochamada pelo Zoom onde as ilustradoras do Jusbrasil através da escrita em elementos que simulavam papéis autoadesivos delimitaram o conteúdo que posteriormente seria disposto nos capítulos do novo guia.
Foi a partir da definição dessas estruturas base que foi possível granular a produção de uma escala de proporções de estruturas corporais para desenhos de figuras humanas, bem como realizar testes de estruturas de construção de badges, levando em consideração a combinação dos mesmos junto a esses personagens. Ilustrações frontais são feitas, principalmente se estivermos com pouco tempo, devido ao seu caráter veloz de produção. Para dar mais movimento aos desenhos, fazemos na perspectiva 3⁄4.
Para a construção dos badges (ilustrações de leitura rápida, geralmente objetos, utilizados em escala reduzida), após realizar uma série de desenhos que testassem e validassem os requisitos de construção dispostos no quadro do Miro, foram percebidos alguns pontos que precisavam ser refinados ou melhor alinhados entre a equipe antes de entrarem na documentação do guia. São eles:
Quem conta a história: Construção de personagens
Cada ilustração contém um começo, meio e fim; um acúmulo, um clímax e uma calma após a conclusão do arco da história. Como temos múltiplos contextos de inserção de personagens, não é possível dizer qual pose usar para cada um deles. Contudo, orienta-se a observar sempre a história que cada ilustração está contando já que nossas figuras são definidas a partir de suas ações.
Ao invés de definir como ilustrar cada personagem, foi estabelecido o ponto da história que é adequado ao tom e ao movimento, energia ou estabilidade associados a cada um.
Certamente não conseguimos desenhar todos os tipos e estruturas de corpo existentes, mas com certeza conseguimos ilustrar mais de um. Diversidade é uma premissa em nosso sistema de ilustração, por isso foi estabelecida uma escala de estruturas corporais que seja sempre inclusiva. Entretanto, também encontramos algumas características que são comuns às anatomias para que consigamos ter um modelo escalável de desenho.
Para acompanhar a concepção de personagens, também foram decididas algumas diretrizes de cabelos, vestimentas e acessórios. Todos estes procurando sempre atender aos princípios de diversidade e inclusão a todo tempo reforçados pela equipe de projeto.
Um ponto importante: Diretrizes de Diversidade e Acessibilidade
Falar sobre representatividade e acessibilidade em nosso sistema de ilustração foi muito tranquilo para nós, quase inconsciente. Em nenhum momento pensamos "ah! precisamos fazer algo para que isso aqui se torne inclusivo", pois a diversidade sempre foi algo enraizado entre a equipe. Somos 4 mulheres designers ilustradoras, completamente diferentes em todos os sentidos possíveis, então nada mais natural que nosso trabalho refletisse essa multiplicidade, sem nenhuma necessidade de cobrança em qualquer escala.
Uma análise dos tons da paleta de cores foi iniciada com o objetivo de assegurar a compreensão das ilustrações por pessoas que tenham algum grau de daltonismo. Os testes foram feitos na plataforma Adobe Color, e os resultados nos mostraram que o comportamento das nossas cores consegue ter um bom contraste nos tipos de deficiência visual listados pela plataforma.
Mas nossas provocações não acabaram por aí… Pelo contrário, foi só o começo. Essa análise acarretou na necessidade discussão e definições sobre algumas outras pautas de acessibilidade e representatividade dentro das nossas ilustrações. A partir daqui, marcamos um bate papo virtual com o Paulo Aguilera, especialista no assunto junto com a Marianna Piacesi, o qual gerou encaminhamentos e desdobramentos interessantes que contaremos logo a seguir.
Quando falamos sobre acessibilidade e diversidade em ilustração, precisamos pensar além de desenhar personagens diferentes uns dos outros e sim em representar todos que estão na sala. Ilustrações universais não excluem ninguém, mas também não incluem ninguém da mesma forma.
Representatividade é diferente de sensação de pertencimento. Colocar cores variadas como tons de pele não necessariamente significa abraçar a diversidade, a mesma coisa vale para desenhar vários personagens e continuar seguindo um padrão. Diversidade é sobre gênero, raça, cultura, idade, etc.
É intrínseco a este sistema de ilustrações ser inclusivo e representativo. Por isso, desde o seu princípio o sistema de ilustração do Jusbrasil foi pensado para ser inclusivo, para fazer com que as pessoas se sintam parte desta jornada. Isso deve ser mostrado não apenas nas representações visuais como também através da adoção de práticas de acessibilidade que auxiliem na experiência de um usuário com deficiência em qualquer ponto de contato da Marca ou do fluxo do produto.
Outcome 01 — Representatividade: Pessoas com Deficiência (PCD)
Nas ilustrações do Jusbrasil temos a representação das pessoas usuárias com algum tipo de deficiência. Entre esses desenhos, contamos com as ilustrações de pessoas com deficiência auditiva, visual, locomotora e personagens com próteses nos membros. Para isso, adotamos boas práticas a serem seguidas sempre que alguma dessas pessoas for ser representada, levando em consideração a experiência a ser tida com a Marca e produto Jusbrasil por parte delas:
Outcome 02 — Checklist de Diversidade e Acessibilidade
Para que consigamos manter uma consistência e constância nesta iniciativa, foi criado o Checklist de Diversidade e Acessibilidade. Ele deve servir de apoio em todos os momentos os quais envolvem a produção de uma nova ilustração. Nele consta o resumo das boas práticas adotadas pelo time em formato de 05 perguntas a serem feitas pelo time durante o desenvolvimento de uma atividade.
Outcome 03 — Revisão da paleta de cores
Também estabelecemos uma nova cartela de tons de verde para representarmos as tonalidades de pele. Além das cores da própria identidade visual, a paleta é composta por tons presentes na interface do produto e suas variações. Tais tonalidades foram definidas tendo como base o verde mais claro (da marca) e o mais escuro (verde dos componentes da interface do Jusbrasil 3.0). Dessa forma, conseguimos finalizar e fechar uma paleta de cores finais que possibilita combinações múltiplas e inclusivas.
Há de sempre prevalecer a utilização do verde por ser a cor do herói da marca. Demais tonalidades são utilizadas com o propósito de ajudar a levar a atenção para o que mais importa, o conteúdo. Deve-se evitar grandes áreas chapadas de preto ou amarelo, além de utilizarmos cores como o azul e verde neon em objetos de destaque. Para tons de pele sempre será utilizado o verde da marca e suas 03 variações, assim deixamos o leque de personagens e fenótipos mais amplo e diverso (de tal forma que o que determinaria a origem de cada um, para além das tonalidades de verde, seriam suas vestimentas, cabelos e elementos de apoio do desenho).
Handoff 01: do Illustrator para o Figma
Neste primeiro momento de handoff, o trabalho ou ilustração passa de uma função para outra. Portanto, a equipe adquiriu a preocupação principal de garantir que informações ou insumos seguros e completos sejam repassados, evitando falhas na comunicação e desenvolvimento que podem vir a comprometer o futuro e a implementação do projeto. Como o grande objetivo deste sistema era pensar em todas as maneiras de facilitar a escalabilidade de uma nova biblioteca de ilustrações para o Jusbrasil, também ter documentado um processo de passagem de caso que seja claro e estratégico é essencial para garantir que os stakeholders interpretem corretamente o que deve ser feito.
Bancos de Armazenamento: Onde guardamos nossas ilustrações?
Existem dois bancos centrais que abrigam os arquivos mestres e a biblioteca
de ilustrações de fato. Para uso interno, principalmente por stakeholders que não fazem parte do time de Design, as ilustrações do Jusbrasil são armazenadas no Google Drive. O Figma, por sua vez, abriga o acervo de ilustrações componentizadas de fato. São essas que estão integradas diretamente com os demais componentes base do design system da empresa e serão utilizadas principalmente por designers para a construção de interfaces e peças gráficas.
Dentro desses dois bancos, as ilustrações serão divididas por categorias:
Hoje em dia, o armazenamento nos bancos é organizado por projetos. A ideia de categorizar pelo que é visualmente representado foi uma estratégia adotada justamente para o redesign da biblioteca, uma vez que esse tipo de divisão facilita tanto a busca por ilustrações específicas dentro dela quanto o segundo handoff no momento em que esse artefato for aplicado em um projeto de tela e seguir para a etapa de implementação com as pessoas desenvolvedoras.
O fantasma das ilustrações repetidas: Padronização de Conteúdo
Ao criar ilustrações para o produto temos que nos atentar ao máximo para manter a consistência visual, principalmente quando se trata de uma mesma circunstância. Ao repetir uma ilustração da biblioteca, elas devem ser usadas no mesmo contexto de comunicação e mensagem.
Por exemplo, o conceito usado para representar um tema em uma ilustração de Marketing, deve ser o mesmo utilizado para uma ilustração do produto que envolva um contexto igual ou similar, justamente para que os usuários consigam realizar rápidas assimilações sobre o que aquela funcionalidade está fornecendo ou solicitando. Entretanto, em ilustrações de Marketing e campanhas, podemos flexibilizar um pouco mais em relação a consistência visual, levando também em consideração o perfil das pessoas que são atingidas.
Um problema vínhamos enfrentando no Jusbrasil era justamente esse conflito de mensagens quanto ao uso de ilustrações. Por não possuírem nenhum artifício que informe em qual contexto determinado desenho foi utilizado, muitas vezes pessoas designers do time já desenvolveram projetos utilizando o mesmo desenho para representar coisas diferentes, sem saber que já existia uma figura igual já circulando pelo site.
💡 Com o intuito de corrigir essa questão na implementação da nova biblioteca, foi determinado que antes de utilizar alguma ilustração do novo acervo, cada designer deverá checar um arquivo de controle que será integrado ao arquivo principal do repositório dentro do Figma, o qual informará se a ilustração desejada já foi utilizada em outra tela bem como o contexto que foi inserida.
Todas as vezes que uma interface contendo ilustração for criada, esse arquivo controle deve ser alimentado com a modelagem da tela juntamente com uma nota especificando quem a adicionou, assim temos uma noção melhor do cenário e conseguimos contatar rapidamente a pessoa designer responsável pelo projeto em caso de dúvidas quanto ao uso repetido de uma figura.
Não encontrei o que preciso: Solicitando uma ilustração nova
Pensar como esse novo estilo de desenho se tornaria escalável dentro do time de designers foi um dos grandes desafios de criar um modelo de desenho que possa ser customizável e de fácil reprodução. Tem-se como meta fazer com que esse processo se dê com o mínimo de fricções possível para que consigamos manter uma cultura de ilustração sustentável. Para isso, projetamos um fluxo de requisição de criação de uma nova ilustração todas as vezes que não possuirmos ilustrações na biblioteca que atendem a demandas específicas. Tal modelo de solicitação é peça fundamental para que consigamos manter as demandas organizadas e o time alinhado.
Otimizando o processo: Governança de assets e index bot no Slack
Apesar de desde o início termos optado por construir um sistema e documentação robustos, entendemos que haverão casos os quais o processo de consulta e operação para com as ilustras precisará ser otimizado, principalmente no momento de uso por pessoas não ilustradoras.
Por isso, para além da construção de um novo guideline de ilustração, resolvemos adotar mais 02 práticas que facilitem a operacionalização do nosso sistema por parte de demais stakeholders:
🔎 Fluxo de governança de assets de ilustração: É um fluxograma que contém um passo a passo, guiado por escolhas de "sim/não", o qual explica desde o que uma pessoa deve fazer quando não encontrar o que precisa dentro de uma de nossas bibliotecas de ilustra, até como gerenciar um ativo de ilustração uma vez com ele em mãos.
📌 Index bot: Quando qualquer pessoa digitar "/ilustra" no canal do time de ilustração no Slack, será ativado um atalho o qual disponibilizará de maneira rápida os principais assets e links do nosso illustration system, incluindo o fluxograma citado acima.
Dessa forma as pessoas conseguem consumir o conteúdo do novo guia de ilustra de maneira simplificada, quando necessário.
Novo guia de ilustração — sumário e projeto gráfico
Com todos os pontos acima estruturados, desde como replicar o estilo até armazená-lo e solicitá-lo, foi possível fazer uma versão do sumário da nova documentação. O estabelecimento prévio/listagem do que constaria neste novo guia foi crucial pois deu suporte para a criação de um storyboard do que foi diagramado em termos de conteúdo e projeto gráfico.
Como o novo estilo de ilustração do Jusbrasil foi construído tendo como base o processo de rebranding e reposicionamento de Marca, faz sentido que também faça parte do guia os tópicos que explicam a personalidade da mesma de maneira a endossar e embasar a narrativa criada para construção desse novo universo ilustrado.
🎯 Fun fact: Atualmente, nosso guia de ilustração possui mais de 75 páginas ;)
A partir do estabelecimento por meio do sumário de quais conteúdos deste processo seriam incluídos na nova documentação, foi possível desenhar um storyboard piloto que norteasse o projeto gráfico do novo guia de ilustração. Para o time, fez sentido que esse novo guia fosse desenvolvido em um formato para ser disponibilizado online pois além de ser um documento que possuirá várias versões/sofrerá atualizações de acordo com a evolução e manutenção da biblioteca, o mesmo também precisará ficar acessível e disponível a todo o momento uma vez que o Jusbrasil sempre possuiu uma forte cultura de trabalho remoto e assíncrono.
Ampliando a cultura de ilustração — Framework para construção de uma biblioteca de ilustrações escaláveis
Para Bonnie Kate Wolf, ilustradora e atual designer da Netflix, existe uma estrutura básica de primeiros passos a serem seguidos para a construção de uma biblioteca escalável de ilustração. Tal estrutura pode e deve ser modificada de acordo com os objetivos e tamanhos da equipe/empresa. A estrutura de trabalho do processo de remodelagem da biblioteca do Jusbrasil com certeza não foi a mesma utilizada no desenvolvimento do Alegria, sistema de ilustrações do Facebook, por exemplo, uma vez que se tratam de equipes e instituições com tamanhos e escopos de trabalhos diferentes.
No entanto, ao longo do projeto consegue-se elencar alguns procedimentos comuns para a organização e disponibilização desses sistemas que consequentemente norteiam o processo de redesign ou criação de uma biblioteca escalável. Misturando alguns tópicos do que Bonnie pontuou com a nossa experiência dentro do Jus, estruturamos o framework abaixo com o objetivo de auxiliar quem estiver passando pelo mesmo processo de forma a fomentar cada vez mais uma cultura de produção de ilustração para produtos e marcas digitais.
🖖🏽 Criamos ele justamente com o intuito de compartilhar o que aprendemos nessa jornada de quase 2 anos de trabalho. Aproveite!
🙌🏽 Obrigada por ter lido até aqui!
Este projeto e sua documentação visaram abordar o processo de redesign de uma biblioteca corporativa de ilustrações escaláveis em todas as suas fases, desde o entendimento do que é ilustração de produto e marca, como elas se relacionam com um processo de rebranding, seu desenvolvimento até a implantação, integração com a engenharia de software e como realizar metrificação de sucesso das mesmas uma vez estando em vigência dentro da plataforma. Ao longo deste processo foi possível elencar alguns aprendizados essenciais para um bom funcionamento tanto de equipe quanto de execução do projeto, são eles:
E como isso tudo funciona na prática?
No próximo (e último 😢) artigo dessa série sobre o novo Illustration System do Jusbrasil, contarei como definimos e quais são as melhores práticas de uso do nosso sistema para que tudo escale e funcione com o mínimo número de fricções possível.
E você, passou por algum processo semelhante ou ficou com alguma dúvida sobre nosso projeto? Trocas e feedbacks são muito bem-vindos aqui nos comentários. :)
