Product design
Hackathon App
Hackathon App
Hackathon App
Hackathon App
Year:
2025
Industry
AI / Community / Hackathons
Duration:
3 months
The Strategic Objective:
The Strategic Objective:
To build a high-velocity ecosystem that solves the "Lonely Founder" problem. My goal was to facilitate seamless Team Matching, provide instant access to hackathon goals/materials, and create a structured flow for Project Submissions.
To build a high-velocity ecosystem that solves the "Lonely Founder" problem. My goal was to facilitate seamless Team Matching, provide instant access to hackathon goals/materials, and create a structured flow for Project Submissions.
The progress bar and checklist acted like a 'North Star' - it took the anxiety out of a difficult start and replaced it with a clear mission.
The progress bar and checklist acted like a 'North Star' - it took the anxiety out of a difficult start and replaced it with a clear mission.
The Challenge:
The Challenge:
The team was building for a 60% "Developer" audience that didn't exist. My research revealed that 84% of our users were actually non-technical Managers and Owners. The challenge was to strip back the technical noise and solve the 38.9% "Not sure where to start" barrier identified in my survey
The team was building for a 60% "Developer" audience that didn't exist. My research revealed that 84% of our users were actually non-technical Managers and Owners. The challenge was to strip back the technical noise and solve the 38.9% "Not sure where to start" barrier identified in my survey
The Design Goal:
The Design Goal:
The objective was to provide immediate visibility into progress, foster community engagement through gamification, and simplify the discovery of new learning paths.
The objective was to provide immediate visibility into progress, foster community engagement through gamification, and simplify the discovery of new learning paths.
The Central Hub: Hackathon Dashboard
The Central Hub: Hackathon Dashboard
I implemented a persistent Hackathon Progress bar to provide immediate orientation. By combining a real-time Countdown Timer with an Onboarding Checklist, I ensured that participants are nudged toward action without feeling overwhelmed.
I implemented a persistent Hackathon Progress bar to provide immediate orientation. By combining a real-time Countdown Timer with an Onboarding Checklist, I ensured that participants are nudged toward action without feeling overwhelmed.
Insight: I added "Achievements" and "Leaderboards" as retention layers, transforming a technical event into a gamified professional experience.
Insight: I added "Achievements" and "Leaderboards" as retention layers, transforming a technical event into a gamified professional experience.
Terminology Pivot: Clarity Over Branding
Terminology Pivot: Clarity Over Branding
I dedicated a clean, modular layout to the Mission and Challenge Focus Areas. By visualizing the Prizes and a linear Event Schedule, I established clear expectations and high stakes from day one.
I dedicated a clean, modular layout to the Mission and Challenge Focus Areas. By visualizing the Prizes and a linear Event Schedule, I established clear expectations and high stakes from day one.
Insight: This ensures that the 14.3% of Developers and 25.4% of Managers align their projects with the business goals of the GenAI Protocol.
Insight: This ensures that the 14.3% of Developers and 25.4% of Managers align their projects with the business goals of the GenAI Protocol.
Frictionless Team Discovery (Swipe Mode)
Frictionless Team Discovery (Swipe Mode)
I engineered two discovery modes: a traditional "Teams for You" list for analytical searching and a low-friction "Swipe Mode" for rapid member matching.
I engineered two discovery modes: a traditional "Teams for You" list for analytical searching and a low-friction "Swipe Mode" for rapid member matching.
Aha! Insight: The Swipe Mode reduces "profile fatigue," allowing users to make quick decisions based on Matching Skills tags, which I prioritized to show instant compatibility.
Aha! Insight: The Swipe Mode reduces "profile fatigue," allowing users to make quick decisions based on Matching Skills tags, which I prioritized to show instant compatibility.
The Recruitment Engine: Team & Mentor View
The Recruitment Engine: Team & Mentor View
To facilitate high-quality team formation.
To facilitate high-quality team formation.
Design Decision: In the Team Detail view, I prioritized the "Look For" tags. This allows designers and developers to find exactly where their skills are missing, reducing rejection rates.
Design Decision: In the Team Detail view, I prioritized the "Look For" tags. This allows designers and developers to find exactly where their skills are missing, reducing rejection rates.
Mentor Access: For the Mentor list, I focused on Availability and Role transparency. This ensures that teams can find the right expert support exactly when they hit a technical bottleneck.
Mentor Access: For the Mentor list, I focused on Availability and Role transparency. This ensures that teams can find the right expert support exactly when they hit a technical bottleneck.
Project Execution: Submission & Tracking
Project Execution: Submission & Tracking
Before this design, participants used a manual Google Form that led to a 40% error rate in submissions. Teams often forgot critical files, misidentified their group members, and provided broken links. My goal was to build a guided flow that ensures 100% data integrity while reducing submission anxiety.
Before this design, participants used a manual Google Form that led to a 40% error rate in submissions. Teams often forgot critical files, misidentified their group members, and provided broken links. My goal was to build a guided flow that ensures 100% data integrity while reducing submission anxiety.
Step 1: Project submission
Step 1: Project submission
The dashboard provides a clear 'Submit Project' ensuring users only initiate the flow once they reach the final submission stage.
The dashboard provides a clear 'Submit Project' ensuring users only initiate the flow once they reach the final submission stage.
Step 2: The Guided Input & Validation Sidebar
Step 2: The Guided Input & Validation Sidebar
I created a structured form with verified team management and a required asset checklist to replace error-prone Google Forms and ensure accurate submissions.
I created a structured form with verified team management and a required asset checklist to replace error-prone Google Forms and ensure accurate submissions.
Step 3: Live “What You See Is What You Get” Preview
Step 3: Live “What You See Is What You Get” Preview
Teams can review their project’s appearance and links before publishing, reducing errors and submission anxiety.
Teams can review their project’s appearance and links before publishing, reducing errors and submission anxiety.
Step 4: Professional Project Showcase
Step 4: Professional Project Showcase
Submissions become standardized, high-quality project pages that track hackathon progress and serve as lasting proof of work for portfolios.
Submissions become standardized, high-quality project pages that track hackathon progress and serve as lasting proof of work for portfolios.
Redesign
Redesign
Refined the initial legacy-based UI into a clean, contemporary design system.
Refined the initial legacy-based UI into a clean, contemporary design system.
Before
Before
After
After
Result:
Result:
I designed a hackathon app with a clear dashboard roadmap, business-aligned mission structure, fast skill-based networking, transparent mentor access, and a structured project showcase, turning beginner uncertainty into guided execution and short-term participation into long-term portfolio value.
I designed a hackathon app with a clear dashboard roadmap, business-aligned mission structure, fast skill-based networking, transparent mentor access, and a structured project showcase, turning beginner uncertainty into guided execution and short-term participation into long-term portfolio value.
Next Projects
Next Projects
Next Projects
