Leading the design team to create our most interactive website yet with 30,000 views!
Led product and visual design for UofTHacks' 13th edition—our most interactive and engaging site to date!
check it outMaking the hackathon experience more fun for 500 students
Crafted responsive, engaging, and user-friendly designs for the University of Toronto's 12th hackathon, including the official website and internal hacker dashboard.
- Timeframe
- 8 Months
- Role
- Product Designer
- Team
- 1 Lead Designer4 Product Designers
- Softwares
- Figma, Illustrator
CONTEXT
What is UofTHacks?
UofTHacks is one of Canada’s largest hackathons, bringing together top university students, from across Canada, for a 36-hour competition. Students build, design, and create innovative solutions at Canada’s top university located in downtown Toronto.
IMPACT AT A GLANCE
In 8 months, our team of designers and developers worked collaboratively to redesign our main website and hacker dashboard. Through our efforts to streamline information and create a unique web experience, we increased student engagement by 18%.
PREVIEW OF THE FINAL DESIGN
Designing a unique platform to centralize information and boost engagement
LANDING PAGE
Making it easy for students and sponsors to explore our event information through an immersive site.
HACKER DASHBOARD
Centralized tool for students to apply for our event, find mentors and teammates, information, and experience playful features.
DISCOVERY
Exploring new ways to enhance the user experience on our digital platforms
AUDIENCE
Designing to attract students and sponsors nationwide
The UofTHacks website draws the attention of over 2,000 students eager to learn more about the event. Additionally, our digital platforms serve as vital tools for attracting potential sponsors.
PAIN POINTS
Continously improving the user experience
Using insights from last year's post event survey and by talking with other students about their hackathon experience, here's what I learned:
The application process is tedious – there are a lot of questions
The brand reflects their interest when applying
Key information is difficult to find
PROBLEM STATEMENT
Increasing hacker engagement through the digital experience
Students want a clear and engaging digital experience that brings together essential hackathon details like dates, location, sponsors, and prizes without requiring them to navigate multiple platforms.
Design Challenge
How might we create a distinctive digital platform that simplifies access to essential information while standing out among other student-run events?
CONSTRAINTS
Planning one of Canada’s largest hackathon within 8 months
With only eight months to prepare, the design team quickly developed a new brand and produced assets across web, marketing, and logistics, while managing strict deadlines and production timelines.
ROLE
My role in shaping the designs
As a product designer at UofTHacks 12, I helped unify the visual identity across the website and dashboard, collaborating with 3 designers, our Design Lead, and the web team to ensure design alignment and timely delivery.
DEVELOPMENT
Developing the dashboard and landing page
Landing Page
I designed the Testimonials, Introduction, and Sponsorship sections to engage students and effectively communicate key information to both students and sponsors.
Hacker dashboard
I contributed to the design of the Team Finder, Mentor Schedule and Personality Quiz, tools designed to engage hackers and enhance their overall experience.
Iterating from past feedback
Incorporating last year's feedback from hackers, we implemented a team-finding system, further incorporated animal mascots into our Personality Quiz, and incorporated engagement features such as our Hacklife game.
Rebranding for a fresh perspective
We rebranded UofTHacks 12 around this year's theme Perspective, creating a fresh visual identity that set the event apart from other hackathons—using floating 3D elements and grids to add depth and visual interest.
Building out the Team Finder
I designed the 'Create a Team' user flow, enabling users to easily add members and form teams.
Initially, I received feedback that the toggle was unclear and hierarchy could be improved.
To make the buttons/features more obvious, I added a larger profile icon and a more defined toggle feature.
I redesigned the introductory section based off a previous iteration from our team.
For the intro section I used floating images and objects that burst to create a lively, dynamic feel.
During the initial design stages, I collaborated closely with the web development team to identify and define the information to include in the mentor schedule.
I experimented with card styles to optimize space utilization and refined the hierarchy of information for better clarity and usability.
Creating responsive interfaces
I designed various screens at different breakpoints to ensure responsive design across devices.
Designing modals and expanding the design system
I created modals for the pages I worked on to ensure consistency throughout our designs.
CONCLUSION
Bringing it all together: a unified digital experience for our 36-Hour event
Increased hacker engagement by 18%
By creating visually engaging designs and launching a user-friendly website and dashboard, we streamlined the hacker experience and boosted social media engagement—resulting in an 18% increase in applications, from 1,650 to 1,940.
FINAL THOUGHTS
Reflections and lessons learnt after the hackathon
Designing for UofTHacks 12 this past year was truly a rewarding experience. Working along side a creative team of designers and developers, we built a strong brand identity, created tools and assets for the hackathon. Rapid iteration and feedback made the process both challenging and fulfilling, especially seeing it all come together digitally and through event merchandise.
KEY LESSONS
Growing as a designer through each new lesson
Collaboration is crucial
Working closely with developers and designers taught me how clear communication keeps large projects feasible and aligned.
Consistency drives user experience
Maintaining standardized components showed me how consistency strengthens usability and brand cohesion.
Design within constraints
Accounting for technical and timeline limits helped me balance creativity with practicality.
VIEW THE LIVE SITE
uofthacks.comEvent Highlights
Check out my other case studies
Simplifying anti-money laundering compliance
An all-in-one anti-money laundering (AML) compliance software designed to streamline the FINTRAC reporting process for AML compliance officers.
check it out
