Using UX Methodology to Make Hackathons More Human

Hackathons bring together developers, designers, and entrepreneurs to create fully functional software projects in just a day. While there’s a lot of UX going on at these events from the hackers themselves, the UX of hackathons as a production of their own is often overlooked. We’re a group of design students at California Polytechnic State University, San Luis Obispo (Cal Poly) who were tasked with taking our school’s hackathon, PolyHacks, to the next level using UX methodology. Here’s what happened:

Video by Taya Arnone

We Started With Purpose.

When our team of UX designers got together to rethink Cal Poly’s hackathon, we knew that we wanted to move the needle on what an event like this could be. Our professor and mentor, Charmaine Farber, made sure that we started with getting out of the building and talking with our “customers”. We talked to dozens of students, sponsors, community leaders, and educators to get a better grasp of current perceptions toward hacking itself. What we uncovered were two very different tales. On one hand, people spoke of the incredible, creative energy that went into forming a team and building an app in just a day. At the other end of the spectrum, however, some felt that hackathons were shrouded in overly technical language that conjured up imagery of a dimly lit room and hoodie-clad hackers vigorously typing out lines of code on mechanical keyboards. While we knew that hackathons, at their best, were incredibly creative events that brought people from design, business, and engineering together, we also took the other less ideal view on these events seriously. At the start of our redesign, we focused in on sending a message that a new kind of hackathon was coming to Cal Poly. PolyHacks would focus in on making hacking human.

We Built a Mission and Brand.

It’s no wonder that most people who haven’t been to hackathon view them with a degree of hesitance. Just take a look at some of the top hackathon’s branding and messaging. In general, they focus in on the clichés by using circuits, VR headsets, sensors and other overly technical imagery to promote themselves. At the same time, however, anyone who has actually participated in a hackathon knows that such messaging doesn’t really capture what they’re really about. The best software is built by teams of designers, business people, and engineers coming together to build software for people. Although circuits, VR headsets, and sensors are cool, they aren’t what makes hackathons an awesome experience. But what does make a hackathon then? And more so, what makes building software so fun, challenging, and rewarding? We didn’t have the perfect answer at first, but our team took a few weeks to brainstorm and sit on ideas as to how we could refocus our messaging for PolyHacks.

Eventually we started talking about other events that college students frequented, and the idea of having it “feel like a music festival” came up. It was a weird idea, but had a lot of things going for it. Music is something that is universal, and even though every single person might not be a musician, everyone has an innate sense for rhythm and melody. Similarly, everyone has an innate sense for software. Most people have a supercomputer in their pocket, and everyone has an app or website that they love. Bands form in garages. And so do many tech startups. Guitars and pianos are awesome. So are mobile devices and VR headsets. Music festivals bring people together. hackathons do the same. Music itself is even a kind of code, with notes on a staff requiring knowledge to be turned into something that everyone can enjoy. We weren’t trying to have bands perform at PolyHacks by any means. That’s not what we meant at all when we said we wanted our hackathon to feel like a music festival. At the end of the day, this was still going to be a hackathon and tech event first. What we were interested in, however, were the parallels between music and technology. Specifically, we were interested in the idea of tech having a significant PR-problem where music does not.

The idea of borrowing some branding pointers from music festivals was also just fun, and we settled on “Camp PolyHacks” for this years theme. We set up an actual campsite (complete with a tent, camping chairs, and lanterns) in the middle of the working space, and even provided a festival style map that we handed out to hackers/campers. This added an excitement and energy to the event, and made it more approachable to people who were interested in building software, but not necessarily the idea of stigmas sometimes associated with a hackathon.

Some campers strike a pose in front of the PolyHacks tent.

We Focused on Design Systems.

