{"id":13926,"date":"2017-11-21T10:24:38","date_gmt":"2017-11-21T10:24:38","guid":{"rendered":"http:\/\/blog.intercom.com\/?p=13926"},"modified":"2020-07-30T12:57:07","modified_gmt":"2020-07-30T11:57:07","slug":"behind-design-work-building-intercom","status":"publish","type":"post","link":"https:\/\/www.intercom.com\/blog\/behind-design-work-building-intercom\/","title":{"rendered":"Behind the design work of Building Intercom"},"content":{"rendered":"

When designing for a specific audience, the challenge lies in not reducing that audience down to a trope.<\/p>\n

Next Wednesday, November 29, we\u2019re hosting \u2018Building Intercom<\/a>,\u2019 a unique engineering event that\u2019s all about building, scaling and taking risks with our product. We knew we needed an equally unique visual identity for the event page, including printed materials, ads and speaker slide templates. Being a designer often means knowing how to avoid aesthetic risks, but to keep with the spirit of “taking risks” for this project it meant embracing them. Here\u2019s how we did that.<\/p>\n

Designing for engineers<\/h2>\n

In early conversations about the event we decided it needed to be \u201cunapologetically nerdy.” I kept this in the back of my mind as a rubric throughout the process.<\/p>\n

However, finding a visual style that was \u201cunapologetically nerdy” was difficult.\u00a0The “nerdy engineer” is a tired clich\u00e9 at this point and it’s a challenge to convince a smart audience that your efforts to target them are backed with sincere intentions.<\/p>\n

<\/p>\n

Too often you see engineering branding that is inoffensive or bland, with styles or themes that over-rely on nostalgia. An early version of the page made this mistake:<\/p>\n

\"\"<\/p>\n

There’s a pretty large web of potential traps and pitfalls for making things obvious. Outside this territory of known nerdy aesthetics was the complete unknown \u2013 a risky space.<\/p>\n

The Hershey font: where our brand and event meet<\/h2>\n

I first heard about the Hershey fonts at TypeCon 2016 in Seattle in this talk<\/a> given by Frank Grie\u00dfhammer. A.V. Hershey was a theoretical physicist who programmed instructions that plotted zero width vectors into the shape of letters to use in his publication and computational work for the U.S. Navy in the late 1960s. In his 1967 paper ‘Calligraphy for Computers’<\/a> he outlines how he went about drawing the ridged alphabets in such a way as to \u201cproduce [a] pleasing effect\u201d. 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.<\/p>\n

A demonstration of how the characters were drawn, from Frank’s TypeCon talk.<\/small><\/p>\n

Among the many failed ideas there was potential in an iteration that used Hershey Serif for headlines. The text was set, incorrectly, within a nostalgic feeling Apple System 1 window. The draft was a garbage collage of incorrectly mixed eras of computing nostalgia. Hershey fonts were never available on Apple System 1 \u2013 technically they haven\u2019t been available at any stage of modern computing. So this version got trashed:<\/p>\n

\"\"<\/p>\n

There was one problem with using the Hershey fonts: they weren\u2019t yet functional font files. Frank Grie\u00dfhammer was in the process of completing a revival for Adobe but offered no timeline for their release. Generous efforts over the years to restore and revive Hershey\u2019s work had produced working .SVG files, but nothing close to the kind of functionality I needed for iterating on layouts, setting text for the site, and producing the dozens of needed printed materials.<\/p>\n

Initially I used FontSelf<\/a> to jump the gap between idea and proof-of-concept. It did all the heavy lifting for that much needed step between 0 and 1, but lacked the functionality I needed to turn those zero width paths into the variety of weights.<\/p>\n

Early font proofs using FontSelf, who (conveniently) is an Intercom customer.<\/small><\/p>\n

Then I made the switch to Glyphs. I wrote a small python script which placed the outlines into a .glyphs file. Glyphs has the ability to take one master set of font outlines and add a custom offset path value to each instance during the export process. This function saved hours in the process of creating and testing a variety of weights in layouts.<\/p>\n

Proud owner of a set of incomplete Hershey revivals.<\/small><\/p>\n

I spent only a few days bringing the spacing and kerning to a passable level. Knowing the scope of the project helped me make changes only on the portions of the alphabets that would be used most, allowing me to leave most of the time consuming problems unfixed. This isn\u2019t a luxury most type designers have when working on a project.<\/p>\n

Building ‘Building Intercom’<\/h2>\n

Usually the Brand Studio<\/a> passes mockups to our team of front end developers to build out a page, but I didn\u2019t want to pass on the opportunity to code something this fun. ‘Building Intercom’ was going to be payback for the thousands of template html e-commerce sites I built in the mid-2000s to get through college.<\/p>\n

Many of the common visual programming frameworks either couldn\u2019t be easily served in a browser or lacked the interactive vector experience I wanted. I eventually settled on Paper.js.<\/a><\/p>\n

Lots of time was spent determining the difference between taking a risk and creating meaningless clutter.<\/small><\/p>\n

The interactions and animations on the page proved to require a lot more testing than I was used to and revealing some pretty serious flaws, like:<\/p>\n