Designing Canada's largest hackathon

Hack the North is the Canada's biggest hackathon, where 1,000+ students of different skill levels come together from around the world to experiment and create unique software or hardware projects from scratch. We empower and enable teams to make something great in only 36 hours by providing an abundance of resources like workshops, mentors, and sponsors.

After two long years of the COVID pandemic and hosting Hack the North online, 2022 is the first year where we’re returning to an in-person event. Given the fatigue with virtual hackathons, this year presented us with a unique opportunity and challenge:

How do we build our brand this year to convey the excitement and energy of the return to in-person hackathons?

What’s in a brand?

When designing this year’s brand, the first step our team did was to look into the branding and branding process from previous years.

We noticed the following trends on how our brand has evolved:

• A shift towards big illustrations and animations
• A transition from darker themes to light, pastel-colored themes
• A move away from the "big tech" look in favor of a more playful style
• A switch to flatter UI components (text, buttons, etc.)

A key insight we had was that as designers, we often get lazy when re-designing something and use previous versions as a starting point instead of coming up with something new. This often results in us hitting a plateau of what we believe is the best design when there might be a better design out there somewhere.

Going forwards, we wanted to be more experimental and take more risks this year while also maintaining many of the familiar elements that people associate with the Hack the North brand.

Defining the brand

At the start of the year, we conducted a branding exercise with our team of 47 organizers to figure out what we associate with the Hack the North brand.

Through this, we asked questions like:

• If Hack the North were a person, how would you describe them?
• What did you think we did well in previous years?
• What brand did we convey to you before you joined the team?
• What feelings are conveyed when you think of hackathons?
• In your opinion, what makes Hack the North different from other hackathons?

After aggregating the information, we determined a brand personality for the main motifs we want to convey through our brand:

Recently, there has also been a lot of talk about the death of hackathons. This year we’re trying a lot of new ideas like an alternative judging stream for existing projects and promoting more of a focus on accessibility/sustainability rather than pulling all-nighters. We wanted to re-define what a hackathon meant, and wanted our brand to reflect that.

To us, the Hack the North 2022 brand should be something familiar yet new, something indicative of the effort we put into organizing the best event possible, something that gets hackers and sponsors excited about attending the event.

Designing a website and brand

At Hack the North, our brand usually comes together during the work on our landing page for the year. From there, we’ll use illustrations and elements we created for the website in other projects throughout the year: social media posts, swag, hacker applications, etc.

As a team, we put together a mood board of different styles that we enjoyed and that we thought embodied the values we wanted to showcase.

Using these elements, we spent a week creating different mid-fi mocks to explore different landing page concepts. This year, some of the main themes we enjoyed were 3D elements, bright colors, dark-themed websites, and an sketch-like qualities. Then, together with our frontend and marketing teams, we took votes on our art direction for the year.

The final direction we decided on was a combination of bright colors and sketch-like illustrations. We also used this to come up with our new tagline for this year: “Spark your passion.”

We followed a pretty standard process in designing the website: wireframes, multiple iterations with team-wide feedback, followed by a final version.

Something we consciously tried to do was re-think many of the elements of a hackathon website. Most of our previous websites, as well as the landing pages for other hackathons, follow a similar layout.

Introducing Hack the North 2022

When visitors land on our site for the first time, they’re met with bright colors, animations, and a small blurb on what Hack the North is.

The illustrations were done by Rachel Xu and animated by Angela Nguyen in After Effects, which were then exported in JSON format and rendered with Lottie. To read more on how our animations work, I wrote a blog post on this subject.

During 2020 and 2021, when the event was virtual, our branding lent itself to more abstract elements like islands and clouds, but with the return of the in-person component, we wanted to bring back symbols of the Waterloo campus to give hackers an idea of what to expect at the event.

There are also some smaller details we added to make the site feel less flat: these include subtle glows that punctuate the site and a noisy texture in the background.

Changing the status quo

With our goal of being more experimental, the biggest change to this year’s site was the amount of new elements and layouts we introduced. These include a dynamically-changing stat showcase, a photo carousel, and a section highlighting the main highlights of the event.

We also experimented a lot with sticky scrolling, where parts of the page would stay fixed as the user scrolls, as a way to create a more engaging experience.

Increasing Approachability

Over the years, Hack the North has often been perceived as an exclusive event where only the most “elite” of hackers can participate. This simply isn’t true: as a completely voluntary student-run organization, one of our goals is to make the event accessible to anyone, so that even someone with no experience with coding can come and explore what it’s like in tech.

We tried our best to reflect this in our branding and in many elements on our site.

One thing we did was change our body font from Inter to Satoshi. Although we’ve been using Inter for the past 3 years, it’s always felt a bit too “corporate” so we decided to go with more of a playful/rounded font.

Like previous years, we try to include a diverse set of hacker stories in hopes that the viewer can find someone who they identify with:

This year, we also added in a handwritten (handtyped?) note from our team

and like always, we ended things off with an organizer carousel to recognize everyone on the team who helped organize this year’s event and to humanize the organization a little bit :D

Other Projects

Hack the North 2021

As a frontend developer last year, I helped to build the landing page for Hack the North 2021 alongside Steven Xu, Zafin Hassan, Jenny Chen, Alex Xie, and Rahul Aggarwal. We also built a custom application form that works like a storybook which saw 5,000+ applicants.

North

I designed and built North as a design system that is accessible and customizable. It’s intended to be used as a brand-agnostic component library to prevent us from re-designing the same tools each year.

Sponsorship Dashboard

After conducting multiple user-experience interviews with past sponsors, I re-designed our sponsorship dashboard this year, which is how our event sponsors submit perks for the event and filter through potential candidates for recruitment. I worked with Rohan Ravindran from our frontend team.

Hack the Trees

Most years, the Hack the North team likes to put together a fake hackathon for April Fools. This year, we launched Hack the Trees. I helped design the website alongside Rachel Xu, Yi Nan Zhang, Wilbur Zhang, and Angela Nguyen.

Conclusion

Being apart of Hack the North has been one of the highlights of my university experience. Not only do you get to do meaningful work that you care deeply about, but the team has some of the most passionate, talented, and personable people I’ve ever met. It’s been very fulfilling to see your teammates grow and also to have the opportunity to try out a new role like design.

A big shoutout to everyone on the 2022 team this year – it was so much fun working with all of you to put on the greatest hackathon event ever ❤️

I also wanted to thank Stanley Huang for being the inspiration behind this article.

If you’re curious about the work I did at Hack the North, or are interested in joining the team, send me an email at kelvin@hackthenorth.com.