HooHacks Website
Redesigning the club website to recruit new members. View the finished product at hoohacks.io
Tools Used
Figma
Timeline
July 2024-August 2025, 4 weeks
Team
2 developers, 1 designer
Background
Hoohacks: a top 50 collegiate hackathon
2,000 applicants.
1,000 attendees.
HooHacks, the largest hackathon in Virginia, brings together students, mentors, and industry partners each year to foster innovation and collaboration.
As marketing chair of HooHacks, the team behind Virginiaโs largest hackathon, I help manage a brand that reaches hundreds of students and dozens of sponsors annually.
My Role
I independently led a full redesign of the HooHacks website after identifying that it lacked a strong first impression for prospective members and was underutilized.
Problem Statement
How to effectively recruit and retain passionate individuals who can uphold the quality and growth of Hoohacks?
Goals
๐ Maintain the reputability of Hoohacks.
Cohesive use of brand colors, typography, and logo placement builds trust and familiarity for external partnerships that could benefit HooHacks, like sponsors
๐ช Establish a strong club identity.
๐ Recruit talented individuals.
Through effectively communicating our culture, values, and opportunities, individuals who are interested in career development will be able to use this website as a resource, and also streamlining the application process.
Target Users
External partners
Prospective club members
Hackathon participants
Research
Competitive Analysis
I conducted a quick competitive analysis on HackDavis, HackIllinois, and TreeHacks
HackDavis
โ Simple nav bar
โ Clean UI with characters with use of characters scattered through the website
โ Clear CTA on homepage to join
HackIllinois
โ Mission clearly stated on homepage
โ Team on homepage
โ States what each committee does
TreeHacks
โ Sponsors on home page
โ CTA on homepage to apply
โ Social proof with metrics
Simple navigation
Clear CTA to join
Clear mission statement
Clean and Impactful UI
Design
Explorations in Design
Making the UI More Impactful
In my first iteration of the design, I struggled utilizing our monochrome blue color palette in an impactful and visually pleasing way. As you can see in the second iteration, I used the exact same colors.
I added a vector drawing of the Rotunda I created with Figma Draw to visually anchor the homepage in UVA's identity.
Version 1
Version 2
I used this already established brand guide and colors for both designs. It was cool to see how the same colors can be used to create a completely different interfaces.
Meet the Team
Instead of having the user scroll down to see the people on the teams, implementing a scrollspy allows a perspective member to get an overview of the committees that we have and jump to the specific community they would like to see,
Design System
Nav Bar
Based on the competitive analysis, all of the nav bars had at most 3 tabs, so I simplified the nav bar in the redesign, with a CTA to join HooHacks.
I made our other two events, Ideathon and Estimathon, cards on the homepage instead of buttons in the nav bar to reduce visual clutter.
The Impact
An Increase in Applicants
I rushed to finish the redesign of this website before our 2025 club recruitment cycle.
Through our interest meetings, social media, and flyers, I heavily promoted the website.
This year, we got a record number of applicants. Last year we had 125 applications, this year we had 163 applicants. This is a 30% increase in applications!
Reflection
Conclusions & Next Steps
Designing for developers
Since I was frequently communicating with the tech team and helping them implement some features, I feel like in this project I truly understood how to design for developers through mastering Figma's auto layout and components.
Redesigning my own design to see how much I improved
Compared to my first iteration, which was also my very first project in Figma, the second iteration of the website showed significant improvement in structure and usability.
Adding an alumni tab and Hoohacks mascot
Moving forward, I plan to continue refining the site by adding more historical content about the club, such as an alumni tab, and enhancing the UI, potentially incorporating the HooHacks owl mascot as a visual element.
Hello! You made it to the end :)
Contact me
๐ 571-376-3007
