Rebranding Hack the North Part I - Creating a 2018 Brand
Hack the North is an annual Hackathon held at the University of Waterloo.
Each year it brings in over 1000 students from all six continents around the world to a 36 hour event where participants get the chance to create, design and execute anything they want.
As a designer to this year’s event, I wanted to share some of the fun and unique things that I help contribute to!
The Goal
Hack the North is built upon four main pillars which encourages participants to
“Always be Humble Authentic Collaborative Keen, always be H.A.C.K.ing.”
In previous years, Hack the North was mainly attributed with a blue theme which was designed to appear professional, clean, formal and appeal to sponsors.
A Screen Capture of the 2017 Website frontpage
However, as we prided ourselves in having a diverse set of attendees with a diverse skill-set, we ultimately wanted this year’s re-brand to focus on and celebrate all these differences as well as the attendees themselves.
But how was this achieved? Our team begun by examining the target audience.
The Attendees
Since the attendees of Hack the North spanned such a diverse range or background and skillset, the team settled on having a variety of colors as opposed to one dominant hue to celebrate such diversity.
Some of our early explorations emphasized bright contrasting colors as well as how illustrations would be integrated into the site.
Some of our early explorations for branding mocked using InVision, Sketch and Figma.
We ultimately veered away from darker palettes & combined the layouts of the top left and bottom left illustrations.
Branding
A Palette for fonts and color
Lighter & brighter colors were chosen to set a more playful mood. We kept to lowercase lettering for titles and subheadings to appear less intimidating to the site viewer.
A progression from low to high fidelity of our homepage.
Instead of using photographs, we chose to create illustrations that emphasized the assortment of skills and opportunities within the event.
Alternating text regarding the different opportunities at Hack the North were also added. They cycled through the front page to complement the message of the illustration.
A collage of some of the illustrations that were used on the webpage
Animating the central illustration was also a focus as we wanted to have more interactivity and engagement between the viewer.
Reoccurring Themes
E5 Tilings
Elements unique to the University of Waterloo such as the checkered tiling (present in our Engineering 5 building) were incorporated to create a relation between the physical location and the event.
In addition, they bridged the transition between text and illustrative works within our assets.
An image of the Engineering 5 building where the event is held every year.
Our recreation and simplification of the tiling.
Tilings were used as a background element to bring unity to the page.
Gears
The second reoccurring motif was the animated gear. These gears are found in our web-page as well as social media assets.
the team wanted to keep some remnant of the previous branding(s) as we thought that they would provide some familiarity to and otherwise sudden change in brand.
Designing with Accessibility
Another issue that was kept in mind while designing was to adhere to WCAG (Web content Accessibility Guidelines).
How our homepage would appear to viewers with visual impairments.
So we made sure low contrast images did not affect the overall flow of the web page, if they were included. And that text had certain sizing restrictions.
Hacker Stories
By putting such a focus on the hacker themselves, the not only did the visual branding of Hack the North need to reflect this change, the content of the site did as well.
The way we chose to implement this was to create a section dedicated to testimonials and experiences shared by previous attendees at Hack the North.
The purpose of this was to engage the viewer on a personal level, have them relate to these stories whether it was from experience or an emotional level.
We wanted to emphasize the attendees of Hack the North.
Mockups of hack Stories for different screen sizes.
Although many other grid layouts were considered, ultimately, we settled on a carousel scroll gallery.
Each photo alternated automatically and the user was given a loading prompt at the bottom to indicate when it would slide to the next story.
This automated sliding process signified that there were multiple hacker stories as well as minimizing the amount of work the user had to do to view them.
The Final Product
Overall, it was quite a learning experience and I’ thankful for the opportunity I recieved to work on an amazing project with some amazing people.
