GitHub on AWS

May 12, 2016

While it has been available for years, many people are not aware that GitHub has an on-premesis product called GitHub Enterprise. Typically, it’s installed on a company’s servers. However, in 2014, GitHub released an update that allowed people to install GitHub Enterprise on Amazon Web Service. Hosting it on these services means no server maintenance, quicker start up times, and in some cases, better performance.

My role in this launch was that of creative director. I wanted to avoid common cloud and tech tropes in the concept for this launch. GitHub’s brand is one of playfulness and humanity, driven by its character the Octocat. To make the cloud reference without being to on-the-nose, I suggested we put her into cloudy skies, aided by a jetpack that would hint at the speed the cloud hosted option provides.

Early concept sketches developing the jetpack version of the Octocat

Sketches by Tony Jaramillo

At the time GitHub’s animators, Tony and Joao, were trying to figure out how best to begin to publicly embrace animation. Up to that point they’d focused on illustration projects and internal animations, so I asked them to create the feature piece: an animated short.

I’ve come to appreciate what happens when creative people are given the freedom to self direct, so I gave Tony and Joao the direction but let them write the story. What they came up with was a story of the Octocat strapping on a jetpack, blasting out of her lair into the sky, and then rocketing off into the distance (and quite possibly the future). With their plans in order, I worked with them to adjust the story to fit the scope of the project and tune it for our audience.

Early concept sketches developing the Octocat’s jetpack

Sketches by Tony Jaramillo

Animation storyboard

Storyboard by Joao Ribeiro

As the animators began to produce finalized art, the designers went to work. We had a short deadline and multiple web pages to produce, so I worked with three designers to help them coordinate the production of each page and keep them visually aligned.

Full page screenshot of the GitHub on AWS landing page

Landing page design by Jason Costello

I also worked with our visual designer, James Kang, as he set to work adapting the animation art for our most audacious piece: three billboards in high-visibility locations around San Francisco, California.

One of GitHub’s principles is “always provide value.” My goal was to avoid creating just another advertisement on the busy highway. To ensure we lived up to this with the billboards, I challenged the team to do more than create an advertisement—to create art that told the story from the animation.

Image of the before view of the billboard, featuring the Octocat wearing a jetpack, preparing to blast out of a tunnel. There is no text, but the silhouette of the Octocat in the circle opening looks like the GitHub logo.

Billboard design by James Kang

Numerous people Tweeted with curiosity about what we were planning

We used the first two weeks of our ad time to tell the “before” story of the animation; the leadup to the Octocat’s launch. The billboard went up two weeks before our own launch, so we had to omit any sort of words or imagery that might hint at what was coming. James came up with a layout that positioned the Octocat facing away from the viewer, ready to blast out of a circular opening at the end of a tunnel. The silhouette of the image created a subtle GitHub logo, making it clear even to people driving by on the freeway that GitHub was about to do something interesting.

Image of the “after” view of the billboard, featuring the Octocat wearing a jetpack, blasting off the billboard. The text reads, “GitHub Enterprise: Available on AWS”

Billboard design by James Kang

On the day of our launch, the day of Amazon re:Invent, the billboard changed over to the “after” artwork, a 13’ Octocat blasting off the billboard, telling people that GitHub Enterprise was available on AWS.

To support the launch, I designed and built a kiosk to run on iPads in our booth at Amazon re:Invent. Conferences are notorious for unreliable WiFi, so I built the kiosk as a static site that is cached for offline use which runs on GitHub Pages. Any GitHub employee could visit the url on an iPad with a reliable internet connection to cache the kiosk. Then when they got to the conference they would visit the cached website, make it fullscreen, and turn on the limited control mode. Voilà: instant quick kiosk without requiring any apps or network connection.

Screenshot of the GitHub kiosk

I’m really happy with how this project turned out. I got to lead a bunch of talented people as they did excellent work and enjoyed designing and building a few unique components of the launch myself.

Image of the Octocat blasting out of her lair

Animation frame by Joao Ribeiro

Year: 2014 Role: concept, creative direction, development
Creative direction: Cameron McEfee Animation: Tony Jaramillo, Joao Ribeiro Visual design: James Kang Web design: Joel Glovier, Jason Costello, Jessica Lord Project management: Kelly Watkins