An application you could actually play.

TL;DR

For Hack the North 2026, I designed the experience from the moment hackers entered the application to the point where they began sharing their basic information. My goal was to make the application feel like another chapter of the HTN world we had been building across the year.

The result was a gamified pre-application built around sound, creativity, and our Hack Pals, followed by a whimsical postcard-inspired information flow.

More than designing the screens, I was responsible for figuring out how the experience should work, how all of its variations connected, and how to communicate that system well enough for our design and development teams to build it.

The Problem

Applications are usually where the fun stops.

A hackathon website can be playful, interactive, and full of personality. But eventually, the user reaches the application and suddenly they’re faced with a long form. For Hack the North, this is another opportunity to establish our identity. We wanted the application itself to feel like part of the 2026 world, not a separate process users had to get through before the fun started.

Previous years had experimented with different approaches to this. Some years used personality quizzes to match hackers with mascots; others let applicants gradually build out a world as they progressed. For 2026, we wanted to push the idea further:

What if the application itself became an experience?

The challenge was finding a mechanic that was playful enough to feel like a game, but simple enough that thousands of applicants could understand it immediately. Whatever hackers created needed to feel like it belonged to their application.

Product 01: The MIDI Maker

Starting with the story

When I was assigned the pre-application through basic information flow, I was also part of Hack the North’s Story Squad. Our 2026 story revolved around The Fade and the idea of creativity as something that could restore the world around us. We had already been exploring sound heavily across the teaser and site, so I started wondering:

What if creativity wasn't just something we talked about in the story, what if hackers got to create something themselves?

That became the starting point for the pre-application.

I began by looking at how previous Hack the North applications approached gamification. Personality quizzes were a familiar pattern: answer a series of questions, get matched with a mascot, and receive a result.

But rather than repeating the same mechanic, I wanted to stretch the idea further. If a personality quiz lets you answer to discover something about yourself, what would happen if hackers could make something instead?

Exploring different ways to turn the application into a creative interaction.

I explored different directions for customization, interaction, and mascot matching before landing on the idea of a MIDI-inspired music maker. It felt particularly right for 2026. It connected back to our sound-based visual language, gave hackers something they could actively create, and created a natural way to reveal their Hack Pal.

The idea was still rough, but the core interaction was there:

Make something → discover your Hack Pal → carry it with you into the application.

From Idea to Interaction

Once we had the MIDI maker concept, I needed to figure out how it would actually work. The experience had to balance two competing goals: give hackers enough freedom to feel like they were creating something, without making the interaction complicated to understand.

I broke the music maker into three layers:

Beat → Chord → Melody

Each layer had three choices, giving us:

3 × 3 × 3 = 27 unique signals.

I designed the experience around progressive discovery. Hackers started with only the first row available. Once they chose a beat, the chords unlocked. Once they chose a chord, the melody unlocked. After all three choices were made, their signal was complete. The previous choices never became locked. Hackers could go back, experiment, and swap any part of their signal at any point of the pre-application. This made the experience feel less like completing a quiz and more like playing with a system.

And at the end, the combination they created determined which of three Hack Pals would become their companion: Ginny, Patch, or Vinyl.

Developing the full pre-application flow.

Making the Music

I realized we needed someone to make the music. The MIDI maker only worked if the music actually sounded good. Our team didn’t necessarily have the bandwidth for someone to produce all of the audio. So I decided to take it on myself.

I had some limited music theory experience, but producing music for a shipped product was new territory for me. I approached it like another design system: create a small set of reusable pieces that could work independently and together. I created 3 beats × 3 chords × 3 melodies for 9 total audio loops.

We also had to address this design constraint:

How do we make switching between musical choices feel instantaneous instead of restarting audio every time?

All 9 loops play simultaneously at zero gain. Selecting an option ramps its volume up while the previous selection ramps down, keeping every layer synchronized. Each loop was designed to be the same length and work seamlessly with the others. When a hacker selected an option, that layer would become audible; when they switched their choice, the previous layer would fade out and the new one would take its place.

Every hacker was effectively creating their own three-layer composition in real time and once the hacker submitted their signal, those three selected loops continued playing as the background track throughout the rest of their application.

Layers of the MIDI Beat Maker's buttons, each color allocated to a unique audio track.

Product 02: The Basic Info

Extending the world

The pre-application was only one part of the experience. I was also responsible for the transition into basic information, and I wanted that section to retain the same mysterious, whimsical feeling as the rest of the 2026 world. I started exploring how something as ordinary as a form field could become part of the environment.

That led to postcards as application fields, a visual metaphor that made the information-gathering portion feel more like something you were discovering than something you were filling out.

I also pushed myself into a few mediums outside of my usual product design work. I helped animate the Hack Pals, designed stamps for the application, and created the graphics for the Hacker Pal names shown throughout the experience! If the experience needed something, I wanted to see if I could learn enough to make it myself.

Designing for Every Possibility

The simple interaction hid a complicated system.

Once the concept was established, I had to account for everything underneath it. There were 27 possible signals. Each signal had a corresponding Hack Pal outcome. Each choice changed the audio. Previous choices could be changed. The completed signal had to persist into the rest of the application. There were then the edge cases.

I made sure to take into account all of these states and combinations and addressed them to the developers so they knew what was the source of truth.

The final product was the result of pushing the concept, understanding our constraints, and working with the team to find the version we could actually build, and it’s a project I am so extremely proud of the team for. <3

Key Takeaways

Pushing my creativity

Designing this experience taught me to push beyond my usual mediums, think rigorously about the systems underneath, and communicate ideas well enough for others to bring them to life.