Building Intercom

Intercom 2017

Every fall Intercom hosts an event all about how Intercom is made. With their engineering and product teams being entirely based out of Dublin, this event has become a great recruiting opportunity. The theme was taking risks, so the event landing page, printed materials, ads and speaker slide templates needed to keep with the spirit of risk taking.

My contributions: illustration, brand, type, web development

Designing for Engineers

A lot of my early explorations of the event branding were directly tied to programming or overly-reliant on geek nostalgia. The nerdy engineer is a tired cliché at this point and it’s a challenge to convince a smart audience that your efforts to target them are backed with sincere intentions.

Some of the concepts I wrestled with in the brief, which asked that the event feel "unappoligetically nerdy", as written about on the Intercom Blog.

Through a stroke of remembering someone else's genius, I remembered the Hershey Fonts.

I first heard about the Hershey fonts at TypeCon 2016 in Seattle in this talk given by Frank Grießhammer. A.V. Hershey was a theoretical physicist who programmed instructions that plotted vectors into the shape of letters to use in his publication and computational work in the late 1960s. Hershey was a rare, prolific pioneer. His inspiring work as a creative coder and early digital type designer is a sure example of taking meaningful risks.

There was one problem with using the Hershey fonts: they didn't exist. There were a few working .SVG files lying around the internet, but nothing close to what I needed for iterating on layouts, serving dynamic text on the landing page, and producing the printed and digital assets.

With the help of Glyphs, I was able to convert those junky svgs into modern OTFs. Glyphs can take one master set of font outlines and offset the path on export to produce several different "weights" to easily get the style dialed in.

The rest of the stuff

With the type styles locked, it became easier to iterate and flow some of those 1960s computer vector ideas into colors, patterns, icons, and animations.

Hershey's family of fonts did the heavy lifting and felt cohesive right out of the box.

Still, striking the right tone took some time. "It's a balance", moans every creative director.

The vector style lent itself very kindly to vector minded paper.js—which powered the experience and animations on the interaction heavy landing page.

The site was filled with easter eggs, and used custom cursors and interactions to encourage the user to view the source, delete elements, click and drag to customize. With each passing second the site's CTA target would duplicate and ramdomly position the clone over the content, eventually overwhelming the entire site until you signed up.

The technical feel came together with a set of icons built based on the curves and shapes within the Hershey fonts.

https://buildingintercom.com/

The event

All the work creating an event brand paid off as I watched the speakers and vendors who created the decks and on stage animations bring the event to life.

Kyle is an art director, letterer and illustrator in Sunny Oakland California. He runs Very Cool for a love of the game, is a brand lead at Intercom for love of the wage, and stumbles at Song Club Records for love of the fame.