Once we started solidifying our ideas as to how we were going to rebrand Cal Poly’s hackathon, our team started to gather our thoughts into a Brand Book. Eventually, we got to a point where we were all on the same page with the overall mission and vision of the event. Now, however, we had a lot of work to do — from the UX of a hacker’s experience at PolyHacks, to printed material, to websites and digital applications of the new brand we were building. With so many things to design, it’s easy to get off track. That’s why we made a point of building an architecture that anyone on the team could refer to and use as a kind of starting point. We set the fonts, colors, logos, and icon styles through iterative and collaborative design. For example, the logo for the event started off as text on a badge. This visual proved confusing however, as it looked almost like a button. We eventually pivoted to a hand lettered logo with music festival vibes. Created by Alyssa Wigant, a seriously talented designer with creative ideas, this logo did not only work better visually, but it also better served our mission and brand. Everyone on the team helped contribute to the evolution of the Brand Book, and we critiqued and evolved this architecture even after the event took place. Ultimately, having a Brand Book that everyone helped to shape got our team on the same wavelength, and ready to tackle the mountain of work that came with designing each and every facet of a 24-hour hacking event.

Our logo evolved from a badge to something that fit our brand more.

We Rethought Networking.

Sponsors are the people who make our hackathon happen, and we wanted to make sure that we were connecting them to students in a real way. Through discussions with companies who had participated in past hackathons at Cal Poly, we discovered that many were disappointed by the low percentages of students that had actually come to talk with them and network during the hackathon. From the beginning, the PolyHacks team put a lot of energy into creating a way to get companies and students talking, but not in a forced way. Jacqui Lu, an incredible designer and leader who is currently wrapping up her senior year at Poly, suggested a kind of “passport book” where hackers would earn “merit badges” for talking to companies. It was an amazing idea, but had a few flaws. Printing out thousands of stickers would be expensive and require us to have the designs ready weeks in advance. Overall though, the idea was too good to pass up. That’s why we let it sit while we worked out the problems. A few weeks later Alyssa had the idea of creating a music festival style map for the event. We ended up incorporating Jacqui’s badges idea into this map, but in the form of spots for stamps. This was a much more cost effective approach. If students talked to every company, and had the stamps to prove it, they could turn in their map at the end of the hackathon to be entered into a raffle. We also deliberately limited the networking time for students and companies to a four hour window in order to decrease the possibility of students putting networking off for a later time. It’s easy to put networking off to finish one more graphic or line of code. In the end, our UX with regard to student/business interaction worked like clockwork, and almost every single hacker ended up talking to every single company at the event.

The PolyHacks map had all the info hackers needed, and folded to fit in a pocket. Final design by Alyssa Wigant.

We Bridged Tech and Community.

In the early planning stages of the hackathon, our faculty advisor Charmaine Faber had been meeting with San Luis Obispo leaders to get their thoughts and ideas for the event. From these customer development sessions, we learned that the community had concrete problems that they thought technology could solve. More so, these community leaders wanted to be a part of PolyHacks! We ended up forming a partnership with the city itself to see if hackers could dream up a solution to the problems that faced San Luis Obispo’s vast trails system. In our city, trails including the famous Bishop’s Peak hike are being trampled and overused while others have almost no visitors. The city felt that technology could provide a fix for this, and we agreed! In the end, hackers came up with some incredible solutions. One of my favorites was a beautiful, responsive website that showcased some of our city’s lesser known trails. Another community leader that surfaced was SLO Safe Rides, a Cal Poly born business that offers insanely cheap rides to get students home safe from any event where alcohol flows. Recently, however, SLO Safe Rides has had some difficulty in competing with ride sharing apps despite their lower fares and local flare. At the hackathon, we saw students develop an app to help SLO Safe Rides to compete in the mobile age over the course of just one day. The City of San Luis Obispo and SLO Safe Rides are excited to continue work with such teams. Ultimately, PolyHacks was able to start connecting community with our university’s students in a way that built real solutions for our town.

Hackers got to talk to community leaders one-on-one, and built solutions for local problems in just 24 hours.

We Focused on Details, not Buzzwords.

