2025 HackBeanpot Website Redesign: From 0 to 100%
PROJECT OVERVIEW
As the UI/UX design lead, I guided a team of four designers to redesign the HackBeanpot website with a “Roadtrip” theme to create a digital experience that embodied our values of community, adventure, and exploration.
By strategically reimagining the branding and site structure, we solved key accessibility and navigation issues, which turned the website into a user journey that prioritized both usability and aesthetics.
ROLE
UI/UX Design Lead
TIMELINE
Aug 2024 - Present
SKILLS
Visual Design
Interaction Design
Brand Design
Project Management
Design Mentorship
TOOLS
Figma
Adobe Creative Suite
Slack
THE PROBLEM
The 2024 hackathon website was challenging to navigate in terms of interaction AND visual design.
VISUAL DESIGN PROCESS
EXPLORATION
MOODBOARDING THEMES
FINAL THEME DEVELOPMENT
Although other theme ideas were interesting, by popular vote, Roadtrip was our ⭐ winner ⭐, perfectly fulfilling our visual, experiential, and value-driven objectives.
Creating a more organized and engaging experience started with finding a new 2025 theme.
Visually, the color palette and theme blended together without enough contrast or emphasis, which made it difficult for users to stay enagaged.
From an interaction standpoint, the single-page design and absence of distinct sections made it hard to locate specific information efficiently.
BRAND ASSETS
BRAND STRATEGY
Bold, friendly headings in ‘Wilden’ make an impact, while ‘GT Walsheim’ keeps body text clear and easy to read.
The colors—‘Granola Beige,’ ‘Pondering Mint,’ and ‘Road Sign Purple’—evoke a sense of warmth and exploration.
Design illustrations—cars, maps, and camping gear— build on the roadtrip vibe, adding a friendly, engaging feel as users browse.
INTERACTION DESIGN PROCESS
LOW FIDELITY SCREENS
With the theme collateral developed, next up was the UI/UX of the website(s).
HIGH FIDELITY SCREENS
KEY UI/UX DESIGN CHALLENGES → CHANGES
The transition from low fidelity to high fidelity didn’t happen overnight.
The wire framing process for the new and improved 5-page site took just under 2 months to fully build out, w/ several mid-fi screens padding our process. Here are some of the key design improvements made along the way:
KEY VISUAL DESIGN CHALLENGE
CRAFTING A BETTER PROJECTS PAGE
The Last Year’s Projects section of the website is one of the most highly frequented sections (now a separate page) on our site. Prospective hackers visit this page to see what others have built in the past, gather inspiration, and learn about what it takes to win in one of our tracks.
Therefore, this page and its content needed to be visually captivating and intutive to navigate.
midfi #???
final hi-fi
UI/UX Research Insights → Solutions
People are lazy and attention is fleeting.
When people want to process information, they typically want to access and absorb that information as quickly as possible.
Information Design:
Users are more comfortable w/ processing information across skinnier & longer displays due to mobile interfaces being so popular.
SOLUTION:
Project Card Layout
The chosen project card displays information vertcially, making information easier to scan, and enables us to display 3 project cards within one row!
slow
fastttttt
KEY FOCUSES
Navigation: Seamless and intutive page layouts, clear entrance and exit points, improved nav bar
Outreach & Lead Generation: Clearer CTA to our social networks, prioritizing applications and sponsorship opportunities
Theme: Enforcing the "Roadtrip" theme throughout the site
Tech: Making designs that are efficient to develop for our tech team
Boring visuals = boring page = boring hackathon??? 👎 🍅
SOLUTION:
Color Usage: thoughtfully distribute branded colors
bland & uninteresting
sunshine & adventure!
What Happened to The Theme???
SOLUTION:
Thematic Elements: thoughtfully weaved in elements of the theme
Confusing Information Navigation
SOLUTION:
Double- Trouble: Providing multiple intuitive navigation options.
Inefficient Nav Bar
SOLUTION:
Improved Navigation Header: highlight the most important CTAs!
KEY INTERACTION DESIGN CHALLENGE
GRANULAR DESIGN DECISIONS
How can we promote the event’s sense of community and welcomeness throughout the website?
SOLUTION:
Ultra-immersive hero sections
The hero needed to SCREAM “Roadtrip” and all the joy and excitement that HackBeanpot offers to hackers.
The “Team” page needed to communicate how much the core team cares for our hackers and is experienced + willing to help!
TECH HAND-OFF
How did we ensure a smooth transition from the design team to the tech team?
SOLUTION:
Communication
ADDITIONAL DELIVERABLES
What other materials did we create?
Hacker Survival Guide
2025 design team <3
2025 full team
2024 design team
Merch
Social Outreach
REFLECTION
Gratitude
This UI/UX + Brand Design project is my most pivotal and foundational experience to date. Starting as a UI/UX engineer in 2023 to now being the UI/UX design director, this role has provided me w/ invaluable practice in crafting an idea + strategy from the ground up, advocating for my designs, mentoring other designers, and navigating the expectations of diverse stakeholders. Throughout this process, I have honed my skills in iteratively refining designs and addressing unforeseen design conflicts with agility.
HackBeanpot truly represents my most substantial end-to-end project(s) thus far, and the journey is still ongoing.
2024 tech team
2025 full team
What I learned
Do NOT skimp on brand design and design strategy.
When working on such a full cycle design development campaign, grind time starts from the very beginning. Focusing acutely on the design “mistakes” the team made in previous years, and constructing a thoughtful strategy to rectify them in this year’s design was pivotal.
FINAL PRODUCT