WildHacks 2016: Branding and front-end work for WildHacks 2016.

It’s a bit of an open secret among hackathon attendees that these events are a “sometimes” thing, in the same way that half a sleeves of Oreos is a “sometimes” food. Hackathons, while fun, do require you to essentially give up an entire weekend to work on a project of questionable permanence under borderline inhumane working conditions.

So what can we do, as organizers, to convince hackers to come to our hackathon, that their sleepless, showerless weekend should be spent at our university in our student center? This was the question we tried to answer as we developed our branding for the event.

There were two things we knew we wanted our attendees to feel. First, we wanted them to be invested in the hackathon, both in the event itself and in what they were building. We were also aware of another common issue among hackathons, which was that beginners often felt intimidated, and as a result either wouldn’t register for the event or would attend but leave halfway through because they didn’t feel like they could compete. This was something that even a lot of us on the organizing team had experienced, and we knew that inclusion was a large part of cultivating a healthy hacker culture.

How do you get hackers invested in something? To answer that we looked at what hackers were already themselves invested in. This turned out to be pretty obvious: hackers, as the name implies, love to hack. They love to create and to watch things come to life. They are makers for their own sake.

We wanted to build that sense of investment by providing these hackers with a stake in the event themselves. Our theme, “Build-Your-Own-Hackathon,” was the result. A hackathon put on for hackers, with the hackers.

To this end, we put out polls on Facebook asking attendees what they wanted from us for certain parts of the event, letting them decide everything from the kinds of programming we put on to the snacks they ate. We also allowed attendees to submit lightning talks they wanted to give at the event, which hackers then voted on.

Now what about inclusivity? “Hacking” as a term is often associated with sinister images of men wearing hoodies in dark rooms crouched over a laptop screen, glowing green text scrolling across a terminal screen at a mile a minute. This obviously isn’t an accurate depiction of what goes on at a hackathon, but the fact that it exists means we had our work cut out for us.

We wanted to subvert this image and create an atmosphere where people of all skill levels could feel like they could come and learn something, if not build a project in 36 hours (aside: this is a topic covered very well and in greater depth by game designer Jenny Hsia in her GDC talk, Put a Face On It: The Aesthetics of Cute.

One idea we came upon was to make characters out of common computer science concepts/various tech-related objects.

We also started working toward a unifying theme, which we stumbled upon during a brainstorming session while we were working on our sponsor packet.

It’s confetti! It was a natural fit, after we thought about it. The confetti made the event seem like a party, a party everyone was invited to. Confetti gave us brevity, excitement, and a versatile visual motif all at the same time.

For our type treatment, we chose Avenir Next and Space Mono (we originally went with Fira Code as our monospace, the remnants of which you can see in the sponsor packet). We chose Avenir for its simple, friendly forms and Space Mono as its quirky sidekick, an homage to code, but every bit as fun, if not more, as Avenir.

We got to have some fun with the website too. If you visit wildhacks.org, you’ll be greeted with a splash page with a nice little animation.

We also got to make some cool pins starring a few of our computer science characters (an LED and an old-school computer).

As well as some sick shirts.

Overall, I had a blast working with the team to put on WildHacks. Juggling tech, design and directing was a bit hectic at times, but it was definitely all worth it. Beyond here are just a few more pieces of branding ephemera from the event.

A gif we used to tease the launch of the website to build hype. This was released on social media three days before the launch. We had similar gifs for the next two days as well.

Flyer for an event we held on campus to promote the event.

It’s compy! A winking computer.

It’s an LED (this one doesn’t have a fun name, sorry).