Illustration and Icon System

In 2019 as Beam expanded its business into new lines of ancillary benefits, the Brand Design Team began a rebrand to align with new company values. I redefined the Beam Illustration and icon system as part of the rebranding.

Without a consistent illustration and icon system, the Beam brand was in danger of misalignment and inconsistency.  During the rebrand, it was imperative to develop a system for illustration and icons that would embody the Beam brand values.

The main goal of this initiative was to align the Beam brand illustrations and iconography with the brand values modern, inviting, authentic, and upbeat. Considerations for flexibility and adaptability were important as designers on different teams would need to be able to implement consistent imagery in their custom illustrations and icons when the need would arise. 

Aligning with the new Beam brand values, the process for defining the illustration and icon style began with developing mood boards. Mood boards create a benchmark and visual language that aligns with the brand values.

Following the guide of the mood boards, I iterated through different style explorations, checking in regularly with the larger Brand Team, UX Team, and Product Team to guide development. Taking feedback from the teams, I pushed the visual direction towards the thick “vanishing line” style that we use today.

Early exploration

Solution

The resulting illustration and icon systems are embodiments of Beam’s brand pillars. The Brand icon system uses a 16 unit grid to layout new icons and a 1 unit stoke weight to form icons. The icons can be used in the duotone of the brand colors, royal and navy blue, or can be used in a single color. This flexibility lets us apply brand icons in circular containers or on colored backgrounds besides white.

Beam’s illustration style utilizes specific features to help add clarity and provide flexibility when creating new content. Shapes should be based on solid fills and outlines. The outline should only use one line weight per object to clearly define a shape without becoming too complicated. Line breaks are used to define areas where shapes may be less defined such as interior lines and vanishing edges. 

Results

The resulting illustration and icon systems have been adopted and implemented across Beam’s Brand, Marketing, and Product organizations. This style is particularly ownable by the Beam brand and aids in brand recognition. Designers across the company have been able to take ownership of the system and implement illustrations consistent with the system.