Iago Novais is a product designer for fintech, based in São Paulo.
Designed Open Finance and Pix journeys at Mercado Pago,
recognized 4× at the Open Summit Awards 2022.

Icons & Illustration Systems

Icons and illustrations for Guiabolso’s app and website: an icon construction guide, and scaling the brand’s illustration system inside the product.

Role

Product Designer & Illustrator

Company

Guiabolso

Tools

Figma · iOS, Android & web

Timeline

2019–2021

Three basic shapes on a grid turning into proprietary icons: radar, document, camera
50+

Product illustrations in a shared repository

4

Touchpoints: the app, GB Connect (B2B), the website and partner pages

Summary

At Guiabolso I worked as a designer and illustrator before moving into product design. The brand illustrations and their original guide were created by illustrator Lucas Wakamatsu, with our team. My part was making the system work inside the product: I created the icon construction guide for the new design system, replicated illustrations for new product needs, wrote extra usage guides, and built modular character components in Figma.

Later, at Mercado Livre, I took the same approach to author the company-wide iconography manual.

Icon system

For the new design system, I wrote the construction rules for proprietary icons: usable area and margins, a base grid, the basic geometric shapes, and how stroke and corners give the icons their own character. The guide also mapped every old platform icon to its new version, so squads could migrate without guessing.

Illustration system

Building on the original brand guide, I maintained a repository of 50+ illustrations and compositions for product use, replicating the style for new needs, and added usage guides so other teams could apply it consistently across the app, GB Connect (the B2B product), the website and partner landing pages.

Guide pages for visual hierarchy, colour and animation
Illustration guide pages. Original brand guide by Lucas Wakamatsu; usage guides and replications by me.

Modular components

I turned the characters into modules in Figma, built on shared proportions and basic shapes. Designers could combine bodies, poses and props to compose new illustrations on their own, which kept the style consistent without an illustrator in every request.

Character proportions and construction from basic shapes

Applied

The same system across the website marketplace and partner product pages.

Two partner landing pages with illustrations: bank accounts and insurance
Guiabolso marketplace page with illustrations
Guiabolso marketplace. Brand illustrations by Lucas Wakamatsu and team.

Impact

The system gave Guiabolso one recognizable visual language across product and marketing, and let designers on other squads create illustrations within the style.

What I learned

Illustration played a big part in humanizing our flows and in Guiabolso’s brand awareness, but a visual system only scales when other people can use it without you.

Writing the rules down made the process easier between our product team, marketing, and the third-party agencies hired to produce growth content.