002 / 012
Illustrations
Role:
Lead Brand Designer
Tools:
Illustrator + Figma + After Effects
The Opportunity
One of my first tasks during my contract at HackerRank, was to develop a library of illustrations. A distinct library that would be totally unique to the HackerRank brand and serve as vehicles to tell stories very quickly with a touch of personality. We also wanted to ensure that we were being thoughtful in the metaphors of these illustrations, rather than being very cliche and common. An end goal, would be to have a strong and well defined visual style that we could plug into an AI design tool to help us further expand this series while staying true and consistent to the brand.
The Process
I got on a call with the Design Director and we basically just started dropping a bunch of inspiration into a Figma file. Brands that seemed to really be nailing these narratives regardless of the vertical. We then started to dissect why each of these felt strong. A common thread here, was the clever thinking behind what the visuals shown were representing - almost more so than the visuals themselves. We understood that at times, we wouldn’t try to get too clever with these depictions, but identified lots of opportunities where we could. The Design Director then helped pull a few existing illustration examples, that were in need of the refresh more so than others.
This is where I set out to first and foremost solidify a style that we loved. To do this I focused in on just a couple of illustrations, and applied about 5-6 very different visual styles to each of these. Once I was feeling good about the directions, I shared them with the team for feedback. After just a couple of rounds, we had our style to work with. I created some documentation around visual rules to ensure consistency with this new style and then got to creating.
One of the challenges here, was knowing when to pause and step away to avoid forcing some of these metaphors. I had a lot of fun creating these, but needed to make sure that I wasn’t running myself into a quantity over quality issue.
The Result
As it stands now, I have created about 25-30 different illustrations in our library. The library is in Figma, with organized artboards ready to be exported for use. While this is a project that will be forever expanding, we now have a solid foundation that aligns with our brand and brings in a bit more personality. The next step that I will be taking, is animating these illustrations to make them come to life even more so. Subtle hover animations for example, would make them that much more engaging throughout our website or landing pages as we start to unveil them.