Leading the design team to create our most interactive website yet with 30,000 views!

At UofTHacks, a 550+ student hackathon, we drive innovation with every iteration of our event.

As a student-run hackathon, our mission is to bring together students from diverse backgrounds to build, learn, and collaborate during our annual event. Each year, we design our website to reflect that energy and excitement—engaging users and encouraging them to apply.

In just 4 months, our team transformed this year’s website with 12 interactive animations, up from 2 last year, proving how designer–developer collaboration drives engaging digital experiences.

With the refreshed brand and website, more hackers engaged with our platform than ever before!

Before starting to brainstorm our approach for this year’s hackathon. I wanted to get better insight into the main site in particular by getting feedback from students.

With such short visits, we focused on a concise, visual landing page that highlights our brand and encourages users to apply.

With Identity as our theme, we aimed to capture a strong sense of expressiveness in the visual design. Early exploration helped us determine where we could push that expressiveness before refining the final direction.

Our early ideas aligned with the theme, but there was a disconnect between the concepts and the website’s flow.

Instead of treating animations separately, we used a narrative to shape the overall website — this made ideation faster and more cohesive.

We landed on avatar customization to let users define their own stories, supported by an illustrative style that emphasized creativity and expression.

Compared to last year, we pushed website animation further. Two animations were created in After Effects; the rest were coded. For a smoother handoff, my team provided prototypes, annotations, and animation references.

During development, we ran into performance issues from large illustration files and browser/animation limits. Since our pixel-based illustrations didn’t convert well to SVGs, we used WebP files to optimize file size.

Some animations were simplified or had alternative images or versions on Safari and mobile for performance and breakpoint compatibility.

As a tech hackathon, our goal is to always evolve and keep pushing the boundaries of what students can do. We reached over 30,000 website views, more than doubled our social media engagement, and received 3,500+, more applications than ever before.

It was my first time leading a design team, and through many learning curves, team brainstorms, and cross-collaboration with the design team, development and leadership, we pushed ourselves to create something truly unique to our brand. The experience taught me a lot about design management, planning at scale, and the value of clear communication across teams.