Project Brief
timeline
4 weeks
ROLE
UI/UX designer, Visual designer
TEAM
1 Designer + 4 Developers
tools
Figma, Adobe Illustrator
Overview
HackAI is AIS's flagship 24-hour hackathon bringing together 250+ students, sponsors, and tech leaders. Despite the event's scale, the previous website felt generic and failed to communicate why students should participate.
Through user research with 10 students and firsthand immersion at WeHack 2023, I identified three critical needs: immediate clarity, seamless sign-up, and trust-building design. The solution? A bold casino-themed redesign that drove a 262% increase in participation and established a visual foundation for future events.
Impact at a Glance
Understanding the User: Research & Discovery
HackAI Needed to Look as Ambitious as Its Vision
HackAI is AIS's flagship event—a 24-hour AI-themed hackathon that brings together students, sponsors, and industry leaders. Despite the scale and prestige of the event, the previous website didn't reflect this.
Real Voices, Real Frustrations
What Students Told Us
The first-time hacker: Needs encouragement, clarity, and onboarding
The seasoned coder: Wants speed, structure, and answers
Their needs shaped our homepage, navigation, and tone.
Empathy in Action: I Became the User
To understand the hackathon experience from the inside, I joined WeHack 2023—my first hackathon. Immersing myself in the event let me spot friction points and emotional highs that I brought back to HackAI.
Our team's design even won 1st place—proof that understanding the user experience deeply leads to better design outcomes.
From Research to Design Principles
The user research revealed clear patterns. Students needed more than just information—they needed an experience that felt trustworthy, exciting, and effortless from the first click. These insights became the foundation for every design decision.
What Great Hackathons Get Right (and Wrong)
I reviewed 9 top hackathon sites, rating them on four UX factors: design, navigation, event clarity, and accessibility. This analysis revealed patterns in what works—and what frustrates users.
User Journey & Wireframes
Close-up Storyboard:
Emily, the First-Time Hacker, Signing Up for HackAI
Sketching the Vision
Our process started with low-fidelity wireframes focused on the registration flow, schedule access, and mobile-first layout. The key decision: a single-page structure to minimize navigation friction.
Strategic Wireframe Decisions
Bringing the Vision to Life
From wireframes to high-fidelity design, every decision was guided by our research insights: build trust instantly, create anticipation, and remove all friction. The result is a website that feels as ambitious and exciting as HackAI itself.
From Narrow Concepts to Expansive Vision
The hero section went through multiple iterations before landing on the final design. The evolution shows how we moved from gimmicky single interactions to an immersive casino experience.
Variation 1: Slot Machine
Too focused on single element
Variation 2: Claw Machine
Still too focused on single element
Final: Casino Experience ✓
Creates a complete world
Why the Final Design Won
The first two concepts focused on a single interactive element—a slot machine and a claw machine. While playful, they felt too narrow and gimmicky, limiting the theme to one interaction.
The final design opened up the entire Vegas casino experience—neon signs, city skyline, multiple visual elements. This created a sense of scale, ambition, and possibility. By embracing the full casino environment, we built a world students could imagine themselves in, not just a single game to play. This approach directly addresses the research finding: "First impressions matter—users want to feel the theme and energy immediately."
Interactive Card-Based Tracks
Instead of overwhelming users with dense track descriptions, we transformed the information into an interactive card game—literally. Each track is represented as a playing card that reveals details on hover.
The Card Metaphor in Action
Front of card: Track name + suit symbol (♠ ♥ ♦ ♣) for instant recognition
Hover to flip: Reveals track details, description, and focus areas
Smart Schedule Design: Desktop & Mobile
The schedule is where users spend the most time during an event—constantly checking times, locations, and what's next. We designed for both pre-event planning (desktop) and day-of reference (mobile).
Key Features:
Auto-displays the current/relevant day without requiring clicks
Clear time markers and event categories for quick scanning
Export to calendar functionality for easy planning
Mobile Experience
Single-column, thumb-friendly layout
Visual hierarchy: Major events in bold, meals in lighter weight
The Site that Drives Real Engagement
The redesign didn't just look better—it performed better. From participation numbers to user satisfaction, every metric showed that the new design successfully solved the problems we identified in research.
< 10 sec
100% of test users found key info in under 10 seconds
4.8/5
Navigation satisfaction score from users
250+ participants
That's a 262% increase from the previous year
Design system
The redesign established a visual and functional foundation for future events
Real-World Impact
Big shoutout to the amazing team behind HackAI—couldn't have done it without you!
The Tech Team
By the Numbers
Reflections & Learnings
Challenges I Navigated
Tight Timeline
"We need the site live in 4 weeks for registration to open."
Solution: Focused on high-impact features first (hero, tracks, schedule, registration) and deprioritized nice-to-haves. Created a lightweight design system for faster handoff to developers.
Serving Two User Types
First-timers need encouragement; veterans need speed and efficiency.
Solution: Designed for progressive disclosure—surface-level info is instantly accessible (for Jayden), while detailed explanations are one click away (for Emily). Both personas get what they need without friction.
Bold Theme vs. Accessibility
Dark casino aesthetic could compromise readability and contrast.
Solution: Used high-contrast white text on dark backgrounds, tested color combinations for WCAG AA compliance, and ensured all interactive elements had clear focus states for keyboard navigation.
📚
What I Learned
This project pushed me to balance bold creative vision with real-world constraints—tight timelines, technical limitations, and diverse user needs. Here's what shaped my growth as a designer.
→
Collaborate with devs and organizers under real deadlines
→
Translate high-level goals into focused, user-first design
→
Balance theme, accessibility, and action
→
Next Steps
While the 2023 redesign successfully achieved its goals, there's room to evolve. Future improvements include adding dark/light mode toggle, refining mobile views across all sections, and building a modular design system that can scale across AIS's growing event portfolio.