Moonfare Icon Set
I have a thing for icons. Something about creating small images within highly constrained stylistic options makes me very excited. I may see them as the perfect representation of the form and function conundrum.
From the years I've spent designing icon families, I needed to gain the pragmatic approach of creating a set that would serve as a feature of a branding process. I have had this opportunity at Moonfare since I joined the company amid a rebrand project.
The new brand was being created by the very talented folks at Barkas and, although their new brand work for Moonfare was brilliantly executed, it lacked more clarity and "UI thinking" on the icons they proposed. I jumped in to organize a project with our Design Systems Designer and Brand Lead to take over this task in-house.
Main stakeholders: VP of Design
Me as Design lead
Product Design - Design Systems PD
Brand Lead Designer
The research consisted in finding what visual features would bond the icons with the new brand. We discovered that the new logo was the best piece to understand the geometry and patterns we needed to represent.
Monogram and currency symbols
Moonfare's new website was already in production and was the first place icons would be used. The work was being done by a freelancer designer, who, unaware that the new brand didn't have an icon set ready, included ~60 icons in his designs and placed a big visual focus on them to support textual content. That, in and of itself, was great since the icons offered an outstanding balance to the sometimes technical aspect of investment content.
Representing complex concept
What icons offer (when done right) is to allow complex concepts to be represented in simple shapes. For private equity, this was crucial since terms such as "Fund structuring," "GP fees," or "Venture capital" were among the concepts that needed a visual representation.
The best way to tackle complexity is by defining analogies and testing different ways to represent concepts. We also defined a well-rounded feedback cycle with diverse perspectives to define the winners for each idea.
To manage 3 designers (plus another one from the agency) to execute this project, I established a tight process to ensure we could explore our creativity and deliver it pragmatically by a short deadline (website launch was the milestone). This is what the process looks like:
Putting order to chaos
The first step to define what characteristics would make the icons connect with each other was to create many variations. What worked well for us was to run pairing sessions where we used ~3h online chats to work together. We played some music and kept our mics open as we worked on our own pages. As soon as one of us had a breakthrough, we'd share it with the team immediately. That worked really well.
The project took ~3 weeks, and we successfully handed-over the icons in time to be placed on the new website 🙌.
To wrap-up, we worked on some final tasks:
Create icon guidelines to allow other Designers to contribute
Create a new Design system asset library on Figma
Leading a creative endeavor with pragmatism
I wanted to make sure we had enough creative room to explore and put our skills and personality into the icons we worked on even with the time constraints. By going through tight feedback loops and doing live working sessions, we found a sweet spot regarding style and approach to icon creation.
There's a reason most companies outsource icon creation
Creating an icon set is not a trivial task. There's a method to it, and the accuracy and eye for detail needed are skills that only some Designers are interested in. It's an intersection between illustration and UI design, so if you want to do it in-house, there needs to be training and up-skilling for your team to succeed.