Improving mentorship for participants at in-person hackathons with HackerHelper
During this month-long class project, I led the interface and interaction design for a help request ticketing system that facilitates communication between participants and mentors at in-person hackathons. I worked alongside two teammates — a UX researcher and a UX writer.
Team
Christina Raganit (Product Designer)Celine August Santoso (UX Researcher)
Gurnisha Rehal (UX Writer)
My Roles
Product Design, User Interface Design, PrototypingDuration
July 2024 (1 month)
Background
A hackathon is an event where students create tech projects to solve challenges within a set time, like 24–72 hours.
I love doing hackathons, so I sought to enhance the hackathon experience by first understanding the goals, behaviors, and needs of the kinds of people who are involved in these events.
Who's who at a hackathon?
Hackers
Event participants who collaborate in teams with other hackers to develop projects
Mentors
Experienced professionals or upper-year students who provide guidance to hackers
Organizers
Students responsible for planning and managing the hackathon
Scaling up Simon Fraser University's largest hackathon
For this project, our team partnered with SFU Surge. Their primary goal is to scale up StormHacks, their flagship hackathon, without a significant decline in hacker experience.
The organizing team at StormHacks 2024. Christina is at the very top right!
Problem
The current system for requesting mentor help is error-prone, often resulting in unanswered requests.
SFU Surge uses Discord for all of its hackathon communications and announcements. To ask a mentor for help, hackers need to send a message in a public Discord channel filled with a lot of messages.
Pain Point #1
At large hackathons, help requests get accidentally missed due to the large volume of them.
Pain Point #2
Hackers don’t always know how to describe the problem they’re facing.
Pain Point #3
When a mentor can’t handle a request, trying to find someone who can, just clutters the chat more.
Design Challenge
How might we effectively connect hackers with mentors and ensure hackers receive the support they need in a timely manner?
Solution
HackerHelper connects hackers with mentors, helping them get the support they need faster.
This web application is designed to be responsive on both desktop and mobile, allowing hackers to submit help requests from their laptops while mentors can view new requests on their mobile devices as they assist hackers around the venue.
Hiccup the Hacker gets stuck on a CSS problem and requires mentor assistance.
From our mentor interviews, we learned that hackers often struggle to explain their issues clearly, making it hard for mentors to help efficiently. Guided prompts ensure Hiccup collects the right details for mentors to solve problems faster.
Marley the Mentor has some experience with CSS, so HackerHelper recommends Hiccup's request to Marley.
Marley accepts the request, informs Hiccup that they are on their way, and heads for Hiccup’s location.
Unfortunately, Marley can’t solve the issue, but Sunny might be able to help!
Marley refers Hiccup’s request to a new mentor.
Hiccup marks the request as complete and sees a dialog request for feedback.
Hiccup also decides to give feedback to Marley so he can improve.
Results
HackerHelper received a very positive reception from hacker and mentor testers.
I think HackerHelper would be really useful. It makes it much easier for hackers to connect with mentors, and for mentors to communicate with each other. I would love to see this implemented for future hackathons.
Anonymous Mentor
User Tester
HackerHelper aligns with the goals of SFU Surge, enabling them to scale their events.
As our hackathons at SFU Surge scale in size, I want to make sure that our hackers have the tools they need to thrive. HackerHelper is exactly what we need.
Matthew Wong
President of SFU Surge
Learnings
Figma has significant limitations in prototyping.
For example, it doesn’t support user input, making it difficult to test interactions like adding skills during mentor signup. I’d like to explore prototyping tools that handle these interactions better.
A development background makes a huge difference when designing interactions!
For example, when a teammate suggested comma-separated input when adding skills, I proposed a less error-prone method based on past development experience. Testers found it easier to use, and I was glad to see the interaction was technically feasible.