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
Team
2 developers, 1 designer
Background
What is HooHacks?
HooHacks, the largest hackathon in Virginia, brings together 850+ 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. Having a recruitment website showcases our brand personality and creates a centralized Hoohacks experience
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
✅ Beautiful UI with distinguishable characters
✅ 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
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 also added a vector drawing of the Rotunda I created with Figma Draw to visually anchor the homepage in UVA’s identiy and create an immediate sense of place for visitors.
Version 1
Version 2
I used this 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,
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, and 40% of people applied through the website.
Reflection
Conclusions & Next Steps
I learned how to design for developers.
Learning Figma's auto layout and components enabled a cleaner, more implementable design in the second iteration compared to the first. The first iteration of the website design was my very first project in Figma, so it was cool to see how much I improved.
Building Blocks
I plan to further iterate on the website by adding more historical content about the club and better UI (HooHacks owl mascot?)
@2025 Aryaa Deshpande
