Kelly Mark Logo

Product Design • Shipped 2025

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

Timeframe
4 months
Role
Lead Designer
Team
2 Product Designers, 1 Graphic Designer, 5 Software Engineers
Skills
Product Design, Visual Design, Prototyping, Frontend Development, User Research
CONTEXT

Transforming a hackathon landing page into an interactive experience

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 a memorable hackathon website that stands out from the rest.
PREVIEW OF THE FINAL DESIGN

Bringing the theme, Identity to life

VideoWalkthrough of the UofTHacks 13 site demonstrating interactive features, navigation, and key animations.
IMPACT AT A GLANCE

3,500+ applications

83% from 2024

30,000+ website views

10K from 2024

12 interactive animations

10 more than 2024

USER RESEARCH

Students want to see an interactive website showcasing past highlights, theme & sponsors

Before brainstorming our approach for this year’s hackathon, I gathered student feedback through surveys and user interviews to understand their experience with other hackathons websites and where there was room to improve.
Hacker #1 photo 1
What I want to see...

“Past years project winners (especially within the last 2 years)”

Hacker #1
Hacker #2 photo 1
What you can improve...

“Make it more creative and interactive”

Hacker #2
Hacker #3 photo 1
Why I apply to hackathons...

“If the sponsors are cool or if there is a cool theme to the hackathon”

Hacker #3
Design Challenge

How might we design a website that encourages students to apply, clearly communicates our event, and keeps navigation intuitive and effortless?

IDEATION

How can we create a memorable web experience that engages students and attracts sponsors?

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 the interactions before refining the final direction.

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

Image

Early feedback highlighted a disconnect between theme concepts and website flow.

To address this, I refocused my team on defining the story first, which made ideation faster and resulted in a more cohesive user experience.
User flow diagram showing narrative approach

Image

Information and visual flow of our landing page.

We landed on avatar customization to let users define their own stories, supported by an illustrative style that emphasized creativity and expression.
Our hacker portal provides access to applications and event resources, but unclear navigation made it difficult to find. Previous hackathon feedback highlighted an opportunity to improve discoverability.
Types of animations used in the project

Image

Feedback from students to improve navigation.
Types of animations used in the project

Image

Previous navbar and current navbar.

Enhancing website interactions with 12+ animations

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

Image

Different types of animations on our landing page.

Our website was more interactive, but low website performance made us rethink our approach

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 I created our video animations as a Webm format to optimize file sizes.
Color contrast comparison

Converting pixel-based graphics to SVG did not make them true vector graphics.

Color contrast comparison

Size disparity between png and webp files.

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

Animation compatability

Correct approach

Lack of webm animation compatibility with Safari.

Opted for a stagnant illustration on Safari.

Opted for a stagnant illustration on Safari.

Responsiveness

Correct approach

Desktop design

Opted for a stagnant illustration on Safari.

Mobile design

LOOKING FORWARD

Pushing designs to create a refreshing brand that engages more students than ever before!

Students can shuffle through past event photos...

VideoDragging through polaroids featuring photos from last year's hackathon.

choose their unique avatar...

VideoClicking through a selection of animal avatars.

explore student testimonials and more!

VideoTrain carousel animation that shuffles through three student testimonials from our past event.

Embracing new challenges to build something special for UofTHacks 13

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.
Rendering problems our team faced.

Image

Analytics for our landing page over the course of our campaign.
KEY LESSONS

Taking on a new role and pushing the boundaries of design and development

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.

Never hold onto ideas tightly

This project was a roller coaster of pivots and back-and-forths with my team and development. Balancing branding and product design meant constantly stepping back to see the bigger picture, reassess decisions, and adapt as the project evolved.

Taking charge when needed

With many designers and ideas, I learned early on to be decisive about direction and timelines, preventing discussions from going in circles.

Communication early is key

This was our first time working on a wide range animations for the web, so communicating early with the front-end lead, creating code mockups, and building design prototypes helped the team gauge feasibility and understand technical constraints.

VIEW THE LIVE SITE
uofthacks.com
HackCon photo 1
HackCon photo 2

Some of my favourite memories from UofTHacks

Image 1: Hanging out with the team at Major League Hacking's organizer event, Hackcon. Image 2: Photo with my team taken using our virtual photobooth.

Decorative flowers

Crafting delightful designs through creativity pencil & intent stamp

Designed and coded by me

Navigation

HomeWorkAboutPlayground

Let's Connect!

LinkedInGitHub