Human-centered design for a virtual-first hackathon

Written by: Rachel Xu

Human-centered design holds the core tenet that an experience, at its best, is equitable, stress-free, and does its best to help people. As a human first, as well as a designer, it’s a grounding notion to remember that design should help people.

Design itself is everywhere. And whether it’s noticeable or not, it’s purposeful. Even more so now, since our event is virtual-first; our online experience is carefully curated through digital venues like social media, event platforms, and the graphics that adorn every page of Hack the North content. On Hack the North’s design team, we think about the details: how to highlight statistics on a sponsorship package, what draws the eye best on each Instagram post, and bringing to life experiences like the hacker dashboard so that they’re useful and joyful. 🙌

In order to design the best virtual-first event we can, we have three main pillars that inform us:

  1. We learn from each other by collaborating 🤝
  2. We convey our values in our visual and experience design 💡
  3. We design for accessibility and inclusion 🌎

Ultimately, we want to empower hackers to dream big, build projects, and pursue their passions in the realm of tech.

We aspire to be cognizant of all needs. As organizers, and as people, we want to perform our best, and also meet the needs of those we design for. To better ourselves, our virtual-first event, and how we design, it’s most important to listen to others and be open to new ideas. Because no one person is all-knowing, we actively seek out what people around us have to say and how they feel. On the organizing team, we frequently ask for feedback over Slack, collaborate in Figma, or are open to hopping on call to discuss details more in-depth.

Hearing directly from hackers and our community is also valuable in helping us better understand what we can improve. Each year we’re able to look at post-event surveys and the analytics we set out to collect. These analytics help us know how to design better based on what pages are clicked most often, or what devices are used to access our online platforms. 📈

In addition to our post-event data, this year we had a separate Diversity, Equity and Inclusion (DEI) initiative focused on interviewing people in tech who belong to underrepresented groups. With an emphasis on hackathon culture and breaking into tech, we touched upon how the hustle mindset can affect mental health and how hackathons can shape a tech career. Oftentimes a gateway for many students interested in tech, Hack the North has the responsibility to make things better, and more equitable, by design.

Visualization of recurring patterns and themes in our interviews. Thank you to Leon Han and Sophie Wang for spearheading the DEI Initiative.

A major actionable for everyone on the organizing team is to adopt an inclusive and accessible mindset. Inclusive design principles can be incorporated into any work, both internal and external to Hack the North. There are also more specific subteam actionables like incorporating DEI into application processes, investigating assistive technologies, and overall greater self-education. 💻📚

Some of the takeaways from these interviews are things we can change immediately, while others broaden our worldview and ask questions that we can only answer one step at a time. Any insight is important and informs future decisions. They are relayed to everyone on the team; we can keep each other accountable for what actions we should be taking.

The way we represent ourselves visually matters a lot. It doesn’t just look good, it also holds weight and meaning. The branding is a big part of every virtual space, so we want it 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 team itself. We hold a team-wide brainstorming session to discuss it. For example, one question we ask is “How would Hack the North be described if it were a person?” Our personified hackathon has strength in their attributes as a trailblazer, whilst being detail-oriented and ambitious. We also discuss which attributes we want to convey more strongly, like being welcoming, dynamic, and empowering. 💪

Three green islands each composed of two bumps, with a gradient from dark to light green, going from top to bottom. Each island is surrounded by floating blue gears. The leftmost has a red and white lighthouse, and a robotic red hand holding a pencil. The middle island has a white castle, and clouds surrounding it. The right island has a cabin with a red roof, as well as an open blue laptop that has wires running up to a white circuit board.
Three green islands each composed of two bumps, with a gradient from dark to light green, going from top to bottom. Each island is surrounded by floating blue gears. The leftmost has a red and white lighthouse, and a robotic red hand holding a pencil. The middle island has a white castle, and clouds surrounding it. The right island has a cabin with a red roof, as well as an open blue laptop that has wires running up to a white circuit board.
The three main islands on our 2021 website. Each island has at least one building, and each island has an overall theme to it!

