Designing for a hackathon

Hack the North
5 min readJul 10, 2020

Written by: Annie Xu

Each year, students from around the world are eager to participate in hackathons and look forward to an exciting weekend filled with learning experiences, and a healthy dose of competition. Hackers can have very different impressions of each event- starting from the very first social media post.

No matter what we were told growing up, people do judge books by their covers. Design helps represent the identity of the organization and its values as well as what hackers can expect from the event experience. All of this is done through ✨ branding ✨.

Defining the brand identity is just one of the many aspects the Design team is responsible for on Hack the North. Designing visual assets, user experiences, and even wayfinding signage are just some of what falls under our purview. Throughout all of these projects, there are 3 pillars our design team carries into the design process:

  • Designing with intention 🔬
  • Designing collaboratively and efficiently 🤝
  • Designing for inclusion and accessibility 🌎

Designing with intention 🔬

How can we make our website more accessible? What narrative should we build with our brand? What information goes first on the sponsorship package?

When designing for a big event, we often have to make difficult decisions and hope that the decisions we make are objective. In reality, we sometimes get caught up designing in a bubble where we let our biases influence our decisions. As a design team, we make a conscious effort to be intentional with our design decisions and be well informed about our community.

When it comes to each design project, there are two things to always keep in mind: 1) What’s the desired outcome?, and 2) Who’s our audience?. When branding Hack the North 2020++, our goal was to simultaneously encompass the event’s direction while staying identifiable as the event our hackers all know and love. Specifically for 2020, we wanted to emphasize our main mission:

To make it easy for anyone to dream big and build.

Our audience includes passionate and innovative students from around the world. Each year we reach out to our hackers to ask for feedback on the event and their experiences, which helps us better understand the community we’re designing for.

What do our hackers value? What truly makes their experience special?

When designing the brand, we must consider what makes our hackathon unique to our audience. In order to push for inclusivity last year, we designed big and bold empowerment posters for the event. Since our hackers value these unique experiences, we wanted to showcase them on our landing page for 2020.

Our empowerment lounge from 2019 (left) was made into an illustration for 2020 (right)

Thus, when defining our brand identity, we’re intentional in pushing forward our mission to make it possible for anyone to dream big and build, on top of our values of inclusivity and empowering students to collaborate, learn, and experiment.

Designing collaboratively and efficiently 🤝

Design is a process where collaboration and communication are key. This year offers the new challenge of being a fully remote team due to the coronavirus pandemic. Anna Liang, one of our organizers this year, details how our team ensures we grow together despite having to be remote in our previous blog. Using collaborative tools such as Figma (we ❤️ Figma) and joining frequent work session calls helps our design team work together.

Our 2020 design team collaborating in Figma and Google Meet

Whether it’s sharing that newly discovered keyboard shortcut on Figma or teaching each other drawing techniques on photoshop, collaboration in design is a valuable venue for growth and learning. In our subteam, we have designers who specialize in either graphic design or user experience. We pair designers on projects based on our complementary strengths and weaknesses, which is just one of the many ways we get to learn from one another.

Collaboration should also include the entire team. Before any design work begins, we hold team-wide brainstorming sessions to listen to different ideas and perspectives. Doing so ensures everyone is on the same page about our brand values and goals and that everyone has a say in how we express our identity. Collaboration is also done between our design team and other subteams. For example, our design team works with our marketing team to shape what social media content is released throughout the year so that design assets can be produced accordingly.

Being collaborative and actively engaging the entire team from the beginning helps us get valuable feedback every step of the way.

Designing for inclusion and accessibility 🌎

As an event with a global audience, there are a lot of experiences and needs to consider such as different backgrounds, languages, cultures, genders, and so on. Inclusive design keeps the diversity and uniqueness of each individual in mind. Accessibility ensures everyone has access to what we create regardless of ability, context, or situation. Aiming for inclusive and accessible design helps bring a better experience to our global audience!

Designing to be inclusive and accessible should be intimately embedded in the design process and be planned for from the beginning. We are critical of even the smallest details such as having dyslexic friendly font, ensuring our website is compliant to the Web Content Accessibility Guidelines (WCAG), and that the colours we use have enough contrast to maintain integrity across a variety of types of colour blindness.

How our illustrations and homepage would appear to viewers with visual impairments

We also aim to include visual motifs that can still be understood cross-culturally in order to communicate the Hack the North experience and appeal to an international audience. Plants to represent growth and lightbulbs to represent innovation are just some of the motifs scattered throughout our visual designs.

Some of our visual motifs include our classic gears

Ultimately, we use our design choices and branding to reflect the values we hold as students in the tech community. Our goal is to tell our audience that inclusion and accessibility matters to us and it should matter to them, and that we’re making a conscious effort to improve that within our event!

When designing for a hackathon, being intentional, collaborative, inclusive and accessible-focused helps our team contribute to Hack the North as a whole. As long as you’re communicating and you have an efficient design process, you’ll be able to provide great visual experiences for your hackers!

Hack the North is scheduled for January 15–17, 2021 🎉

Sign up for our mailing list at hackthenorth.com to hear the latest from Hack the North! ⚙️

--

--

Hack the North

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