Simply saying that we’re building a hackathon around community and “solving local problems” doesn’t mean that we’re actually going to do it. In the popular HBO show, Silicon Valley, some fun is poked at this idea with every techie portrayed saying that they’re out to “make the world a better place”, almost tacking the phrase onto the end of every sentence. We knew that we didn’t want PolyHacks to be a buzzword event. In order to build something real, we engaged with community leaders, and built the event around their goals. Beyond this, we took real inspiration from San Luis Obispo itself. If you’ve never been, our college town isn’t just naturally beautiful with its rolling hills and temperatures seemingly always in the sixties, it also has incredible vibrancy from it’s local businesses. Madonna Inn, the iconic hotel with a dining room that is completely pink, from the floors to the walls to the the chairs, really typifies our town’s spirit. When we reached out to them (and by the way, we walked in with some fliers, and didn’t just send an email) to explain what we were trying to do, they were quick to support PolyHacks. Several of their famous champagne cakes even made an appearance at our event. More than delicious cake, we got to talk to local businesses about PolyHacks, and ended up with a “local sponsors” list that was just as big as our “corporate sponsors” list.

Madonna Inn’s Champagne Cake: Before and After

We Didn’t Treat Social Media as a Checkbox.

With social media, it’s easy to get away from purpose and instead chase “likes” and “followers”. Jamie Chin, a visual and user interface designer on the team, instead focused on creating social media for PolyHacks that actually engaged with hackers. Our Snapchat account was always up to date with hackathon announcements. This was a necessity since hackers were spread throughout multiple rooms. Alyssa helped Jamie to create an Instagram challenge for our event as well. We challenged hackers to come up with the most creative Instagram post, and ended up getting some incredible entries. One that quickly rose to the top featured our Camp PolyHacks tent photoshopped into an actual forest. At the end of the day, however, the hacker that took the grand prize had a photo of that same tent in front of the iconic Mission San Luis Obispo. He had actually not even opened Photoshop to accomplish this, but instead snuck the tent out of the hacking space and across the street to the mission with nobody noticing! Overall, our social strategy was able to energize hackers, and generate some great stories along the way.

Hackers photoshopped the PolyHacks tent into a forest, and even snuck it across the street to San Luis Obispo’s Mission without anybody noticing.

We Tested Our Ideas, and Iterated.

While we were building out PolyHacks, we constantly asked ourselves if we were sure that our solutions would work. We did this by using extensive customer interviews and research to back up our hunches. Still, there are a few things that we are improving for next year. In our surveys sent out shortly after the event, hackers pointed out a lack of technical mentorship. It’s something that we didn’t put much thought into, and part of the reason why we are looking to not only address this issue head on, but also make sure to add technical representation to the PolyHacks organizing committee itself. At the same time, it’s important to keep a level head while sifting through feedback. One survey lamented that while our community focus was good in theory, in just didn’t make sense in the context of apps and websites. Ultimately, we knew that this simply wasn’t true. Already, our community partners are interested in supporting PolyHacks teams even after the event. While we knew that this particular feedback wasn’t completely accurate, we still took it seriously. Now we are asking ourselves how we can make sure that more people leave the event seeing the links between tech and community. Ultimately, tech is best when it puts people first. That’s why we decided to rethink our university’s hackathon using UX methodology in the first place! We’re excited to begin a new chapter for tech at Cal Poly, and can’t wait to continue our redefinition of what a hackathon can be with PolyHacks 2018.

Interested in sponsoring next year’s event or even just chatting about UX and hackathons? Let’s chat!

Our Team

Charmaine Farber — Faculty Advisor and “Scaffolding”

Jacob Johannesen — Director

Alyssa Wigant — Creative Director

Jacqui Luis — Event Director

Jamie Chin — Social Media Director

Tavin Boynton — Mentorship and Volunteer Director

Taya Arnone — Photography and Videography Director

Perry Ting — Event Experience Director