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 our projects.
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 people?

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
Application Review Tool
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 of criteria.
Note: Criteria questions and application data are obfuscated for confidentiality purposes.
Different explorations of the review tool
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 most space.
Mockups of improved data organization and space usage
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 andy.zhang@uwaterloo.ca!