uOttaHack- Leading design for Ottawa's largest hackathon

  • Role Lead Designer (Visual Design, UI/UX Design, Print Design)
  • For uOttaHack
  • Type Visual Design, Branding, UI/UX
  • URL uottahack.ca
  • Duration Ongoing (6 months)

Intro

uOttaHack is the largest and only student run MLH (Major League Hacking) hackathon at the University of Ottawa and in the city of Ottawa.

After a successful first run last year, I saw an opportunity to use design to give back to my community and also empower awesome initiatives. I joined the team this year as the Lead Designer. I was tasked with reimagining the hackathon’s visual identity and the scaling that new identity to physical and digital assets with the goal of increasing the number of applications this year and overall visibility.

The Problem

How can we create a unique and identifiable visual identity for the hackathon, centered around our core beliefs and mission?

Goal

Create a new visual identity for the hackathon. This new identity included a new logo, font and color palette. Using this new identity, create a new website, marketing posters and social media assets.

One of the goals I set out to accomplish with the design for uOttaHack was breaking the mold of hackathons that use visuals that often present themselves as high energy or male-dominated. The team and I felt it was important that our hackathon reflect the diversity of our community and encouraged applicants who normally wouldn’t apply to apply.

Early Research

Starting this process, it was important for me to understand where the hackathon was now and where it was headed. As a new member of the team tasked with such a big challenge, I had questions about how to think about our vision and what mattered to us as a team and hackathon.

To establish some common language, I devised a 4 quadrant framework breaking hackathons down into 4 types:

  • For Prestige
  • For Learning and Fun
  • For The Crowds
  • For Practice

A hackathon’s place in any of the quadrants was based on 4 things I identified as a key to hackathon success. These pillars went on to become the x and y-axes of the framework. They are:

  • Technicality Level: What is the technicality level of projects we aim to produce at this hackathon?

  • Crowd Size: How many attendees?

  • Attendee Locality: What is our ideal mix of local city, neighboring city, out of province and international attendees?

  • Attendee Diversity/ Competitiveness: How diverse (technicality level, first-time hacker, educational background) do we want our attendees to be?

After sketching out a rough version of the framework and a few modifications, I made a higher fidelity version of the framework to demonstrate and use as a map with the rest of the team.

Insights and Learnings

On a retreat with the team using the map I developed, I led a design exploration session. I aimed to learn and break down

  • How each member of the team thought about our vision
  • Where they believed we were right now
  • What they believed to be our place in our community
  • How they envisioned design working with their functional unit.

I learned that,

  • It was important to all teams (especially marketing) that the process of requesting for new assets be simple.
  • Ultimately design would be taking a communication lens first.
  • Using word association, I learned that we associated uOttahack with words/phrases like, “bringing passions together”, “openness”, “closeness”, “common goal”.

Final Solutions

After establishing some common language with the team on the vision for the hackathon and its place in the community, I went ahead with the process of selecting color palettes and typefaces for the new visual identity that reflected what we agreed on.

Due to the time constraints of the hackathon, I didn’t have enough time to iterate through as many versions of color palettes, typefaces, and logos as I would as like. Some decisions had to come from my intuition of what would resonate with the team, the community we serve and my design sensibilities. Nonetheless, I am very satisfied with this version of our visual identity and the impact it made on the community.

Old hackathon logo

New hackathon logo

While I had settled on the main heart logo, I experimented with the idea of a collectibles version of the logo that our hackathon attendees could hunt down and attempt to find throughout the duration of the hackathon.

Drone version logo

Laptop version logo

Phone version logo

VR version logo

Hackathon Website

Once we had the visual identity settled upon, I set out on the task of designing the hackathon’s new website. I iterated on key parts of the site like the countdown timer, hacker stories and faq section.

This is my final design for the site 🔻

Countdown timer iteration

The team decided we wanted to have a countdown timer to the event to build up the hype, something we didn’t have in last years site. I went through about 4 iterations based on what was technically feasible and feedback from the team.

FAQ section iterations

For this section, we had previously identified that a lot of visitors to the previous site were from mobile phones. I iterated around what would be easy to for any visitor to go through when visiting the site from a mobile phone.

Other Design Assets

I also had the pleasure of designing print posters for the hackathon.

Our school community is also French, it was important that my designs worked in both English and French.

Final Version of the poster (English and French)