Hack the North is Canada’s biggest collegiate hackathon. Every year, 1000+ hackers and hundreds of other attendees congregate in Waterloo, Ontario for 36 hours of building. Our mission statement is to make it easy for hackers to dream big and build, as part of the pipeline into the tech industry.
The way Hack the North represents itself matters a lot. We don’t just look good, what look like also holds weight and meaning. Branding is a big part of our event space, communication with our attendees, and a way to convey Hack the North’s values.
Deciding on a brand identity with new colours, concepts, and symbols is a difficult but enjoyable process that starts with the organizing team itself. I held a team-wide branding exercise to discuss it. For example, one question we discussed was “How would Hack the North be described if it were a person?” We decided that our personified hackathon has strength in their attributes as a trailblazer, whilst being detail-oriented and ambitious.
A brand cements in community members’ minds as a result of exposure over many touch points leading up to the event. By setting expectations and meeting those expectations, we deliver the best event experience possible for each of our 1700+ attendees.
Our brand process starts with the entire team: Backend, Frontend, Design, Logistics, Marketing and Leadership. At each step of the process, there are several things to keep in mind: how the brand translates across different mediums with its colours and illustrations, if there is room for growth in visual style? Are the things that are most important, like dates and text, obviously presented as the most important?
The organization as a whole completes a modified version of Bruno Bergher's lightweight branding exercise for start-ups. This helps get every organizer thinking about what Hack the North's mission is, as well as how we want to portray ourselves.
Members of our subteam and others are invited to think about what they don't like and like, during the process, while always examining the "why."
After the branding exercise, the design team draws upon sources of inspiration to direct the tone of the art, website, and content of the year.
My pitch involved an edgy dark mode with bright neon colours, wanting to invoke an arcade-like but artsy feeling.
Each design team member has the opportunity to . Oftentimes there is no one "winner" but we draw upon elements we like from each concept. Sometimes there's a unique interaction further down the website, like a hover animation, or specific kind of carousel.
Being for everyone means everybody gets the best experience when interacting through our touchpoints. As many as 1 in 12 men are colourblind of some form, and we performed a quick check to make sure that each potential colour palette held distinct colours, as well as a way to inform our future designs.
From left to right, top to bottom: Tritanopia (blue-blind), Protanopia (red-blind), Deuteranopia (green-blind), Achromatopsia (monochromacy)
The Engineering 7 building at the University of Waterloo is recognizable as our long-time venue and one of the newest buildings on campus. It also serves as the cornerstone of our branding this year, to emphasize the return of an in-person event after 2 years of virtual-first hackathons.
The goal was to evoke hype through colours and shapes. Our quality is reflected in the illustration’s quality. The style is a nod to the iterative process of building as well as introducing a hand drawn, welcoming element.
Our website launch is when we kickoff hype for the event. Potential hackers, mentors, volunteers and sponsors become aware of its existence, and learn this is the first place they should look for information.
We want to think about how a user moves through the site: how do visual motifs or animations influence the browsing experience? Where do they tend to stay or where is attention drawn?
Our design system is a collaborative process that is built over the course of designing each iteration. Used both as a Figma Team asset system for more efficient designing, as well as for our Frontend Team's reference.
When discussing handoff, the product designers and I write notes to our Frontend Team describing behaviour and examples of how components should function. We also provide mobile, tablet and ultrawide mocks for a total of 3 breakpoints and 4 widths accommodated for.
Branding takes up a month of our almost 6-month organizing season. By the time the website is handed off to Frontend Team, a product-graphic designer duo has already started our hacker application portal and many other projects on on their way. Below is a non-exhaustive list of some of the major projects I oversaw and worked on myself in the 2022 year.
Graphic by 2020++ Design Lead Annie Xu to demonstrate the sheer breadth of range of Design Team's projects.
Social Media is difficult as a project because algorithms thrive on constant content and consistently interesting content to drive engagement. The design team works with marketing to plan campaigns across different platforms. These campaigns act to increase reach, persuade potential attendees, entertain the masses, and encourage community building at all levels of attendees.
Instagram posts created by me for 2023 hiring.
Advocacy for hacker-first design
Both digitally and on the analog side, we cultivate a culture of stepping into the shoes of our hackers to imagine what would be best for them. As an event-based design team, our priority is to ameliorate the event experience through design.
Keeping the big-picture in mind
A really important skill I had to learn was how to think about an organization on the level of mission, values and our place in the tech pipeline. Tech is still infamously known for being a difficult environment for people who belong to minority groups. Hack the North aims to even the playing field; it was important to me to contribute to discussions on how to do that.
Maybe the real treasure was the friends we made along the way.
—and how to communicate with these friends, help those friends find what they’re good at, and encourage them to find meaningful experiences. I’m the catch-all for if a junior designer needs help ironing out spec docs, pixel pushing, or even just some company. As a team lead, I help balance personal design goals and health of my junior designers with the goals of the organization.