These attributes inform our theme, which is a storybook this year. Our tagline, “Where will your journey take you?”, alludes to the open-endedness of a journey. Some of the building motifs on the website include a lighthouse, a castle, and a cabin; they’re maybe-faraway places that represent maybe-faraway ventures. It hints at all the possibilities hackers have when hacking at Hack the North. We believe that people write their own stories. ✍️ The initial website and branding launch reflects that. 🌟

Thereafter, we set out to brand everything consistently. We bring out different parts of it for different projects. For the hacker application website this year, we delve further into the storybook aspect, with a customizable boat accompanying each hacker throughout their application. Through our brand we communicate our promise to hackers and to ourselves; we want everyone to dream freely and be able to build what they want to.

Because of the shift to a virtual-first event, Hack the North has gained the ability to offer opportunity to many more people, with event-goers from all sorts of time zones, and all sorts of backgrounds. Our audience is diverse, and even broader when it comes to Gear Up ⚙️, which is our pre-event workshop days open to everybody. To make the experience as fair as possible, we do our best to design accessible experiences. Making sure everything is accessible and inclusive is a big part of design. It guides every decision, big or small. 🌎 🐜

The primary blue and white contrast ratio is 10.16:1. The secondary blue and white contrast ratio is 4.62:1.
The primary blue and white contrast ratio is 10.16:1. The secondary blue and white contrast ratio is 4.62:1.
The primary and secondary blue contrast ratios according to the Website Content Accessibility Guidelines (WCAG).

Questions like, “How can we account for visual impairments? Motion sickness? What kind of device are people using when accessing our websites?”, amongst others, are taken into consideration. Granular details are paid attention to; the colour of text, buttons, and other content elements are chosen carefully according to the Website Content Accessibility Guidelines (WCAG), and illustration elements are high-contrast enough against other things and backgrounds so that what they are is clear.

When designing for anything, accessibility and inclusion is at its best when proactive, not reactive. If nothing is designed to be accessible, it has a severe impact on how different kinds of people are able to navigate the world, and disallows opportunity to those who deserve this baseline courtesy. In an increasingly virtual world, with our event being virtual-first, accessibility of our event platforms and digital products affect so much of the overall experience.

With that being said, we improve our processes year after year. Our goal is to give the opportunity to create. Accessibility and inclusion are of the utmost importance in empowerment.

Five people in a video chat holding up a felted dog or cat.
Five people in a video chat holding up a felted dog or cat.
The design team is hard at work with their needle felted faceless dogs and cats. We forget to take group photos when designing.

The visual and experiential design of a hackathon are touchpoints at which our hackers come to understand what Hack the North is: students empowering those who are passionate in tech. Through collaboration with each other, pushing the values we strive for, and designing for accessibility and inclusion, the Hack the North design team makes improvements to better empower. Human-centered design is a part of what makes it all possible to continue to bring together people virtually, to collaborate, learn, and dream. 💭✨

The sincerest of thank yous to Annie Xu, Emily Wang, Jenny Chen, Karen Lee, Kelvin Zhang, Leon Han, Rebecca Fu, Sarah Chun, Stephanie Dang, Winny Yang, and Zafin Hassan for conquering unwieldy prose and ironing out muddled ideas!

Hack the North is happening in less than 3 weeks!
If you applied to be a hacker, please keep an eye out for a decision email (Round 1 acceptances have already been sent out — please RSVP to confirm your attendance).

If you did not apply to be a hacker, please join us on September 13–17, 2021 at Gear Up (RSVP here) , our public pre-hackathon event where we will be hosting workshops, tech talks, and career sessions to help you navigate the tech industry! 💙

3,000+ students from across the globe join us at Hack the North, Canada’s biggest hackathon, for 36 hours ofdreaming big and building incredible projects.