Moonfare Icon Set

TL;DR

As part of Moonfare's rebranding. We decided to take the job of creating a new icon set in-house. We accomplished the task collaboratively and in a short turnaround time.

TL;DR

As part of Moonfare's rebranding. We decided to take the job of creating a new icon set in-house. We accomplished the task collaboratively and in a short turnaround time.

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.

How might we create a new icon family that would represent Moonfare's product concepts well, in alignment with its new brand?

How might we create a new icon family that would represent Moonfare's product concepts well, in alignment with its new brand?

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:

  1. Create icon guidelines to allow other Designers to contribute

  2. 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.

Contact

Based in

🇩🇪 Berlin/Germany

Phone/Whatsapp

+49 0174 7815236

Email

minasdesign@gmail.com

Social

Work experience

2022 (current)

Senior Product Design Manager @ Moonfare

2018-2022

Product Design Manager @ HelloFresh

Now reading

Contact

Based in

🇩🇪 Berlin/Germany

Phone/Whatsapp

+49 0174 7815236

Email

minasdesign@gmail.com

Social

Work experience

2022 (current)

Senior Product Design Manager @ Moonfare

2018-2022

Product Design Manager @ HelloFresh

Now reading

Contact

Based in

🇩🇪 Berlin/Germany

Phone/Whatsapp

+49 0174 7815236

Email

minasdesign@gmail.com

Social

Work experience

2022 (current)

Senior Product Design Manager @ Moonfare

2018-2022

Product Design Manager @ HelloFresh

Now reading