Moonfare Icon Set
Context
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.
Team
Main stakeholders: VP of Design
Me as Design lead
Product Design - Design Systems PD
Brand Lead Designer
Research
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.
Moonfare's Monogram
Monogram and currency symbols
The Plan
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.
Project management
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:
Map out all icons needed on a spreadsheet with quick access to where the icon was being used and what concepts they should convey
Flagging production status for each icon with a counter for tracking progress and as a form of increasing visibility on "how much's left"
Split icons to Designers
Create quick follow-up meetings to track progress and identify blockers. Those meetings with action points were recorded on a document with everyone tagged
Creating Figma pages for each designer to explore with visibility to their share of the icons listed
Define an approval process of sending 2 or 3 alternatives for each icon to a Slack channel to other Designers. There we'd have either thumb up/down approval and suggestions
Final approval round with Designers involved in the project + VP of design
Finalize and export icons for hand-over (this was done by me)
Putting order to chaos
Live collaboration
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.
Icon frenzy
Final Result
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
Guidelines
Learnings
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.
