In 2015, after the launch of Guidebook's third CMS iteration, our customer service associates (CSAs) began sharing complaints from event organizers (paid users) about the menu icons on our platform being unattractive and inconsistent.
These menu icons are used to represent the features contained within a guide and are viewed every time an end user accesses their guides navigation. Because of this the icons are highly visible and seen multiple times during a guides use. Depending on the size of the event, they can be seen and interacted 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 priced plan. But that was a flawed 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 looked into 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 problem fairly quickly. The data all pointed to the same underlying cause: 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 in an effort to save time. There wasn't a cohesive style, let alone anything that related visually to our brand. They were inconsistent and rushed.
Realizing the need for a new set, and mindful of the potential pitfalls, I laid out some guiding principals:
- These icons will improve the event organizer experience by creating a seamless visual flow with consistent aesthetics and remove a distracting obstacle from building a guide.
- These will be Guidebook icons; to be used not just in our customer facing products, but also in our marketing collateral and web presence.
- The icons will use a color palette sourced from the Guidebook brand and its products.
- The icons will be consistent and diverse.
- The icons will be versatile, applicable for multiple screen resolutions and diverse print needs.
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.
Quick gif showing the template in action.
Once I was comfortable with this scheme and how a few of the icons turned out, I took the problem and my proposed solution to our art director. I showed him what I had put together, explaining my initiative to improve the user experience based off feedback we had received. 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 (Guidebooks CMS) is the ability to create schedule tracks, a selection of sessions with a shared theme, as menu items. Custom list items have similar functionality. Functionally this meant a guide's menu could contain multiple schedules, alongside multiple speakers, sponsors, etc. The icon set needed to accommodate for these scenarios.
Within a schedule, tracks are assigned different colors to help users tell them apart. I decided to follow suit and create color variants for each icon. Creating color variants was a great way to add more versatility to an icon, but more importantly to provide better visual tracking for our users.
A base icon alongside its color variants. Each base icon got blue, red, and green variants.
Multiple color variants were a good start, but I wanted to go further. I asked myself: what if an event organizer could chose an icon set it in whatever color they wanted? I consulted with one of our front end developers who proposed using svgs to do this very thing. 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 carry their brand into their guides. Brands like Coca-Cola could use their trademarked red, universities could set the icons to their school colors, and so on.
Each base icon also got a monochromic variant. With this variant users can choose any color.
Showing the icon picker in action. Users can select a base icon, or one of it's color variants, or style it in whatever color they want.
Once I finished the set, I designed a revised icon picker, and we were off to the races. 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 on a sales demo. The set also bolstered our marketing: icons as unique to us as custom typefaces are to companies like Google.
Event organizers were happy with the new icons, so much so that we saw usage of icon picker and custom icon uploads decrease, while use of our default icons increased. Our defaults became 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.
