A Guide to Joining Hackathons as a Designer

nancy zuo
Design Buddies Community
8 min readApr 20, 2021

--

graphic of apple and oranges tug of war

In my experience speaking with hackathon veterans, I’ve heard the phrase “Good UI/UX wins hackathons” very often. However, a quick look around most hackathons, and you’ll find there are disproportionately fewer designers than developers.

Why is that? 🤷‍♀️

Joining hackathons as a designer is intimidating. When I first started attending hackathons last fall, it felt like a series of buzzwords constantly being thrown around. Complicated maps of these buzzwords connected together didn’t make it any less confusing (and in fact, they are still confusing to me). My first hackathon was a mess — I struggled figuring out Github for the first time while my team was debugging code.

After attending and winning a couple of hackathons, however; I can confidently say I’ve found my place as a designer on the teams. I constantly see a trend of successful projects being a combination of design and development. I’m a strong believer that the biggest key to winning a hackathon is having a diverse team that works well together. If you are a designer, I can guarantee there is a place for you at hackathons.

Note: Throughout this article, I will be representing designers as apples and developers as oranges in my illustrations. Apple represents the “Steve Jobs” design eye and orange represents a thicker-skinned practical developer perspective. These are not definitive and are loose definitions to help depict ideas. There are definitely many apple-oranges and orange-apples out there!

graphic of apple and orange — apple represents a designer (like Steve Jobs’ Apple) and orange represents a tough skinned developer

If you are still intimidated to attend hackathons, remember:

  1. We wouldn’t have our modern-day interface if it wasn’t for designers and developers working together. If design contribution didn’t matter in development, then we would still be doing everything on the command line interface instead of graphical user interface. Imagine having to cd Desktop each time instead of clicking on icons on your desktop — yikes.
graphical user interface to click on desktop vs a command line interface to type in cd desktop

2. Don’t compare apples to oranges. Being able to code well should not be compared with being able to design well — both are valuable and one is not better than the other.

graphic of apple and orange on see-saw

With these in mind, let’s hop 🐰 into the tips! These are 5 helpful tips that will help reduce your fears so you can confidently bring your talents into the hackathon game.

Tip #1: Don’t be afraid.

You are going to see a bunch of confusing maps. Here’s one of them:

Source: Atila

Sometimes you won’t know what people are talking about at all. Don’t panic.

Hackathons cover a large ground of focus areas — healthcare, sustainability, education, civic engagement, and much more. This is combined with new and constantly evolving forms of technologies across a wide domain of hardware, software, and everything in between. Hackathons are complex, but you will learn lots along the way and it will be worth it.

apple lost in a sea of oranges

Do not fret about learning everything — find your focus and stick to it. There’s plenty of time to explore; don’t feel rushed to try and do everything all at once.

Tip #2: Draw out your ideas.

Brainstorming can get messy, especially when you’re working with others who are viewing the same problem from a different lens.

Here’s roughly how it goes down:

Typically, a developer will look at a problem and find the easiest possible way to implement a solution, while a designer will look at the problem and find the best way to provide that solution for the users.

In order for developers and designers to work together to craft the solution, this partnership involves compromise. This compromise is one of creating something that can both be made and can be easily implemented by the developer. This is where drawing out your ideas comes in.

apple and orange shaking hands

Drawing out your ideas and talking through it before designing ensures you and the developer are on the same page. This minimizes wasted time when building or designing any features in the limited hackathon time frame.

Messy jamboard from my most recent hackathon (HooHacks)

Here are some tools to get you started:

  • Google Jamboard: For sketching and collaborating virtually, harder to use post-its but quick, easy, and free
  • Miro: Very good for ideation and post-it brainstorming, but has a limit on number of bulletin boards to each free account

Tip #3: Play to your strengths.

As a designer, you have an eye for making things user-friendly (or pretty, depending on what type of designer!) A great emphasis on hackathons is about selling the idea — often involving a short pitch video or presentation at the end. A polished slidedeck, logo, and graphics will make you stand out.

a polished apple in a stack of unpolished apples

You have the opportunity to package your team’s idea to make it easily digestible for judges. Judges are given a rubric to grade each project. The easier you make it for them to understand your project for them to fill out the rubric, the more points you’ll score and the higher your chances of winning!

Oftentimes, I notice teams of developers focus so much on the backend and coding that they don’t think about the UI/UX until the very end. You have the opportunity to change that as the designer by leading the project ideation, ultimately saving time for your team.

Tip #4: Be a translator.

In hackathons, judges represent the users you are speaking with. Just like how a great curriculum is structured to not overwhelm you with information, you don’t want to overwhelm users with too many unfamiliar technical terms. In essence, good presentations are a kind of user experience, and understanding where their gaps in knowledge may be would help to make your presentation more accessible to a wide range of technical backgrounds.

apple and orange sharing knowledge with each other

Not knowing all the technical terms the developers are saying is actually favorable in this sense as you are well-positioned to learn the terms and explain them in a way that you found understandable. During hacking, don’t be afraid to talk to the developers to understand their work and terminology. Be each other’s teachers, and also explain design principles to them. Strong communication is key and it will be worth it. When it comes time for judging, you’ll be able to translate some of the technical terms the developers may be familiar with to plain English for the judges.

Tip #5: Document your learning.

Hackathons are a great place to learn and document your learning. What’s a better story to tell than tackling a new tool or developing a crazy idea late into the night with a couple teammates? Not only do these make for great experiences to discuss in interviews, but it’s also great for writing compelling case studies to add to your portfolio!

Hackathons are also a really great way to get familiar working with developers. You’ll learn how to use new tools, but more importantly, you’ll establish good team practices that will be relevant to projects in the future.

apple and orange getting along together!

Here are some articles documenting my experiences at previous hackathons -

🌱 TreeHacks 2021 — Gladiator cat-themed VR game that teaches American Sign Language through Oculus finger tracking.

🐶 TartanHacks 2021 —Windows 3.1 retro-themed AR geospatial social media application to connect you with your community.

Concluding Thoughts

If you’re still not convinced to attend hackathons as a designer, please ping me and let’s talk. The hackathon world is really in need of some more intuitive designs and it starts with you attending these events to shift the stigma of design in hackathons. All the hackathons I’ve been to have had a significant lack of designers — there really is a high demand but low supply. See you at future hackathons! 👋

apple waving goodbye

Resources

  • 🐰 Design Buddies: An inclusive community of 19,000+ designers for mentorship, resume/portfolio reviews, networking, and so much more! I’m a student who recently pivoted to design, and I truly can’t thank Design Buddies enough for giving me this community to ask questions and learn from others. It’s also a great place to find other designers that you may want to team up with for events and also a really great place to share your hackathon wins in #victories! Join the Discord here.
  • 💻 Devpost: The hub of hackathons. By creating an account, you automatically have a portfolio of hackathon projects where you can add screenshots, vidoes, and a writeup for each project. Most hackathons have their project submissions hosted here, so it’s really an all-in-one place to find hackathons and submit projects! You can also follow your favorite hackers to see which hackathons they’ll be participating in next and keep updated on their projects!
  • 🏆 MLH (Major League Hacking): Hackathon league. Bigger hackathons may be partnered as part of this group, and this is a great place to look for upcoming hackathons. They also have lots of smaller hackathon-style events for meeting other hackers throughout the year!
  • 🙋‍♀️ Rewriting the Code: Growing virtual community of 10,000+ college and early career women with a passion for technology from 700+ colleges and universities. They have a really amazing community and newsletter to keep updated on the latest internships, hackathons, and volunteering opportunities. Sign up to join here.

--

--