Designing a people friendly hackathon
I have attended a lot of hackathons since I started at UCLA (about 25) and I have organized a few including LA Hacks and HackingEDU. As one of the Creative Directors of LA Hacks in 2016, I had the goal to make it more friendly and attract people like designers who are traditionally afraid of the concept of hacking.
Research
What guiding principles led our design process?
What is people’s opinion of these hackathons?
I have always loved talking to people about my passion for hackathons. A lot of people think it has something to do with actual “hacking” and I explain that it’s more like a design+code marathon. And more often than not, people are scared of the idea of programming for 3 days straight with little sleep and coming up with a product at the end of it. Both people who love to code and those who’ve never coded before.
So there were two problems that we could see.
- People who don’t know how to code are afraid of the concept of hacking and hackathons are something they don’t understand or think about trying.
- People who have coded a little are also afraid of the idea of hackathons since they think that everyone at these events is a super elite hacker and its really competitive to get in.
These were problems because they were assumptions that people were making about hackathons that are not necessarily true. A lot of hackathons are in fact fun and laid back and the goal is collaboration to come up with a cool product by the end of it. As a result, a lot of teams that are comprised of coders are usually looking for creative people or designers to complement their abilities at coding.
What do current hackathons do right and wrong?
I had developed the website for LA Hacks in 2015 as well along with the website for another hackathon called HackingEDU. They both looked pretty. cool and were interactive but there was a big problem.
As you can see in the screenshot here, they seemed to be aimed towards professional programmers. The 2015 website with its black and white colors made us look elitist and had little approachability for someone who’s new to the idea of hacking.
Then there was the hack@brown branding and website which did a great job at being inviting to everyone and it ended up being hugely popular among design circles and attracted lot of talented creative people there who didn’t necessarily know how to code but were willing to learn.
This gave us a good idea of how to obtain our goal with some do’s and don’ts to begin with.
Branding/Visual Design
We started brainstorming a design direction to take to make our brand be super friendly and fun while representing LA and hacking as well. We decided on a bright yellow and blue for the color palette to make it easier to make things pop. We also chose Lato as the font since it was well kerned and had rounded edges which made it cleaner and seem more friendly than a sharper sans-serif font.
We then began thinking of a mascot to make it even more approachable so we can actually have conversations with people. An incredible illustrator Dora on our team drew these cute little bears which represent the UCLA bruin but are also gender neutral and diverse and we decided to use them to connect with the hackers.
Experience/UX Design
Having decided on some brand values, we started thinking about the user experience for the attendees before, during and after the event.
The first thing we had to think about for this was the website since that’s the first thing that people see and that’s what we would be sending out to people to apply for the hackathon.
We went all out on the website and we came up with this idea of talking to the users as if they are already a part of the hackathon. The splash screen itself was literally bubbly with a fun wave bouncing around. There were cool clouds floating above with the CSS of those clouds floating as text too. This was an interesting way to capture the attention of most people who might not have coded but would probably recognize the CSS syntax as well as to make the more avid hackers feel happy. The rest of the website built a conversation reiterating that you are already a part of it, it’s warm and welcoming for you regardless of who you are or what skill sets you have and that it will be an amazing time for you. The application, instead of it being a huge plethora of questions was just focused on one question — “what makes you want to learn, build and play and what would you want to learn this weekend”.
We continued this trend in our marketing material and email blasts for people who had applied making them feeling accepted and welcome at each stage of the process.
Then it was time for the event and we wanted to make sure that people have an amazing start. We gave everyone blue T-shirts with the now familiar bear mascots and gave different colored ones to mentors and organizers which was also represented by what the bear on the front of the T-Shirt was doing so people could go to the correct people for help.
We had workshops specifically organized for beginners on Hackathon101, Ideation and Prototyping which went on after midnight on the first day and helped people new to hackathons learn more about what they can do on the weekend. We also had fun activities and breakout sessions to keep everyone engaged and fun so they can make new friends and learn from one another. We made bear signage to tell people where different places within the venue were and always encouraged people to ask for help if they got stuck at anything. We had delicious meals provided throughout the weekend for fun breaks. At the end of the hackathon, we gave everyone bear stickers to remind them of the fun time they had at the hackathon and so they can put them on their laptops and talk to their friends about it in the future.
Did we succeed?
We had different metrics to measure success. The first was the number of applications which went up from 1800 the previous year to 2500. The second was the distribution within these applications. For the first time, we saw an almost equal number of male and female applicants, about half the applicants from design and other non technical majors and a lot of good stories in the application about what made people passionate about learning new stuff.
The first night, I went to every single table and talked to almost all of the 1000 hackers present in the stadium asking them who they were and what they liked/disliked about the hackathon. About half of them were first time hackers and felt that they were learning a lot and really excited to build something for the first time. A Poli Sci major, Shayne, had never thought about going to a hackathon before but she found a team, attended the ideation workshop, worked on her idea to help donate to non profits through a fitness goals app and with help from the mentors was not only able to finish her app but also win a prize in a category.
So we were successful in accomplishing our goal of making the hackathon more approachable and friendly and helping people come and build something for the first time in such an environment. However, there were certain problems too. Judges and sponsors complained that the quality of hacks had gone down from the last year and we found out that a lot of people didn’t hack since we didn’t receive submissions from everyone. So while we had succeeded in attracting a lot of first time hackers, we had fallen a little short on providing them enough resources or getting them excited enough about hacking and actually building something which became an additional goal for next years hackathon.
