Hack the North
Product Designer · 2016
Hack the North is Canada's largest hackathon, hosted at the University of
Waterloo. We bring over 1,000 students from all over the world to create.
I work as a product designer and front-end developer for Hack the North. My
main responsibilities include redesigning our website, improving our brand,
and designing our internal tools. I also lead the development of some of
I started by imagining what kind of experience I wanted hackers to have at
Hack the North. What kind of experience are they expecting? Are they
expecting to have a lot of fun? Meet a ton of new incredibly passionate
The most important thing for me was that hackers knew that they could both
have fun and be surrounded with some of the best and most passionate hackers
from around the world. We wanted to look professional enough so that
attendees can also take us seriously.
After establishing the vision of Hack the North's brand, I did several
iterations for our event's website.
One of the first iterations on the website
We opted for a more simple approach, focusing less on the design and more on
the content. We also opted for less colors in our palette. Printing many
colors didn't fit our budget constraints, so we didn't want to create
inconsistencies between our print and digital assets.
A later iteration before applications were open
After establishing this visual design style, I reused this style across all
parts of our website, such as the rest of the landing page, press page and
code of conduct.
Mockups of parts of our website
Finally, here's a short demo of the landing page.
Demo of the website, implemented by Moaaz Sidat
Hack the North receives thousands of applications every year. In order to
figure out who we want to accept to the hackathon, many organizers spend
hours going through every single application and grade each applicant. Last
year, most reviewers went through a couple hundred applications.
Here's the demo of the final design. Below the demo, I discuss the decisions
that led to this design.
Demo of the review with fake questions
My task was to create an internal tool for the organizers to grade every
application. Last year, there were many complaints on its poor design.
I wanted to make sure that reviewers could spend all of their time reviewing
instead of battling with a bad UI. I set the constraint that all reviewers
would be working off of a desktop and not a mobile screen.
I started off by experimenting with different inforamtion layouts. Reviewers
needed access to the full application and to be able to grade them using a list
Criteria questions and application data are obfuscated for confidentiality
I received feedback from the team and consolidated how I wanted to organize
the criteria questions and the application data. I started to think more
about what actions the user could take with the tool. We wanted our tool
to allow auto-accept, reject, submit review and commenting.
I started to explore other ways of including the additional functionality. I
decided to sort the data from most important to least important. The user
should always be focused on looking for the answer for the current question.
The next is which part of the review they are at. Are they done? How much
more do they have left? Lastly, the applicant's data which also takes up the
Mockups of improved data organization and space
I wanted to design the interface such that the reviewer required as little
clicks as possible. Over the span of hundreds
of applications, I think this can save a ton of time for the reviewer.
To accomplish this, I found different ways of minimizing wasted space without
compromising on organization.
Mockup before implementation
As a developer, I also occasionally get my hands dirty with coding. I
implemented this mockup afterwards and then made several small UI
adjustments during development.
For the power (revi)users, I implemented keyboard shortcuts to allow reviewers to
review the whole application without using their mouse. For example, number
keys submit a grade, Command + Enter submits the application if all
criteria are answered, n goes to the next question and Shift + n goes to
the previous question (yay Vim shortcuts!).
I'm currently still working as a product designer for Hack the North. If
you're interested in learning more about my work and experience with Hack
the North, please send me an email at email@example.com