Construindo um sistema de ilustração que funcione para todos — Parte 02
Jusbrasil Illustration System: Tangibilizando a promessa de marca através de ilustrações.
👋🏽 Olá! Eu sou a Maria, Brand Designer e líder da guilda de ilustração do Jusbrasil, e nesse segundo artigo vim compartilhar como nos unimos ao processo de (re)Branding para criar uma proposta de estilo de desenho escalável e de acordo com a personalidade e atributos de marca. Caso você tenha perdido a parte 01, recomendo lê-la para entender melhor as motivações iniciais do projeto e as metodologias de trabalho que eu, Maryana, Larissa e Dricka — atuais ilustradoras do time de Design — utilizamos.
Fase 01 — Pesquisa e Conceitualização
A fase de pesquisa e conceitualização foi o momento do projeto o qual buscou-se investigar o objeto de estudo (ilustrações de produto) e seu contexto, procurando entender suas especificidades e coletando dados que nortearam os desdobramentos das etapas posteriores do trabalho.
Para essa fase preliminar foi realizado um levantamento inicial de referências, conhecido como Pesquisa Desk, acerca do universo das ilustrações de produtos digitais. A partir dele, foram realizadas explorações de cunho mais aprofundado com os temas, a partir da realização de um grupo focal com usuários da plataforma para angariarmos percepções sob a marca Jusbrasil que nos auxiliaram aos passos seguinte desta etapa: a formulação de uma plataforma de marca, a determinação dos arquétipos da empresa e criação da Jornada de Marca.
Tais etapas foram marcadas pelas atitudes que auxiliaram a definição de princípios de ilustração e criação de um estilo de desenho que traduzisse a promessa e personalidade que tanto o Branding quanto os princípios de design de interface da companhia propõem.
Tendo como base a área de design de produto, a ilustração é um recurso que serve para acrescentar um aspecto mais humanizado na experiência do usuário, tanto em aplicativos quanto websites. Uma das maiores referências e uma das primeiras aplicações desse artifício são os conhecidos “Doodles” que compõem a homepage do Google frequentemente, os mesmos, portanto, fazem com que o produto tecnológico demonstre um aspecto mais humano, mostrando que existem pessoas trabalhando para que o site funcione.
Tomando o buscador citado acima como exemplo, concluímos que teoricamente a utilização da ilustração em ambientes digitais e comunicação não é recente. Há mais de 15 anos (levando em consideração a fundação do Google em 1998), os sites e marcas vêm usando mascotes e ilustram o design da interface do usuário para auxiliar a proporcionar experiências online inesquecíveis e envolventes, dessa forma podemos afirmar que as ilustrações não estão mais presentes ali somente para serem vistas.
É fato que o design afeta a forma como as pessoas experimentam e consomem os produtos. De acordo com Norman (2006), isso ocorre em três níveis:
Uma boa ilustração da web não deve se limitar ao design visceral; ela também deve se complementar dentro dos campos do design comportamental e reflexivo pois às vezes, mesmo obtendo um briefing excelente, que nos orienta por meio de pesquisas e análises, sempre há a necessidade da realização de mais pesquisas com usuários e equipe de suporte ao cliente para que seja identificado o fator especial o qual o usuário não apenas entenderá o produto, mas também queira reutilizá-lo.
Entretanto, é importante compreendermos o fato de que a aplicação de ilustração não funcionará para todo e qualquer produto digital existente. A primeira coisa que deve estar perfeitamente alinhada entre a equipe, antes de adicionar qualquer desenho à sua interface, é “por que você está adicionando uma ilustração ao seu produto?”. A partir do momento o qual a pessoa designer enxerga a ilustração como algo exclusivamente ornamental, provavelmente ela irá causar o efeito contrário, estragando o produto ao invés de incrementá-lo. Em vez disso, deve-se realizar a procura por lugares apropriados onde informações úteis sobre a marca possam ser inseridas.
O uso de ilustrações adiciona clareza visual e reforça as mensagens que enviamos aos usuários e consumidores do produto, portanto é um aspecto vital em uma identidade de marca e, consequentemente, precisa se alinhar com as metas e objetivos da empresa como um todo. Conforme um estilo de ilustração fica mais robusto e solidificado, obviamente ele começa a trabalhar mais próximo à com a marca.
Mapear elementos e atributos que podem ser “emprestados” da identidade se mostrou como uma das etapas cruciais para iniciar esta integração entre a comunicação do negócio, design e ilustração. Para tanto, antes de dar início à conceitualização de fato foi preciso retomar algumas questões que pudessem proporcionar uma visão clara de quais atributos eram mais percebidos pelos usuários dentro dos visuais de marketing e produto do Jusbrasil.
Entendendo de perto: Jusbrasil Experience Day
Como comentado na parte 01, o processo de remodelagem do estilo de ilustração e consequentemente da biblioteca de desenhos do Jusbrasil se caracterizou, como parte integrante de um trabalho de reestruturação da identidade de marca conduzido por mim e pelos demais integrantes do time de Branding da empresa.
Tal processo de rebranding teve seu início em 2019, potencializado pela realização de uma pesquisa de percepção de atributos via grupo focal no Jusbrasil Experience Day, evento que no ano retrasado compôs a primeira edição da Semana de Design da empresa. Nele, foi proposto um dia de imersão juntamente com os usuários da plataforma para que pudessem ser mapeados pontos que precisam de maturação tanto em marketing quanto em interface.
Atributos podem ser definidos como associações que as pessoas fazem com relação a determinado elemento. Entender como nosso público associa nossa comunicação a tais atributos nos ajudou a perceber se o trabalho realizado estava alinhado com a imagem que buscamos criar para a marca Jusbrasil. Nosso objetivo era entender como a atual comunicação do Jusbrasil era percebida por públicos da área jurídica e leigos. Para isso, realizamos uma sessão de pesquisa quantitativa. Como funcionou?
🖼 Amostragem: Selecionamos dois grupos de 06 pessoas, sendo 03 da área jurídica e 03 leigos e apresentamos uma série materiais. Alguns participantes conheciam o Jusbrasil, outros não.
📋 Questionário: Após analisar cada material, os participantes tinham que
responder um formulário de pesquisa e atribuir, em uma matriz, pesos indo do 0 ao 2 de acordo com a percepção que tinham do material em questão.
Analisando os dados da pesquisa pôde-se perceber que a ilustração utilizada no site pode ter influenciado em sermos percebidos como modernos, jovens e amigáveis. Bem como a casualidade e o ar descontraído não comprometem a imagem de credibilidade do Jus. A partir disso pudemos elencar quais elementos e aspectos nortearam a construção e solidificação da personalidade de marca Jusbrasil.
A base de tudo: Plataforma de Marca
A Plataforma de Marca é construída pelos ideais que a marca vivencia, acredita e promete. É a síntese de todas as informações levantadas e discutidas sobre uma empresa, pois a partir dela que as estratégias de negócio e de comunicação devem se alinhar, servindo de base para todas as ações da companhia.
Composta basicamente pela missão; visão; valores; promessa; personalidade; atributos e propósito do Jusbrasil, a criação da plataforma de marca têm sido o principal insumo para entendimento e disseminação de uma cultura de Branding e valorização da importância de um estudo aprofundado que tangibiliza as características intrínsecas no DNA da instituição. Dentro dela, destaca-se o tópico de personalidade, que foi o impulsionador para que a equipe de projeto se apoiasse na construção de um universo ilustrado que se comportasse de maneira condizente com o que foi estabelecido. Tal comportamento serviu de suporte futuramente tanto para definição de estilo de desenho quanto diretrizes técnicas para construção de personagens.
Dentro do Jusbrasil somos:
Nosso sol e ascendente: Arquétipos de Marca
Entende-se por arquétipos de marca a série de padrões responsáveis por criar traços de personalidade, valores, visão de mundo e crenças em uma organização. Partindo da divisão de tal compilado em 12 tipos, conseguimos categorizar e entender como eles se posicionam em relação a si mesmos e ao mercado em que estão inseridos.
No Jusbrasil, compreende-se os arquétipos como uma abordagem complementar à estratégia de marca, abordagem esta que proporciona mais clareza sobre a personalidade e auxilia para uma melhor tangibilização de determinadas características. Adotamos, portanto, como mix arquétipo a combinação do “Criador” com o “Sábio”.
Começando pelo começo: Princípios de Ilustração
De modo a arrematar o conceito de um estilo novo de desenho com as características da marca é vital o estabelecimento de princípios de ilustração que norteiem o início da produção de desenhos para as comunicações de produto e marketing. Dessa forma, conseguimos proporcionar um rápido alinhamento de mensagens entre times de Branding e demais pessoas designers e ilustradoras que não necessariamente estiveram envolvidas no desenvolvimento dos processos citados nos tópicos anteriores.
Os princípios a seguir foram escritos com base nos aspectos contidos na Plataforma de Marca, nos Princípios de Design de Interface da companhia e no Guia de Ilustrações ainda em vigência. Estes princípios direcionarão as novas criações ilustrativas do Jusbrasil como mais uma forma de proporcionar para nossos usuários a percepção de uma linguagem única, consistente e com mais personalidade.
Fase 02 — Estruturação das primeiras peças conceito
O processo de elaboração das propostas começou a partir de explorações realizadas pela equipe de projeto durante o primeiro semestre de 2020. Tal escopo de trabalho se deu da seguinte maneira:
1️⃣ Cada uma trouxe referências de estilos e ilustrações presentes em outros
similares de mercado para tomarmos como referencial a partir da construção
de um painel semântico no aplicativo Miro;2️⃣ A partir das referências coletadas, e embasados pelos traços de personalidade do Jusbrasil contidos na Plataforma de Marca realizamos um brainstorm para estabelecermos quais as diretrizes técnicas de estilo e conceito que os desenhos necessitam para começar a produção de novos conceitos.
Após definirmos essa base primária, foi hora de colocar a mão na massa de fato. Foram elaborados 03 concepts iniciais a partir dela:
Após discussões em equipe, foi decidido que a melhor maneira de validarmos qual o melhor estilo para nossos produtos e marketing seria através dos testes em tela com os usuários. No entanto, acreditou-se ser mais adequado desenvolvermos uma série de ilustrações para serem aplicadas nas telas do app de Consulta Processual do conceito com mais potencial do que criarmos inúmeros protótipos com cada um dos estilos apresentados.
Revisitamos, portanto, cada um dos concepts apresentados acima e validamos tantos pontos conceituais quanto técnicos que apontaram o Concept 03 como melhor opção para desenvolvimento e realização de testes. Outras ações também foram tomadas a partir de tais decisões, como a criação de um user group no Slack, que melhorou a comunicação entre as ilustradoras durante o processo e demais stakeholders internos. O mesmo também foi parte importante na remodelagem do fluxo de solicitação de ilustrações posteriormente.
Por fim, revisamos o guia de ilustrações em vigência, analisando como cada
tópico abordado pode se adequar tanto ao estilo novo escolhido (Concept 03) para a realização de testes quanto aos princípios atualizados.
Botando ordem na casa: Categorização de ilustrações
Antes de começar a produção do conjunto de novas ilustrações para serem testadas na tela do app, foi o momento de pensar e estabelecer como cada ilustração se comportaria no respectivo suporte que for aplicada. Para tanto, as ilustrações a serem produzidas no Jusbrasil foram divididas em 02 categorias principais nomeadas de cenas e badges:
O início de um sonho / deu tudo errado: Primeiros testes em tela
Com um pacote de 06 ilustrações primárias, foi iniciada a montagem de um protótipo de navegação simples para teste com usuários, porém alguns resultados saíram fora do esperado, tais como:
Após outras análises com demais stakeholders e designers do produto, concluímos que os desenhos em si estavam bons e se encaixavam com o propósito das telas, no entanto ainda seria preciso encontrar um jeito mais suave de finalizá-los e apresentá-los de maneira que ornassem mais com a interface existente no que diz respeito à cores, contornos e possivelmente texturas.
Para isso, foram realizados alguns esboços e estudos de como adaptar o Concept 03 aos novos requisitos após tentativa de criação de protótipo, porém ainda sem sucesso pois a aplicação de cores mais suaves fazia com que as novas propostas se assimilassem ao estilo de desenho em vigência, o qual possui pouca personalidade e é denominado, de acordo com o guia também vigente, como agradável e passivo. Características essas que não correspondem com os arquétipos e personalidade estabelecidos para a marca Jusbrasil.
Fase 03 — Reformulando o processo de construção de um novo estilo
É isso mesmo que você tá pensando: meses de trabalho jogados fora, hora de recomeçar quase tudo do zero. Após realização das aplicações em tela notou-se que seria necessário realizar um trabalho de retardo, mais a nível conceitual, de “dentro para fora” (pois até então foi percebido que a equipe tinha absorvido muito de referências externas, o que acarretou em uma perda/falta de personalidade que é justamente o que está se procurando corrigir no estilo atual) de maneira a não termos os princípios de interface como limitantes e sim como auxiliares na construção do universo ilustrado Jusbrasil.
A virada de chave: Jusbrasil 3.0
Lembra que eu comentei na parte 01 dessa série que modificações na percepção da marca alavancavam tanto mudanças no Design System quanto no Jus como empresa? Paralelamente às essas iniciativas, começou-se a investigação e conceitualização de um novo ambiente Jusbrasil, com uma nova interface, novos componentes, mais alinhado aos princípios de marca e negócio e consequentemente à criação de um sistema de ilustração mais robusto e assertivo com relação à todos esses aspectos. O que fez com que um de nossos principais desafios também fosse: “como refletir as tomadas de decisões de design do Jusbrasil em um design system que está sendo reimplementado?”.
Começamos, portanto, a elencar uma série de mudanças que precisariam ser feitas no nosso fluxo de trabalho, sendo que a principal seria: Iniciar uma nova etapa de produção pensando nos conceitos das formas humanas, como retratar as personas usuárias do Jusbrasil pois elas guiariam as construções dos spots e cenários, unificando e dando consistência à uma narrativa.
O início de um storytelling: Jornada de Marca ou Storybrand
A Jornada de Marca, também conhecida como Storybrand ou método SB7 é uma ferramenta para simplificação das mensagens de comunicação e marketing de uma marca. Dividido em sete princípios, ele ajuda a criarmos uma narrativa a qual será traduzida em uma mensagem clara e relevante. Criada pelo autor best-seller e consultor Donald Miller, a abordagem detalhada em livro homônimo é definida da seguinte forma:
A delimitação da jornada de marca, foi o ponto chave para que a narrativa que rege o conceito do novo estilo de ilustrações da empresa fosse criado. Entendendo os usuários como o herói e a marca/produto como um guia, o personagem/herói portanto passa a ser o advogado(a)/operador(a) jurídico(a) o qual após virar cliente Jusbrasil se caracteriza agora como um(a) profissional com uma rotina de trabalho menos maçante, mais assertiva, mais prática, com mais tempo para outros afazeres, etc.
Esse tipo de mensagem foi fator crucial para a criação e utilização de ilustrações mais lúdicas de modo que o novo universo ilustrado seja construído no intuito das personagens serem definidas por suas ações, fazendo com que as mesmas endossem a própria narrativa nos suportes que lhe couberem.
A partir daí todo o universo o qual os novos personagens foram pensados passaria a ser embasado no comportamento da pessoa usuária do Jusbrasil conforme construção da Jornada de Marca/Storybrand. Com isso pudemos definir um posicionamento pretendido das ilustrações tanto para UI quanto para peças de marketing. Com ele bem definido, conseguimos obter clareza de onde queríamos chegar com uma nova proposta de estilo para que insconsistências visuais e de mensagens fossem evitadas.
Começamos então a rabiscar as possibilidades dentro dessa narrativa ilustrada. Aqui embaixo você consegue conferir nossos estudos iniciais para solidificação de um novo estilo de desenho.
Foi escolhida por cor predominante o verde da interface, pois ele se caracteriza como a “cor do herói” do Jusbrasil. Cor do herói nada mais é do que a cor que vai ajudar a construir o conhecimento da marca e ajudar os espectadores a reconhecerem imediatamente o conteúdo quando estiverem acessando o produto.
Porém, ao simularmos em uma tela percebemos que o fundo priorizando a cor do herói não era a melhor saída pois acabava indo contra ao posicionamento pretendido: tirava totalmente o foco da mensagem e objetivo da página, chamando toda a atenção para si, com resultado similar ao teste no aplicativo de Consulta Processual: uma interface com peso de elementos mal distribuído, concentrado apenas em um só lugar.
A partir desta simulação, já foi possível elencar alguns pontos de melhoria. No entanto, compreendemos que mais importante do que resolver imediatamente o peso dos elementos ponderados acima, era definirmos o cerne de execução do desenho e como esse estilo apresentado se comporta de maneira escalável entre todas as ilustradoras. Essa decisão ocorreu, pois dessa forma conseguiríamos testar um elemento chave pra continuidade da produção:
📝 Ao invés de trabalharmos em conjunto em uma única versão do que foi
apresentado, optou-se para que cada membro da equipe apresentasse sua(s) versão(ões) do estilo pós elencamento dos pontos de melhoria, com livres orientações de refinamento tanto para as personagens quanto novas propostas de plano de fundo.
Trabalhando dessa forma, além de termos uma maior variedade de soluções, conseguimos de maneira conjunta focar e pensar em todo o fluxo feliz da estrutura de produção do novo universo ilustrado do Jusbrasil com base nos critérios de:
📝 Entende-se por fluxo feliz do processo da ilustração conceitual e técnica, até divisões de tarefas entre o time para elaboramos uma remodelagem futura de formato de solicitação de criação de ilustrações, uma vez que um dos nossos maiores objetivos é proporcionar algo escalável entre nosso time de Design.
Cada membro da equipe de projeto, por conseguinte, desenhou pelo menos uma das ilustrações a seguir. As com marcação em vermelho foram feitas por mim, a com marcação em rosa por Dricka, em amarelo por Larissa e em laranja por Maryana.
🎯 Fun fact: A saga em busca da consolidação de um estilo novo de ilustração durou quase o ano de 2020 inteiro. Desenhamos, testamos, aprimoramos muita coisa e hoje em dia ele é assim:
Fase 04— Testando em um outro ambiente
Como saber se todas as nossas decisões acerca desse novo estilo funcionam?
Com bases bem estruturadas entre o time de ilustração, chegou o momento de realizarmos testes com usuários/stakeholders internos e externos para sabermos se estávamos seguindo o melhor caminho para remodelagem dos desenhos. Utilizando as mesmas ilustrações que fizemos para a proposta de estilo escalável, foram disponibilizadas internamente e externamente, de forma online, duas pesquisas (uma qualitativa e outra quantitativa) para validar alguns pontos sobre a nova proposta de estilo de ilustração.
📝 O envio de uma pesquisa online pode ser feito para que os usuários descrevam o que eles entenderam sobre determinadas ilustrações, quais sentimentos foram despertados e em qual contexto eles acreditam que elas fazem sentido. Assim é possível comparar conceitos dos desenhos e identificar quais são mais bem sucedidos para transmitirem a mensagem desejada.
O objetivo era alinhar o estilo de ilustrações com a estratégia de marca, aproximando a linguagem visual de uma comunicação mais dinâmica, inovadora, descontraída e menos tradicional tanto para o produto quanto para o marketing do Jusbrasil 3.0. Por isso, as perguntas das pesquisas foram direcionadas para investigar se, na percepção dos stakeholders, o estilo proposto tem contemplado os atributos/requisitos descritos nos, Princípios de Ilustração, Princípios de Interface e Plataforma de Marca. Com esses dados, foi possível justificar positivamente as decisões tomadas até então. 🚀
🎉 Se você chegou até aqui: Obrigada!
Dadas as particularidades da marca Jusbrasil, queríamos criar e documentar um estilo de desenho que fosse totalmente inovador de acordo com as necessidades tanto de marca quanto de produto em serem conversacionais e amigáveis, simples e contextuais, funcionais e acessíveis.
Para isso, foi necessário encarar ilustrações como extensões complexas, completas e intencionais do Branding e Design System da instituição pois conforme a empresa e a marca amadurecem, o mesmo acontece com o grau de especificidade, tecnicidade e processo em torno do pensamento ilustrativo.
Quer saber mais sobre a evolução desse projeto?
No próximo artigo contarei como nós estruturamos as fundações da nossa biblioteca escalável através da construção do nosso novo guia de ilustração, e como acessibilidade, diversidade e inclusão foram pontos importantes na criação disso tudo.
E você? Tem/Teve alguma dificuldade/dúvida sobre como alinhar as ilustras utilizadas no produto com mensagens de marca? Trocas de experiências e feedbacks são sempre bem-vindos aqui nos comentários. :)
