Construindo um sistema de ilustração que funcione para todos — Parte 01
O redesign da biblioteca de ilustrações do Jusbrasil: Por onde e como tudo começou.
Há nem tanto tempo assim, numa galáxia (não muito) distante, iniciamos uma remodelagem da identidade de Marca do Jusbrasil, uma empresa privada do setor de tecnologia voltada para a coleta, organização e disponibilização da informação jurídica pública, a qual as ilustrações estão presentes tanto nas comunicações do produto digital como de marketing. Através da reestruturação de um trabalho de base de posicionamento, missão e visão da companhia, modificações na percepção da marca alavancavam tanto mudanças no Design System quanto no Jus como empresa.
👋🏽 Olá! Eu sou a Maria, Brand Designer e líder da guilda de ilustração do Jusbrasil, e nesse primeiro artigo vim compartilhar como eu, Larissa, Maryana e Dricka — atuais ilustradoras do time de Design — identificamos as dores, organizamos e conduzimos as metodologias de trabalho para construirmos um Illustration System do zero, de maneira colaborativa e 99% virtual.
Segundo a Head de Ilustração do Airbnb, Jennifer Hom, as palavras podem definir o tom de uma empresa, mas são as imagens que lhe dão um rosto. Marcas digitais podem ser impactadas pela ausência de um produto tangível para os consumidores se relacionarem, afinal desenvolver um produto cativante quando ele só existe em uma tela pode muitas vezes ser um desafio, especialmente se esses produtos estiverem competindo em um mercado com crescimento abrupto como o das startups. Contudo, à medida que a internet se torna mais orientada para a imagem, as esferas da tecnologia e da mídia vêm abraçando e consequentemente dependendo cada vez mais do uso de ilustração para preencher os espaços em branco e adicionar personalidade aos seus aplicativos e páginas da web.
É importante salientar que não se trata do uso periódico de ilustrações em
pontos de contatos específicos, mas sim do que acontece quando uma companhia necessita de um estilo de desenho que se comporte de maneira escalável e sustentável a ser desenvolvido especialmente para seus produtos e comunicação. Nos ambientes da infraestrutura de tecnologia da informação e engenharia de software, escalabilidade é uma característica desejável em todo o sistema, rede ou processo, a qual indica a capacidade de manipular uma porção crescente de trabalho de maneira uniforme, ou estar preparado para crescer.
Todo produto digital é uma nova instigação e as ilustrações utilizadas em suas comunicações são elementos de humanização dos mesmos. Pensar sobre elas e como podemos utilizá-las para resolver problemas a partir do momento que as encaramos de maneira holística nas abordagens do produto (o que há de novo, quais são os valores do item? Como tornar a ilustração compreensível em vez do caos desnecessário? Como mostrar aqueles valores que serão cruciais para o usuário?) foi o ponto de partida para alavancar esta pesquisa e projeto.
A ilustração em produtos digitais não tem a pretensão de somente ser bonita, mas sim de ter sucesso. Em design de produto e marca, primeiramente precisamos compreender as ilustrações como um recurso, antes de falar sobre estilo, aplicações ou conceitos. E como todo recurso, pode ou não ser válido, podendo também ser implementado de variadas maneiras de acordo com a natureza e evolução de um produto.
O processo de redesign do estilo de ilustração e consequentemente da
biblioteca de desenhos do Jusbrasil se mostrou diferente dos demais similares mapeados no mercado no momento pois se caracterizava, para além de um projeto bastante experimental, também como parte integrante de um trabalho de reestruturação de bases da identidade de marca conduzido recentemente pelo time de Branding da empresa.
Com a evolução exponencial da companhia e rápido desenvolvimento de
produto, há 13 anos o Jusbrasil veio crescendo de maneira dissociada, o que fez com que a percepção do mesmo enquanto marca possuinte de atributos e personalidade obtivesse certa discrepância com a experiência de usuário proporcionada pela navegação nas interfaces do produto e seus artefatos.
Portanto, a remodelagem de um novo sistema de ilustração que começasse a unir tanto as premissas de marca quanto os nossos princípios de produto se mostrou parte necessária para termos uma experiência de uso unificada e consistente, uma vez que o trabalho de design desenvolvido dentro da empresa também estava cada vez mais se adequando à nova identidade e personalidade da marca Jusbrasil, buscando sempre estar atento a qual produto está sendo construído para o futuro.
Como mencionado anteriormente, a reestruturação de um recurso como as ilustrações, interlocutoras de mensagens tão importantes, auxiliaram não só a potencializar experiências que promovam a marca Jusbrasil, mas a facilitaram a tomada de melhores decisões de Design dentro do Design System por parte dos times, pois restabelecer e/ou construir uma linguagem pelas suas fundações nos permitiu olhar para o produto como um todo, entendendo quais suas necessidades, adquirindo uma visão mais crítica e assertiva sobre os pontos que requeriam maturação.
Existem propriedades que toda ilustração deve cumprir para ser avaliada com sucesso e que devem ser acessíveis a todos — não apenas aos ilustradores e ilustradoras. Fazer uso desses princípios cria uma linha de base sustentável e escalável, priorizando a qualidade de todo o corpo de trabalho sobre o sucesso de qualquer instância. Eles são princípios importantes a serem mantidos em mente durante todo o processo, desde o primeiro esboço até a realização de testes finais, podendo funcionar como ferramentas para fornecimento de feedback tanto para demais pessoas ilustradoras quanto para outros membros da equipe.
Nesse contexto, para além das provocações sobre a discrepância entre experiências produto e marca, surgiram outros questionamentos iniciais do projeto:
A resposta é que os times de Marca e Produto precisam ser capazes de criar e atualizar essas ilustrações.
Como marca, você não quer que todo designer faça suas próprias composições ilustradas, mas você deseja ainda ser capaz de compor ilustrações. No entanto, a homogeneização e construção de consistência das ilustrações em tecnologia não se deve apenas à uma sistematização. Para capacitar os designers a criarem ilustrações atraentes, as marcas precisam fazer escolhas autênticas e construírem sistemas robustos, afinal a autenticidade estética surge quando as lideranças do projeto tomam riscos e incentivam a equipe a fazer escolhas ousadas e um sistema robusto de ilustração se constrói quando equipes de design são configuradas para replicar e executar com sucesso um estilo institucional.
Nossa metodologia de trabalho — Design Colaborativo (Codesign)
"Sonho que se sonha só, é só um sonho que se sonha só. Mas sonho que se sonha junto, é realidade."
Segundo teóricas da área, “a atividade do design pode ser relacionada com a mudança de situações existentes para desejadas ou preferidas". São inúmeras as abordagens que, ao longo dos últimos anos, têm estudado essa transformação tomando como uma parte essencial do processo o que todas as partes envolvidas desejam. Esse é o caso da abordagem metodológica central deste projeto, o Codesign, o qual se caracteriza como uma das tendências participativas do design contemporâneo, envolvendo a perspectiva do grupo em todas as etapas do processo de resolução de problemas.
A jornada do design colaborativo contribui para o desenvolvimento de “coisas” , porque os resultados também são colaborativos, frutos de agrupamentos e junções de processos coletivos. De acordo com Latour (2014, p.3) “quanto mais os objetos se transformam em coisas — isto é, quanto mais questões de fato se transformam em questões de interesse-, mais eles se traduzem inteiramente em objetos de design”, o Codesign apesar de estar focado em uma coisa que ainda não existe, vai materializando ideias e conceitos durante o percurso.
A partir disso, a construção metodológica e organização primária do processo de redesign da biblioteca de ilustrações do Jusbrasil se deu a partir do entendimento da contribuição de ferramentas que auxiliam no levantamento e visualização de dados tais como mapas conceituais, Diagrama de Gantt, painéis semânticos, etc. As mesmas se "coisificaram" dentro do processo de Codesign a partir da utilização de aplicativos e artifícios para gerenciamento de projetos dentro da metodologia SCRUM como Notion, Miro, Project Model Canvas, Canvas de Proposta de Valor, quadro kanban, entre outros.
Foi requisito do projeto que o desenvolvimento dessa nova biblioteca fosse adequado para o contexto e as demandas da atualidade, aproximando-se das metodologias do Design e priorizando os desejos e comportamentos do seu público alvo. Também fez parte deste trabalho, a criação de um guia de ilustração que contém tanto fundamentações teóricas embasadas pelo recente reposicionamento de marca da empresa, quanto especificações mais técnicas para criação e armazenamento de um novo estilo de desenho pois ambos são elementos essenciais e intrínsecos à evolução e manutenção de uma biblioteca de ilustrações escalável dentro do Design System e entre o time de designers.
Gestão do projeto: SCRUM, o que é uma sprint e como executá-la?
O SCRUM é um método usado para gerenciamento projetual que beneficia a empresa e seus times de projeto com agilidade e flexibilidade em seu desenvolvimento. Trabalhando com rotinas como o SCRUM dentro do Jusbrasil, a equipe de design da empresa se torna capaz de trabalhar conjuntamente em busca de uma estratégia mais completa, segura que permite a entrega contínua de partes do produto, todas de forma funcional.
A partir disso, os eventos de sprint se integraram ao framework do SCRUM como uma forma de facilitar a divisão de um projeto em etapas ao longo do tempo através de reuniões semanais, estabelecimento de metas e um bom fluxo de trabalho gerenciado por ferramentas de gestão como o quadro kanban, por exemplo.
Entendendo a big picture: Project Model Canvas
Com criação inspirada pelo projeto de Osterwalder e Pigneur, e desenvolvido por José Finocchio Júnior, o Project Model Canvas ou PMC é constituído por um modelo de distribuição de tópicos do projeto os quais permitem o rápido entendimento de todas as etapas do projeto de uma única vez.
Podendo ser modificado durante qualquer etapa de construção do projeto, através do preenchimento de forma objetiva por meio de adesivos autocolantes, o PMC é composto por 13 partes/tópicos que respondem cinco perguntas essenciais para a garantia da efetividade da ação da pessoa designer, são elas:
Assim, ao preenchermos o quadro de maneira conjunta virtualmente, com a presença de stakeholders diretos do projeto, conseguimos além de ter uma visão macro da situação, identificar e elencar as principais dores que o cenário de ilustração do Jusbrasil estava enfrentando. Com os pontos abaixo mapeados, começamos assim à modelar a estratégia de criação de um novo Illustration System com funcionalidade, valor e propósito.
Cortando o mal pela raiz: Canvas da Proposta de Valor
Como que essa estratégia resolve os problemas? E o que a gente ganha com esse trabalho todo?!
Distinguido entre valores quantitativos (velocidade do serviço, preço, etc.) e qualitativos representados pelas experiências do cliente, o Canvas da Proposta de Valor se apresenta como uma formatação do conjunto de benefícios que um produto oferece para satisfazer as necessidades de um determinado tipo de público-alvo sendo possível tornar visível de maneira dinâmica às possíveis soluções para tais questões.
Com um caráter interativo, se apresenta como um quadro dividido em duas partes, no qual as visões da empresa e do cliente estão uma ao lado da outra, fazendo com que as soluções e as necessidades de cada um dialoguem de maneira fluida. Para a criação de uma biblioteca de ilustrações escalável, o Canvas da Proposta de Valor foi uma das principais ferramentas para que a equipe de ilustradoras responsáveis pelo projeto pudesse visualizar como tornar mais tangível os valores que a nova biblioteca estaria entregando.
Todos os cenários mapeados? Hora de correr contra o tempo: Diagrama de Gantt
Criado pelo engenheiro americano Henry Gantt, no começo do século XX, o diagrama homônimo é uma ferramenta visual utilizada para monitorar e gerenciar o cronograma de atividades do projeto. Através dele foi possível listar tudo que foi preciso fazer para colocar a criação de um novo guia de ilustrações em prática, bem como dividi-lo em tarefas juntamente com uma estimativa de tempo necessário para suas respectivas execuções.
Dividido em dois eixos, o vertical e o horizontal, o qual o vertical contém as atividades que a serem feitas, e o horizontal mostra os tempos de início e término de cada tarefa. Relacionando ambos os eixos conseguimos analisar em quanto tempo determinadas entregas serão feitas e até mesmo quais atividades deveriam ser incluídas de maneira prioritária em cada sprint.
🎯 Fun fact: Esse diagrama mostra apenas o cronograma para elaboração do conteúdo e diagramação do nosso novo guia de ilustra. O projeto ao total durou 01 ano e meio, aproximadamente, e segue em constante evolução :)
Conhecendo o terreno onde estamos pisando: Análise e síntese da atual estrutura do Jusbrasil Design System
De acordo com Brad Frost, um design system é basicamente a história de como uma empresa constrói um produto digital. Antes de começar a falar sobre as especificações de como as etapas de construção deste projeto se deram, é preciso entender como esse sistema é estruturado. Em sua essência, um design system é a soma de suas partes e como a conexão entre elas trabalha em prol de um propósito definido.
Essa definição pode não parecer tão clara ainda, mas para que possamos
entendê-la melhor, precisamos definir alguns conceitos e compreender quais são as partes desse sistema e como elas interagem entre si. Classificamos e organizamos o Design System dentro do Jusbrasil da seguinte forma:
O entendimento de como o Jusbrasil Design System é organizado nos proporcionou uma visão clara do que, como e até onde poderíamos trabalhar e integrar um novo sistema à ele, sem que a estrutura atual e o time fossem prejudicados. Para tangibilizar isso, optamos por validar tais pontos através da execução de um MLP (Minimum Lovable Product ou Mínimo Produto Amável) o qual significa, que ainda com recursos mínimos, é trabalhado o conforto do usuário ao utilizar um serviço ou ferramenta com o intuito de cativá-lo.
Visando tanto o desenvolvimento do novo guia de ilustração a ser construído, quanto o MLP de escalabilidade da nova biblioteca a ser realizado a partir dele com o time de designers, os artifícios metodológicos apresentados acima permearam desde a conceitualização e pesquisa até a mensuração de resultados e exposição oral com o restante da equipe. Os mesmos atuaram como suporte para o desenvolvimento de uma linha de raciocínio e construção projetual, bem como para o entendimento dos artigos e cases de relevância mapeados como similares ou referências.
Muito obrigada por ler até aqui! Essa aventura está só começando 🚀
Desenvolver este novo sistema de ilustrações foi um grande desafio que me proporcionou criar habilidades, adquirir experiências e acessar conhecimentos que irão para além do que carrega e diz qualquer artigo. Desde o desafio de gerenciar tanto o meu desejo pessoal de atuar profissionalmente como designer ilustradora, quanto as frustrações e alegrias advindas das expectativas para o projeto.
Tive a oportunidade de liderar pela primeira vez uma equipe de profissionais (orgulhosamente e integralmente feminina), superar medos e bloqueios pessoais, dificuldades de expressão e comunicação, pude compreender e aprender a lidar com contextos e modos de trabalho diferentes do meu, encarei processos metodológicos do Design ainda recém explorados por mim até então… Por toda essa trajetória de quase 02 anos de trabalho, sinto-me muito satisfeita com o resultado deste projeto, não apenas por tanto crescimento profissional que me foi proporcionado a partir dele, mas também pela oportunidade de evolução como líder e principalmente aprendiz.
Quer saber mais sobre esse resultado?
No próximo artigo compartilharei de maneira mais detalhada a continuação desse processo e como nos aliamos 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. Aguarde a próxima leitura :)
Enquanto isso, vai me contando aqui nos comentários se você já passou ou está passando por um processo parecido, como está se organizando, quais as motivações, se você conta com a ajuda de mais alguém… vai ser um prazer iniciar essa troca!
