Background

A hackathon is a 2-3 day event where engineers and designers can team up and build a solution to a problem of their choosing. This event happens twice per year and is organized by the senior manager of engineering who volunteered herself. When building a hackathon project, red tape is eliminated and the focus is on rapid prototyping and iteration. Projects often solve real problems that the company faces, and some even get implemented as live features after the hackathon.

This projcet started out as a hackathon project after my fellow engineers and I noticed that the process of planning a hackathon was complicated and puts a burden on the organizer. We also knew from experience that it can be difficult to come up with an idea for a project and/or to find a team to join.

Defining the Problem

We wanted to build an app to solve some of these logistical challenges that come with the hackathon planning process. We only had 3 days to build this app, so we condensed the research and problem definition stages into one brainstorming session, where we relied on our own experiences as hackathon participants. We started by defining user needs and brainstorming product requirements that would address these needs.

NEEDS

• Hackathon organizer needs to more efficiently set up hackathons so that they can occur twice per year without requiring her to put in a lot of extra hours of work.

• Employees with ideas for hackathon projects need to be able to share them with others so who may be interested in working on these projects.

• Employees who want to participate in a hackathon but aren't already on a team need to see which teams have openings so that they can ask to join.

• Employees who want to participate in a hackathon but need more team members need to see who is looking for a team so that they can invite these people to their team.

PRODUCT REQUIREMENTS

• An app that can be used for every hackathon.

• Users can add project ideas at any time, and they will be listed for everyone to see.

• Users can add tags to ideas or projects for easier discoverability.

• Ideas can become projects when Hackathon signups begin.

• Users can add themselves to a project's team, or invite others to join their team.

• Users who are not already in a team are listed, along with their interests, so that teams who are looking for more team members can peruse the list and invite anyone they feel is a good fit to join their team.

• Hackathon resources, deadlines, and demo schedules can be accessed at any time.

• Past hackathon project lists and winners are stored.

• Ideas can become projects when Hackathon signups begin.

Ideation

Because there was very limited time, I jumped right into ideation and wireframed a layout for an app that had a similar look and feel to our company's product but felt more consumer-friendly, simple, and modern.

First, I explored some options for layout. In one option, the content in the middle of the screen is controlled by tabs and there is content on the left side that persisted on all screens of the app.

Another option places the tabs in a menu view on the left side of the screen, and the content on the rest of the screen is dynamic based on which menu item is selected.

Feedback

I ran my ideas past the engineers on my team to get their feedback. We thought it would be too complex to split the page up, so we decided to use the tabbed design but change it so that the content on the entire page changes when the user toggles between tabs. This decision ended up working out better in the long run, because it allowed us space to put more content and functionality in the app.

Implementation

Due to the time constraints of this hackathon project, I was designing while the engineers were building the app. If the engineers had feedback, I made tweaks on the fly and iterated until we landed on something that could be built within the time we had.

I designed the following user flows and functionality:

• User profile, accessed from header.

• Ideas tab lists ideas.

• User can create new ideas.

• Ideas can be favorited.

• Ideas can be transferred into Projects, which means they will be worked on in the next hackathon.

• Projects tab lists projects and team members.

• Projects can have tags for easier discoverability.

• Users can join project teams.

• Users can invite other users to their team.

• Admin View allows hackathon organizers to set up hackathons easily.

• Hackathon resources panel for links like signup forms, rules, etc.

• Users can view old hackathon projects and winner.s

• Users can vote for their favorite project after the hackathon is over.

Click through to see each screen below:

Walkthrough

The engineers were able to build the main structure of the app and some of the functionality, as you can see from this screen recording of the live app.

Prototype

For the purposes of presenting and demoing our idea, I put together a prototype to show one of the features we were most excited about but didn't have time to build: the ability to browse a list of users looking for teams and to invite them to a team.

Final Thoughts

We ended up winning awards for popular vote and for the most impactful UX. Since we weren't able to fully finish the project in this hackathon, we continued to work on it in future hackathons. It is on track to be completed by the next hackathon so that it can be used to help plan the next hackathon.