Hack the North is Canada’s biggest collegiate hackathon. Every year, 1000+ hackers (and hundreds of sponsor reps, workshop leads, organizers, and mentors) come from all over the world to Waterloo, Ontario for 36 hours of learning. Our mission statement is to make it easy for hackers to dream big and build.
We don’t just look good, what we look like also has an important role in how we communicate with our attendees. Branding is a part of each step of the user journey: from our social media posts prompting our community to apply to be a hacker, to the event signage that ensures people know how to find a gender-neutral washroom. Branding is a part of the experience design that sets the expectation for an audience that Hack the North cares about its community, and puts in the effort to care.
We involve every single subteam: Backend, Frontend, Design, Logistics, Marketing and Leadership. Design team hears out the thoughts and ideas of every organizer, which is especially helpful because there are designers who are new to the organization and need the context to understand how to approach this task.
Every year the design team comes up with a new brand identity. We start by asking the team for help. It's helpful to hear different points-of-view because some team members are new to the organization, others are returning members, and some have never even attended a hackathon before.
At the beginning of the organizing year, I held a brainstorming session to discuss what went wrong and what went right with the previous year's branding. For example, one question asked was “How would Hack the North be described if it were a person?” When we discussed our answers, we came to the consensus that our personified hackathon is a trailblazer, while being detail-oriented and ambitious.
Though this branding exercise serves as a way to orient the design team, it also helps bring all team members on the same page, and put their ideal form of Hack the North into words. If these attributes (trailblazer, detail-oriented, and ambitious) are discussed, our consensus means that we now all share this ideal Hack the North in our minds. 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 gathers inspiration to direct the tone for our first project as a team: a website. I asked my designers what kind of websites and illustrations they liked. Gathering inspiration is also a part of the learning process because understanding why a design is good or not is important in designing intentionally.
During the inspiration phase, we also research other hackathons; if our ideal Hack the North is a trailblazer, we should stay away from having too similar concepts to other hackathons. 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.
I pitched a severe dark theme with bright neon colours, wanting to invoke a movie theatre arcade-like atmosphere and excitement.
Each design team member has the opportunity to present a mid-fidelity mock of a landing page concept and UI sections of their choosing (e.g. leaders, testimonials, sponsors). The co-directors, design team, marketing team, frontend team, and other people who are interested attend this presentation. During the presentation decide on a visual direction by assessing the strengths and weaknesses of the pitches, as well as overall feasibility.
Designing for everyone means making sure everybody gets an equal 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)
Because I had a vision for the brand, and being a strong illustrator, I took charge of the landing page and overall visual style for Hack the North 2022. My rationale was to simplify all previous illustration elements to focus on the in-person aspect of the event.
The landing page features the Engineering 7 building at the University of Waterloo, our long-time venue and one of the newest buildings on campus. It 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.
An emphasis on realistic illustrations, dynamic shapes, and bright colours all evoke excitement. 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. It is used both as an 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. The rest of the year's projects include: swag, social media, attendee dashboard, sponsor dashboard, scanner tool, signage, and more!
How to advocate for hacker-first design
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 better the event experience through intentionally designed touchpoints.
How to keep 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 were the teammates we made along the way.
— and how to communicate with them and encourage them to grow. 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 learnt how to balance personal design goals and health of my junior designers with the goals of the organization.
