<- Home
The overview slide for Surfboard: in the middle, the Surfboard logo (an orange overal in the middle of a white oval) is shown next to the Surfboard word mark.

The four phases of attending a hackathon

14 July 2023

One week ago I had the pleasure of sleep-depriving myself in front of my laptop in a room full of ideas and a ticking clock at the Young Creators Hackathon. Together with four teammates (👨🏼‍🎨 Bram, 👨🏻‍🔬 Leon, 🧑🏻‍🦰 Rocket, 👨🏻‍💻 Sander and myself) I spent 24 hours brainstorming, designing, and coding a fresh idea into existence.

The end result is Surfboard: a new platform that helps boost the institutional knowledge and culture of fast-growing companies by providing employees with decks of flash cards to train with. I’m super proud of the result, and the best result of all: we ended up winning the hackathon! 🏆

The slide deck for Surfboard, turned into video.

Similar to other hackathons I’ve attended, I noticed that our team went through several phases over the course of 24 hours. I thought it’d be interesting to retell our hackathon through these phases – perhaps they seem familiar to you.

🤩 Phase 1: Excitement and anticipation

In this first phase you form your team and get started with brainstorming ideas around the challenge you’ve been given. Sky’s the limit for now: there’s plenty of time, so dream away! As the plan starts forming, everyone starts setting up their files and repos, and there’s optimism abound.

We started this hackathon with ⅗ of a team: Sander, Leon and me were looking for two others. Meeting new people is what makes these events fun, and within minutes we found two others: Bram, who would end up forming the perfect brand strategy complement to my product design, and Rocket, the hackathon’s youngest participant, who was very eager to learn and contribute.

For this particular hackathon, we were given complete creative freedom to come up with cool concepts, together with four criteria for a winning product:

  1. Technical excellence

  2. Design

  3. “Wow, you built this in a day?!” factor

  4. Business opportunity

Great stuff, but very broad. To tackle this creative conundrum, we started out with a “Crazy 8” brainstorm session – everyone gets 8 minutes to write down 8 ideas. The goal was to get any and all cool ideas out of our heads and onto sticky notes. But a problem quickly arose: none of the walls we stuck our stickies on held onto them. Instead, we opted to place them horizontally on a nearby coffee table that kind-of resembled a surfboard. The name would end up sticking (ha) all the way through.

The namesake Surfboard in action – we carried it around between floors when needed

A picture of two teammates and me standing in front of a whiteboard. I’m smiling as I’m looking back at them and gesturing with my hands.

Fact: brainstorms work 2× better when you smile a lot

Having gathered and presented all ideas, we voted on our favourite ones. As a crucial final step, we ranked the remaining top 6 ideas against the judging criteria above, to make sure we’d actually satisfy the brief. One idea arose as a clear winner: creating a platform for practicing spaced repetition on collaborative decks of flash cards.

🧑‍💻 Phase 2: Focus and feasibility

As evening turns into night, the room quiets down. Excitement is replaced by pure focus on the (somewhat daunting) task ahead: getting the product to an MVP state. This is also where the first “nice to have” features will start shattering, as it becomes clear they’re unattainable within the deadline. Some doubts about the core concept or its feasibility might arise here – this is the moment to change things before fully committing.

Just before midnight, while the developers decided on the tech stack, the designers refined Surfboard’s value proposition. We believed the product could be even better at knowledge retrieval, and even go beyond that into company culture. We made two adjustments:

  1. Each flash card within the platform would be based on a source article. This helped round out the knowledge part of the equation: Surfboard could become a source of knowledge itself, rather than a place to rehash you’d be able to create a shared reading list that also helps retain the knowledge in the article – ideally employees would be motivated to open this app in-between meetings, instead of taking a quick scroll through Twitter.

  2. By including special flash cards about values, guidelines, and facts about coworkers, the tool could also be used for improving company culture and cohesion.

Expanding Surfboard’s value proposition

As a product designer I aim to have a rough design of the core flow and interactions ready before I go to bed; that way I’m not blocking any developers who wish to continue on or those who get up before me. Once the value proposition was finalised, I got to work on the wireframe and first prototype in Figma as our brand designer started gathering inspiration for style and voice.

A picture of a whiteboard with a sketched wireframe diagram on it.

The flow starts with a single sign-on screen, which leads into the app’s main use pattern: a card that can be tapped to flip around. Once the card is flipped around, two buttons appear underneath to indicate whether you knew the answer or not.

