For many students, their first hackathon feels intimidating.
DubHacks 2025 reimagined the hackathon experience through childhood nostalgia, transforming the website into a playful bedroom world that invites curiosity, creativity, and exploration.
DubHacks
2025 Website
Designing a playful, beginner-friendly hackathon experience
ROLE
Product & Visual Designer
Team
Medha Rawat
Ariana Cao
Annie Chang
TIMELINE
9 months · 2025
OVERVIEW
Website for PNW's largest annual hackathon
DubHacks is the largest collegiate hackathon in the Pacific Northwest. For DubHacks 2025, our team wanted to make the event feel more welcoming to beginners — especially freshmen and non-technical students.
Data from the previous year revealed a pattern:
Most participants were upperclassmen and male, suggesting the event could feel intimidating for newcomers.
Our challenge became:
How might we design a hackathon experience that feels welcoming, playful, and accessible — especially for students who may not yet see themselves in tech?
As part of the design team responsible for defining the event theme and visual identity, my role focused on shaping the storytelling and designing the website experience that would set the tone for the entire event.
jump to final design
CONTEXT
Participation trends revealed a barrier
Data from the previous year showed most attendees were:
upperclassmen
male
experienced in tech
This raised an important question:
The website would be the first impression of the event, making it a critical opportunity to reshape that perception.
500+ hackers attend DubHacks annually, yet the platform had zero support for self-expression or meaningful connections.
DISCOVERY
HOW MIGHT WE
How might we make DubHacks feel welcoming to beginners and students who may not yet see themselves in tech?
Our Research Approach
Hacker Surveys
Distributed post-event surveys to capture pain points around team formation and the overall hackathon experience at scale.
Stakeholder Interviews
Spoke with organizers, mentors, and sponsors to understand what information matters most when interacting with hackers.
Competitive Analysis
Evaluated Devpost, MLH, and Devfolio profiles to identify gaps in how hackers represent themselves on existing platforms.
We found these insights...
What we uncovered
01
Team formation was the #1 source of anxiety — hackers wanted to show their skills before the event, not pitch themselves in a crowded room.
02
Returning hackers had zero continuity. No history, no connections preserved, no sense of growth from year to year.
03
Sponsors and mentors wanted a quick way to understand who hackers are — but existing tools gave them nothing beyond a name.
04
Hackers craved community. Many described the event as transformative but felt disconnected once it ended.
@hacker_anon · DubHacks Slack
"I showed up solo and spent the first 2 hours just walking around asking people what they knew. Felt like a job fair with no resumes."
@first_time_hacker · Post-event survey
"I wish I could've seen people's skills beforehand. I ended up on a team where everyone was a frontend dev and nobody could touch the backend."
GOALS
Three north stars for the profile.
01
Self-expression
Give hackers a rich, personal space to share who they are — skills, interests, links, bio — so they feel represented, not reduced to a name tag.
02
Connection
Surface profiles at the right moments — during team formation, networking, and event activities — to make finding the right people effortless.
03
Continuity
Create a persistent identity that grows with each DubHacks event. Your profile should reflect your journey, not reset every year.
PROCESS
From sticky notes to shipped screens.
We started with rapid sketching sessions, exploring different mental models for how a hacker's identity could live within the platform. Early ideas ranged from a LinkedIn-style profile to a more playful "trading card" concept. We quickly realized the profile couldn't just be a static page — it needed to be woven into every touchpoint: the leaderboard, team formation, the schedule, even the DubCoins store.
Our first high-fidelity attempt tried to pack everything onto one screen — bio, skills, schedule, DubCoins balance, team info. User testing revealed it felt overwhelming. Participants said it looked "like a dashboard, not a person." That feedback was the turning point.
We pivoted to a layered approach: a warm, visually-led profile header (banner + avatar + key details) with content organized into clear, scannable sections below. The pink banner became a signature element — tying the profile back to DubHacks' energetic brand identity.
Left: initial sketches. Center: the dense dashboard version we scrapped. Right: the human-centered profile we shipped.
DESIGN DECISIONS
Three choices that shaped the profile.
01
The pink banner — brand as belonging
Research showed hackers wanted to feel like part of something bigger. By anchoring every profile with DubHacks' signature pink, we turned a utilitarian page into a badge of membership. The banner wasn't just decoration — it signaled "you're one of us."
02
Skills as tags, not text — enabling scannable matching
During team formation, hackers needed to assess potential teammates at a glance. Rendering skills as color-coded tags (vs. a paragraph or list) let users compare capabilities instantly without committing to a deep read. This directly addressed the #1 pain point from our survey.
03
Micro-copy that speaks human — not platform
Working closely with the content team, we rewrote every label and prompt. "Enter your biography" became "Tell us about you." "Select technical competencies" became "What do you build with?" Small shifts that made onboarding feel like a conversation, not a form — and reduced profile abandonment during setup.
PROCESS
The Hacker Profile, in full.
A personalized identity layer that lives across the entire DubHacks platform — from registration through the event and beyond.
Profile Header & Identity
A warm, brand-forward header featuring the hacker's avatar, name, school, graduation year, and social links — all at a glance. The pink banner creates instant visual belonging.
Skills & Interests Grid
Categorized, tag-based skills let teammates quickly assess compatibility. Interest tags surface shared passions — because great teams are built on more than tech stacks.
DubCoins & Engagement
Profiles showcase each hacker's DubCoins balance and activity — earned through attending workshops, helping peers, and completing challenges. Gamification that rewards participation, not just output.
Team Formation Integration
During the 'Connect' phase, profiles are surfaced as cards — filterable by skill, interest, and availability. Users said finding teammates went from 'awkward speed-dating' to 'browsing people you'd actually want to work with.'
IMPACT
What changed.
67%
Profile completion rate
67%
Profile completion rate
67%
Profile completion rate
67%
Profile completion rate
[INSERT: Reflection paragraph — What surprised you about how hackers used the profile? What did you learn about designing identity systems? How did this project change how you think about community-driven design?]
[INSERT: If real metrics aren't available yet, describe qualitative outcomes — what did usability testing participants say? What did organizers and sponsors observe?]
NEXT STEPS
Where the profile goes from here.
67%
Profile completion rate
67%
Profile completion rate
67%
Profile completion rate
67%
Profile completion rate
01
Cross-event persistence
Let profiles carry across DubHacks events and potentially other MLH hackathons — building a portable hacker identity.
02
Richer social features
Add direct messaging, team invitations from profiles, and the ability to endorse skills — turning profiles from pages into relationships.
03
Post-hackathon showcase
After the event, profiles become project portfolios — linking completed projects, photos, and awards to the hacker's identity for future reference.
Hackathons are 24 hours, but the people you meet and the things you build can last a lifetime. This profile is just the beginning of making that real. 💛