Stephen Andrew Murrill
stphn-listing-hs-icons.png

Scouticons

Scouticons

 

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.

 
 
 Full Scouticon Set

Full Scouticon Set

 

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.

 

Styleguide

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.

 Primary square grid

Primary square grid

 Primary rectangle grid

Primary rectangle grid

 Primary circle grid

Primary circle grid

 Stroke width

Stroke width

 Corner radius

Corner radius

 Spacing

Spacing

 
 Compose Message

Compose Message

 Mailbox Navigation

Mailbox Navigation