A button in the top right leads to a Library screen that contains all card decks. Tapping on a deck leads to a separate page that contains all the cards in the deck.

The core flows of Surfboard, handed off ASAP to developers so they can start work on the front-end scaffolding.

An overview of the screens of the app. On the left, the main screen is showing a white card, with its black back showing. On the next screen an “article card” is showing, followed by a card with a coworker’s name showing. Finally, a Library page shows a few card decks and a detail page of a deck titled “Deep Learning for Computer Vision”, with 1 article and 3 cards showing.

The first iteration of the core screens. The design is relatively sparse, as the exact palette, typography and branding would follow later.

💪 Phase 3: Endurance and determination

The second half of any hackathon is the purest form of productivity I’ve ever experienced – there’s no room for deviation anymore, now it’s all about making it happen. After a short night (I’d advise you to find a natural break in your work and do get a few hours of sleep) it’s all hands on deck, all the way up to the very last second of the deadline. A good division of labour + the ability to context switch rapidly will make your team shine in this phase.

And shine we did! As I arrived back in the office, the branding had been finalised and we had a working prototype. I spent some time applying the new branding to the prototype, sent that off to the developers for final tweaks, and shifted work to working on the pitch and slide deck.

Applying the new branding to the existing design

The last two hours of the hackathon can only be described as a mad rush to the finish line. There was this particular moment where we all worked in perfect unison: as Leon continued on the pitch structure, Bram designed the slides, and I would follow right behind him with final polish and animation, all while Sander was putting the systems diagram together and Rocket merged in his React components. I recall feeling nothing but determination and confidence in my team, as we continued each other’s work and sewed everything together right at the last second.

😌 Phase 4: Pride and triumph

And suddenly… it’s over. Deadline passed. Hands off your keyboard. Take a breath. You made it.

After sending in the work and getting the pitch ready, there’s space for relief, reflection – perhaps a short moment of grief for the features that didn’t make it in. But above all: you should be proud of the tremendous efforts you’ve managed!

But don’t start celebrating just yet, because it’s not completely over. In fact, one of the most critical moments is yet to come – pitching your idea and answering questions by the judges. And you’re going to need the aforementioned pride and belief in your work when you’re standing on stage to defend your idea.

A picture of Leon in front of a big television screen showing our pitch deck with a screenshot of our app. Behind Leon, I’m standing behind a laptop controlling the presentation.

Pitching our idea – Leon on pitch, Zeno on deck.

A picture of Leon pointing to a big television screen. On the screen, our pitch deck is showing a slide titled “SuperMemo2 ranking algorithm” with two columns of data: “Starts random…” and “…then focuses”.
A picture of a row of seated people, looking at the pitches. The front-two people are Sander and Rocket, both are smiling. Sander is wearing a grey shirt. Rocket is wearing a black shirt and a black cap.

It was very interesting to hear every team pitch their idea: we heard about an app to request songs in busy clubs, GPT-optimised SaaS search engines, a very pretty app to manage your todos in Notion, and a service that generates music based on your description and then lets you take the best instrument tracks from each generation. Quite fascinating stuff!

And finally – after 28 hours, 10 pitches, and 5 hours of sleep – we were overjoyed to hear to hear that Surfboard had not only won the prize for best business opportunity, but had also become the winner of the hackathon!

A picture of the five team members standing in front of a big television screen showing a slide with the Surfboard logo on it. They are holding each other’s shoulders and smiling at the camera. From left to right are myself, Leon, Rocket, Sander and Bram.

Wrapping up

I had an absolutely tremendous time riding this wave 🏄‍♂️. Our teamwork was unparalleled, everything came together smoothly, and I loved how much we accomplished in such a short time. I absolutely adore hackathons for all the creativity they unlock, and I can feel that I’m carrying that creativity forward in the rest of my work once again.

If you take anything away from this, let it be this: when you participate in a hackathon, find your (collective) rhythm. Each phase demands different focuses and skills, and all require collaboration and harmony. Find out in which phases your strengths lie, and when you can build on others. There will inevitably be tough moments and annoyances – some resilience will help, especially in the middle of the night. Knowing those moments are part of the rhythm might help smooth them over.

Finally, one last big thank you to the phenomenal team I got to work with. And of course a shout-out to the organisers, sponsors, and every hacker that participated. It's been a blast and I can't wait for the next one!

If you have thoughts, questions, or just want to share your best hackathon story, feel free to get in touch with me on Mastodon or anywhere else!