Ícones e ilustrações para o app e o site do Guiabolso: um guia de construção de ícones e a expansão do sistema de ilustração da marca dentro do produto.
Ilustrações de produto num repositório compartilhado
Pontos de contato: o app, o GB Connect (B2B), o site e páginas de parceiros
No Guiabolso, trabalhei como designer e ilustrador antes de migrar para product design. As ilustrações da marca e o guia original foram criados pelo ilustrador Lucas Wakamatsu, com o nosso time. Minha parte foi fazer o sistema funcionar dentro do produto: criei o guia de construção de ícones do novo design system, repliquei ilustrações para novas necessidades do produto, escrevi guias de uso complementares e construí componentes modulares de personagens no Figma.
Depois, no Mercado Livre, levei a mesma abordagem para escrever o manual de iconografia da empresa toda.
Para o novo design system, escrevi as regras de construção dos ícones próprios: área útil e margens, grid de base, formas geométricas básicas e como traço e cantos dão personalidade aos ícones. O guia também relacionava cada ícone antigo da plataforma à sua nova versão, para os squads migrarem sem adivinhar.
A partir do guia original da marca, mantive um repositório com mais de 50 ilustrações e composições para o produto, replicando o estilo para novas necessidades, e criei guias de uso para que outros times o aplicassem de forma consistente no app, no GB Connect (o produto B2B), no site e nas landing pages de parceiros.
Transformei os personagens em módulos no Figma, construídos sobre proporções e formas básicas comuns. Designers podiam combinar corpos, poses e objetos para compor novas ilustrações sozinhos, o que mantinha o estilo consistente sem precisar de um ilustrador a cada pedido.
O mesmo sistema no marketplace do site e nas páginas de produtos de parceiros.
O sistema deu ao Guiabolso uma linguagem visual reconhecível em produto e marketing, e permitiu que designers de outros squads criassem ilustrações dentro do estilo.
A ilustração teve um papel importante em humanizar nossos fluxos e no reconhecimento da marca Guiabolso, mas um sistema visual só escala quando outras pessoas conseguem usá-lo sem você.
Documentar as regras facilitou o processo entre o time de produto, o marketing e as agências contratadas para produzir conteúdo de growth.