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

UofTHacks is an annual 550+ student hackathon at the University of Toronto. Each year, we redesign our landing page around a new theme to keep the brand fresh and encourage student applications.

Building on previous years, I saw an opportunity to move beyond a static website experience, using storytelling, interactions, and animation to create something more engaging.

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 brainstorming our approach for this year’s hackathon, I gathered student feedback through surveys and user interviews to inform improvements to this year's landing page redesign.

With such short visits, I led my team in creating a concise, visually engaging landing page that highlights our brand and drives applications.

With Identity as our theme, we explored ways to capture a strong sense of expressiveness through the visual design. Early exploration helped us understand how far we could push that expressiveness before refining the final direction.

Our early ideas aligned with the theme, but the story, user flow, and animations lacked a cohesive narrative.

To address this, I refocused the team on defining the story first, which made ideation faster and resulted in a more cohesive user experience.

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 development 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 could not be converted into true SVGs, we used Webp image files and Webm videos to optimize file sizes.

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+ applications, more 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. This experience strengthened my ability to manage design at scale, plan effectively, and prioritize clear, early communication across teams.