I was asked to write a little something about design and HackRU. So I decided to document the process of all the work I did for HackRU. Hopefully it can help anyone who’s designing or re-designing their hackathon, working on some visual identity for a project or just curious about what goes into something like it.
Hackathons are pretty cool events that us krazy and kooky millennials are doing now-a-days that gather a variable amount of people to congregate in a college student center or even a sports stadium to build some amazing things for the technologies we use everyday. Think of it as a sleepover science fair to the extreme.
Collegiate hackathons have grown huge, they’ve evolved from being just an event to a full-fledged experience for the hacker. With so many universities hosting hackathons, organizers want to separate their experience from the others out there. Since first impressions are everything, the most effective way to do this is to establish essentially a brand to represent the hackathon and what it embodies.
Brands utilize visual identities to unify all content produced and associated with the brand itself. However, a visual identity extends far past just a pretty logo.
In past semesters, I had the privilege of designing the t-shirts given away at my university’s hackathon, but it stopped there. This year, the e-board allowed me to take a bit more creative control and by that I mean a complete re-brand of our hackathon, HackRU.
What that entails is a revamp of everything the hacker interacts with before, during and after the event relating to HackRU.
The process I followed was a huge funnel. Here’s a super scientific and complex pictorial depiction of the process dubbed PJ’s 4 E’s to a Sweet Brand Experience.
Logo and Color Scheme
The first step of the entire process was to establish a color scheme that represents both Rutgers University and the hackathon itself.
I work part-time at the University’s Marketing and Communications Office for Student Affairs as a designer where, me and an awesome team of people, produce print and web media the University. If I've learned anything from there, it’s that you don’t have to purely use the school’s color scheme in order represent a school sanctioned event.
It’s really easy to just adopt the schools colors as your color scheme. Which really isn’t a bad thing of course, we used it for a while. But we were looking for something different than what we previously had. However, I didn’t want to completely ditch the old color scheme because I was looking to hold some connection to Rutgers along with creating a color combination that people could easily adjust to.
So to still stay true to the roots while also introducing a naturally energetic color not too far from away from home in the color spectrum, I chose yellow to accompany a darker shade of the red.
On to the next step, which was the logo. Our previous logo was made a few years ago by the awesome and talented Aziz Ramos who’s currently the Creative Director at Major League Hacking. So the bar was set high on entry.
After a few iterations later, while scrunched up on my best-friend’s bed with my tablet in hand, I came up with this.
You got representative visual elements for software, hardware and the school. super simple and obvious, right? Well… it’s never that simple when you’re starting out the process of designing a logo. Logo design typically requires a lot of iteration.
What really sucked about designing the logo(and really making anything engineering related) was working under the constraint that there’s a real scarcity in the amount of imagery related to engineering that’s both accessible and not cheesy looking to the typical layperson. The last thing I wanted to do was to have a bunch of Matrix-y looking raining binary that news reports love using for news relating to internet incidents. OooOoOoo, spooky scary hackers making cool web apps and hardware things.
I would get into the nitty gritty of the process, but it would be boring and too specific to our hackathon to really help anyone. The point I’m trying to make is that design by iteration through a consistent delivery and feedback loop is important for any creative process. Luckily, I worked with the trillest(as the kids say) bunch of folks who provided a pretty fast and constructive feedback stream that made this process much easier.
Website
In an effort to keep the website’s aesthetic on agreeable terms with the new logo and color scheme, I wanted the site hyping up the hackathon to also share the look and feel of the other HackRU identity components now flowing in the stream of content fed to the hacker as they live out the HackRU experience. Which you can see the site live here.
Imagery being an important part of a site’s content, I wanted to make the icons and images inviting, fun and friendly. After all it is a hackathon, these three things are always necessary.
But really, the website part is full of potential opportunity to do so much for your brand. You could keep it consistent and in-line with what your vision of the brand is, or expand on it further. Utilizing it as a springboard into a pretty cool visual experience for the site. I chose the former because I love a good balance between continuity and creativity with a given visual identity.
Social Media and Merchandise
Our social media outlets are also another extension of the event that also must be in-line with the identity. So with a few reused assets, the logo and the small amount of time a fleeting schedule of a college career offers, VOILÀ. We have consistent branding across social media outlets.
If you wanna be a super cool person and follow us on all our social media outlets! We’re on: Facebook, Twitter, Instagram and Snapchat (theHackRU).
The merchandise however, is still a secret. I don’t wanna spoil the surprise for those attending the event. So, I’ll be updating this article with that content when it’s all released. ;)
So I hope this made some sense and was a somewhat insightful look into the process of the still evolving visual identity of HackRU. Thanks for reading!
