Hack the North
Refreshing the brand for Canada's biggest hackathon: now bolder yet friendlier.
Art director, UX/UI designer, Print designer, UX mentor
Sketch, Adobe CC, Figma, Marvel
February 2017 to present
New branding for Hack the North, website design, sponsorship package print design, and an application flow. Check out Hack the North.

Hack the North is a student-run hackathon (or an event that spans 36 hours for student hackers to build something using software, hardware, and design) hailing from the University of Waterloo. Hack the North is all about bringing together people who want to learn, teach others, and collaborate together to build something incredible. So, making Hack the North a big event every year is a must and it never fails to become one.

"Bringing together people who want to learn, teach others, and collaborate together to build something incredible."
Hack the North is an inclusive, fun, and prestigious event. Balancing qualities of fun and prestige was important in terms of setting the voice and branding of Hack the North 2017.

Ambiguity was the first wall I faced when designing the website for Hack the North. As with any design, turning words or emotions into concrete visual forms is a struggle, and this is exactly what we went through. Various iterations were done to create a landing page with a mix of fun and prestige. In the end, we went with something subtle, yet bold and friendly.

HTN Wesbite iterations
Early explorations for the Hack the North 2017 website hero.
After getting feedback from the explorations I did, I settled that Hack the North's branding should be centred around its people—the hackers, mentors, sponsors, and speakers. Focusing on the idea that Hack the North is built by the great people behind it, I moved forward with the idea of using the Hack the North logo gear as a mask on moving images or videos.
A static mockup of what is now Hack the North's website hero for 2017.

Style guide of the first version of hackthenorth.com
The placement and colour of the visual components is the result of control of emphasis. First, the exaggerated gear exists as a play on both emphasizing (and de-emphasizing) our brand and the people in Hack the North. Think of the gears as an appetizer. The emphasis on it quickly dissipates as the user gets enticed to look for the next piece to consume. So, the gears are meant to prime the user before it leads them to the main course, which is “Hack the North", the blurb, and the call to action.
"So, the gears are meant to prime the user before it leads them to the main course, which is 'Hack the North'."
In this stage, I worked closely and mentored Kevin Chan, who worked on the structure and design of the website below the hero. I helped him with generating creative ideas by creating a matrix of visual web components against How Might We questions, or opportunities in which we can hit our branding goals. A visual matrix easily initiated connections between artistic components and product goals, illustrated in various permutations.
My next project was the sponsorship package, which is a digital and print package we provide to companies who are interested in sponsoring Hack the North. Following the branding of the website above, the resulting package resonated with the bold and friendly website, but as well as prestige through the information emphasized in the package. The back cover has the other side of the gear logo, making it whole when opened.
Front cover and some pages of Hack the North's sponsorship package.

Application flow
I'm currently designing the application flow for students to apply for Hack the North this year. Check back, it's coming soon!
Previous project / Wealthsimple
Next project / Wyatt