Role: Primary Designer

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bbe4b9ab-d67d-4dd9-b5b9-f73fc1a62a69/icon_hero.png

Introduction

In 2015, after the launch of Guidebook's third CMS iteration, our customer service associates (CSAs) began sharing instances of event organizers (paid users) complaining about the menu icons on our platform being unattractive and inconsistent.

These icons are placed alongside each feature contained in a guide and are viewed every time an end user navigates the guidebook app. They are highly visible and seen multiple times during typical use. Over the course of an event, these icons are seen hundreds of thousands to millions of times depending on the size of the event.

Our CSAs were told to encourage event organizers to upload their own icons - promoting a feature offered on the premium priced plan. But that was an unsatisfying solution given that a typical event organizer doesn'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 is likely not at the top of the priority list.

With all of this in mind, I started researching the problem. After following up with our CSA's, digging in to the feedback, and doing my own audit of the icons, I was able to grasp the problems fairly quickly. The data all pointed to the same underlying cause: design debt.

Design debt, or when you excavate a ruin only to find that it was built upon an even older ruin.

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 in an effort to save time. There wasn't a cohesive style, let alone anything that related visually to our brand.

Drafting the plans

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

Breaking ground

Once I put the color palette together, I built a template to help lay out the icons with balance and harmony. The template needed to be rigid enough to ensure consistency for ratios and spacing, while allowing for diverse shapes and silhouettes.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fea7ee70-8cd6-41b5-b69c-f14195a519d6/icons.gif