nwHacks 2022 Website Design

Overview

nwPlus is a student-led organization supporting aspiring programmers and designers, based out of the University of British Columbia (UBC). Each year, nwPlus organizes nwHacks, Western Canada’s largest hackathon which connects over 1000 student developers, engineers, and designers worldwide to collaborate and create projects. As one of the Lead Designers of this project, I was tasked with directing the overall theme and design of the nwHacks website.

Problem

As nwPlus’ flagship hackathon, nwHacks receives a new website design each year, which must engage hackers through a unique design and ideally, tell a “story” through the site’s illustrations. Additionally, the website design needs to include recognizable symbols or icons of the North West, which differentiates nwHacks from other hackathons.

The website project is collaborative: two Lead Designers spearhead the effort, the rest of the design team plays supporting roles, and interfacing with the logistics and developer teams is required to determine specifications and feasibility.

Process

1. Moodboarding and Assigning Roles‍

The project began with mood boarding, where each designer compiled a collection of images that they proposed for the website’s theme and design. From there, we voted on the best mood boards and consolidated the best images into a document that outlines the website’s design direction. Each designer is then assigned to a section of the website, with the Lead Designers responsible for creating the Hero page.

‍2. Lo-fi, Mid-fi, Hi-fi‍

Using the mood board images and design direction document, each designer worked individually on their assigned sections. We came together each week to critique each other’s designs, provide feedback, and ensure that each section transitioned smoothly into the others.

These sessions allowed the team to iterate efficiently and quickly through the lo-fi, mid-fi, and hi-fi stages. Team critiques also helped us determine if the design direction needed reworking and provided a place for the designers to learn from each other if we were stuck on certain technical or thematic issues.

3. Hand-off to Dev Team‍

After the hi-fi was completed, we worked with the developer team to facilitate a smooth hand-off of the Figma file. Layers were organized and clearly labeled, and sticky notes were added to the file if there were potential areas of confusion in the final design.

Solution

The final design of the nwHacks 2022 website was a futuristic underwater city, which drew inspiration from familiar West Coast icons (e.g. Skytrain, Canada Place, Vancouver House, etc.). Scrolling down through the website, the user would be taken on an immersive experience, entering the train station and diving into the streets of the underwater city. Our team received positive feedback on the website design from many attendees of nwHacks.

Challenges

• Narrowing the proposed themes down to a feasible and clear vision for other designers to understand.
• Determining a cohesive and attention-grabbing colour palette to be used throughout the website.
  
• Balancing between detail and clutter for the many illustrations on the website.
  

Key Learnings

• Don’t overdesign, keep it simple and compelling.
• Use design documents to communicate ideas and visions to other designers.
  
• Great design can define a user’s experience and perception of the organization or event.