Help Scout is a product used by over 8,000 companies worldwide to communicate and deliver support to their customers. For excellent customer service teams, quality connection and quick response times are imperative, so the app interface needs to boost efficiency by displaying functions only when needed, and remaining invisible when not. One of the key elements of the minimal interface is a custom built icon set I created specifically for the app, called Scouticons. Icons are powerful visual communicators, and along with their ability to support international languages, a well crafted set can maintain a subtle, almost invisible presence while displaying a load of information to the user.
All in the details
Clarity is the key to an effective icon set. The goal of building Scouticons was to create a set that was cohesive, on brand, and most of all communicated informative in a crystal clear way. While a human element is allowed and encouraged in the product illustration, delight and form could never get in the way of functionality. Each icon in the set needed to exist as a family, as well. Creating cohesion in over 140 different shapes was a painstaking, but completely nessecary process. Each icon was itereated multiple times, and pixels were gently nudged countless until the whole set was a cohesive system.
All Scouticons are built on a 24px grid, and in order to maintain visual consistency, are positioned within the grid in a congruent way. I established keylines within the grid as a constraint to maintain visual consistency. Each icon, with the exception of a handful of anomalies, had to align with these core shapes. Guides for stroke width, corner radius and spacing were also created to avoid any standouts.