Creating Points of Interest and Information with Illustration
How can we leverage illustrations to take advantage of empty spaces and inform advisors of actions they can take?
Overview
There were places in the application that were left blank or were using outdated, older illustrations that gave little context. I wanted to be able to take advantage of my illustration skills whilst also honing in on rebranding and reaffirming our company brand through those very illustrations.
The challenge
Spearheading and workshopping a visual illustration style that matches the company brand and tone. Ensuring those visuals were clear and concise. How can we use these illustrations to be used widely in different scenarios to give advisors better starting points for their actions?
The solution
Create illustrations that matched the company brand and tone that were clear enough to relay messaging for the context of where they were placed
Impact
Illustration library is widely used througout different parts of the product
Kudos from advisors and stakeholders that it had felt like a breath of fresh air
Video Walkthrough
Want to dive in?
How did we get there
Research
Discussions Within The Design Team
I spoke with other team members on design to find out what use cases we could be using these illustrations throughout the app in addition to pairing up with our design VP to find an immediate use to test it out with.
Findings
Looking toward an existing library like huumans as a starting point
Ensuring the shapeless look remained, as the clear shape language was favorable
Modularity in parts of the illustration, being able to swap them out
Building Out The Library
I began scoping out how to go about modularly building out bits and pieces of the illustrations that way we could swap them out. It was key to also make the hands poseable in any case we had to have characters interacting or pointing to something.
Creating Proper Documentation & Guidelines
After creating the illustrations and some presets, I focused on making documentation and setting up guidelines for how to best use them without me being directly consulted. Additionally, I had put some potential pathways for the future to keep track of in the case those ideas would have the opportunity to be executed in other designs and use cases.
Full Library
We rolled out this onboarding process for a Reporting Templates feature for new visitors to the page.
Full Illustration Library | View in Figma
What did we accomplish
Impact & Metrics
Refreshing and reinforcing the brand identity through the illustrations
Creating memorable onboarding and starting experiences with illustrations
What I learned
Think in a bigger picture. How can we use these illustrations everywhere? Can they be used everywhere? Creating with that in mind to be able to made a good wide use case.
