In 2015 after the launch of Guidebook's Builder (the third iteration of it's CMS) our customer service associates (CSAs) were getting complaints from event organizers (our paid users) about the menu icons on our platform. Complaints ranged from the icons being unattractive to feeling inconsistent.
‍
These menu icons are used to represent features housed within a guide. They are viewed every time an end user accesses their guides navigation, They are highly visible and seen multiple times during a guides use. Depending on the size of the event, they're accessed hundreds of thousands if not millions of times.

Our CSAs were initially told to encourage event organizers to upload their own icons - promoting a feature offered on the premium plan. However our typical event customer didn't have access to their own event specific icons, nor should they. With all the responsibility and attendant anxiety associated with planning and executing an event, setting aside time to search for and purchase icons was not a top prority.

With all of this in mind, I decided to look into the problem. I followed up with our CSA's and audited the icons. From there I was able to understand the problem fairly quickly: design debt.

Aesthetically the icons ranged from the end of the skeuomorphic trend to the flat overcorrection brought upon by the introduction of iOS7. They were authored by various designers either from within Guidebook or from purchased sets. There wasn't a cohesive style, or any icons that related visually to our brand. The icons we gave our customers were inconsistent and messy. I decided to roll up my sleeves and starting working the problem.

Realizing the need for a new set, and mindful of the potential pitfalls, I laid out some guiding principals:

Once I put the color palette together, I built a template to help lay out the icons in a balanced and harmonious way. The template needed to be rigid enough to ensure consistency for things like ratios and spacing, while allowing for diverse shapes and silhouettes.

After getting the template and color palette locked in, I began iterating on several icons. Once these early icons started gelling in terms of consistency and style I took the early icons over to our head of design. I walked him through the aforementioned problems and showed him what I had put together. He bestowed his blessing to go ahead with the new icon set and we rolled it into a full time project.

A very useful piece of functionality within the Builder are schedule tracks, a selection of sessions with a shared theme. Another feature, custom lists, have similar functionality. With these features a guide's menu could contain multiple schedules, alongside multiple speakers, sponsors, etc. The icon set needed to accommodate for this scenario.

Fortunately there was a precedent to follow. Schedule tracks are assigned different colors to help users tell them apart. I decided to follow suit and create color variants for each icon. These color variants are a great way to add more versatility to the icon set, but more importantly when multiple color variants were used in a guide's menu, they provided better visual tracking for our users.

Multiple color variants were a good start, but I wanted to go further. What if an event organizer could chose an icon in whatever color they wanted? I consulted with one of our front end developers who proposed using svgs. And thus, the "monochromatic icon variant" was born.

Monochromatic icons are not only great for things like multiple tracks but they also gave event organizers an easy way to port some of their brand identity into their guides. Brands like Coca-Cola could use their trademarked red, universities could set the icons to their school colors, and so on.

Once I finished the set, I designed a revised icon picker. With the new icons and the revised picker in place we launched the set to all our customers.

With the introduction of the monochromatic variants, we offered something none of our competitors had. Icons had gone from a common complaint to a showcase feature demo'd in sales calls. The set also bolstered our marketing: icons as unique to Guidebook as custom typefaces are to companies like Google and Apple.
‍
Event organizers were happy with the new icons, so much so that we saw usage of the icon picker and custom icon uploads decrease, while use of our default icons increased. Our defaults were so good there was little need to change them out.

In 2019, Bolstered by the positive reception and customer requests for more icons, I wanted to apply lessons learned from the creation of the icon set and re-draw a new set. The color palette was improved, and with the template redrawn.
‍