HackerHelper
HackerHelper
Case Study
6 min read
At hackathons, mentorship support often uses inefficient processes. Participants struggle to find the right mentors, communication is disorganized, and many requests are left unanswered. To solve that problem, we created HackerHelper, a ticketing platform designed for organizers to streamline and optimize mentorship support. The solution helps facilitate communication, track help requests, and increase overall satisfaction to drive higher mentor and participant retention. This solution was given to SFU Surge for implementation.
Role
Role
Product Design, UX Research
Lead, Wireframing, Visual Design,
Illustration, Motion Design
Product Design, UX Research
Lead, Wireframing, Visual Design,
Illustration, Motion Design
Timeline
Timeline
July - August 2024 (1 Month)
July - August 2024 (1 Month)
Course
Course
IAT 334 - Interface Design
IAT 334 - Interface Design
Team
Team
Christina Raganit (UI Designer)
Gurnisha Rehal (UX Research
Assistant & UX Writer)
Christina Raganit (UI Designer)
Gurnisha Rehal (UX Research
Assistant & UX Writer)
My Responsibilities
As a UX designer and researcher, I planned and facilitated all user research activities and synthesized insights to define the problem space. I then led the end-to-end feature design and ideas by visualizing them into user flows and mid-fidelity wireframes for both desktop and mobile platforms.
My Responsibilities
My Responsibilities
The designs were handed off to our UI designer to develop the design system components. I also led key design iterations post-testing, drew all illustrations in Figma, and led the creation of all presentation materials and visual deliverables for stakeholder communication.
BACKGROUND
What’s a Hackathon?
An event where hackers collaborate within teams over a short period of time, typically 24 to 48 hours, to develop software or hardware projects.
Hackers
Students who form teams and compete to build solutions.
Mentors
Experienced professionals who provide guidance to teams.
Organizers
The event coordinators responsible for planning and managing logistics.
Judges
Experts who evaluate projects and select hackathon winners.
THE PROBLEM
The current mentorship request process in hackathons is ineffective, causing delays and unresolved help requests.
The current mentorship request process in hackathons is ineffective, causing delays and unresolved help requests.
INTRODUCING
HackerHelper
TICKET CREATION
A structured, file-supported request system.
Pain Point
Hackers struggle to describe issues clearly which complicates mentors' ability to assess issues efficiently.
Hackers struggle to describe issues clearly which complicates mentors' ability to assess issues efficiently.
Feature Impact
HackerHelper introduces a streamlined ticketing system that eliminates vague problem descriptions and helps hackers track requests. With clear issue categories, mentors can also quickly assess and accept requests.
HackerHelper introduces a streamlined ticketing system that eliminates vague problem descriptions and helps hackers track requests. With clear issue categories, mentors can also quickly assess and accept requests.
ONBOARDING & SET-UP
Introducing new users to the console.
Pain Point
Hackers and mentors are unfamiliar with the dedicated mentorship console and don't understand its purpose.
Hackers and mentors are unfamiliar with the dedicated mentorship console and don't understand its purpose.
Feature Impact
To reduce confusion, I added onboarding steps to guide users and designed an 8-second welcome animation to provide a quick visual overview of the platform’s purpose.
To reduce confusion, I added onboarding steps to guide users and designed an 8-second welcome animation to provide a quick visual overview of the platform’s purpose.
MENTOR DASHBOARD
Personalized home page and ticket recommendations.
Pain Point
The current ticket tracking systems are inconvenient and ineffective, causing lost submissions, unresolved requests, and delayed mentor assistance.
The current ticket tracking systems are inconvenient and ineffective, causing lost submissions, unresolved requests, and delayed mentor assistance.
Feature Impact
Our platform personalizes the mentor dashboard based on skills and requests status and introduces a filtering system, allowing mentors to assess requests even faster.
Our platform personalizes the mentor dashboard based on skills and requests status and introduces a filtering system, allowing mentors to assess requests even faster.
MENTOR DASHBOARD
Submit a reassignment request to another mentor.
Pain Point
When a mentor can’t resolve a request, there’s no clear way to redirect it, leading to stalled progress, frustration for hackers, and discouraged mentors.
When a mentor can’t resolve a request, there’s no clear way to redirect it, leading to stalled progress, frustration for hackers, and discouraged mentors.
Feature Impact
HackerHelper allows mentors to refer requests to more suitable peers. This reduces pressure, encourages collaboration, and ensures that hackers still receive timely, qualified support.
HackerHelper allows mentors to refer requests to more suitable peers. This reduces pressure, encourages collaboration, and ensures that hackers still receive timely, qualified support.
FEEDBACK SYSTEM
Improving mentorship quality and the overall hackathon experience.
Pain Point
Inconsistent and low quality mentorship support impacts participant engagement and reduces future retention.
Inconsistent and low quality mentorship support impacts participant engagement and reduces future retention.
Feature Impact
The immediate, qualitative feedback system fosters a supportive environment, encouraging mentors to improve and feel valued when they get a positive comment.
The immediate, qualitative feedback system fosters a supportive environment, encouraging mentors to improve and feel valued when they get a positive comment.
HOW DID I GET HERE?
Research and design process
Celine sent a message.
1m
Exploratory Research
SURVEY
Identifying the target audience and problem space.
To determine which stakeholders faced the most significant challenges, I designed and distributed separate surveys for three user groups; mentors, organizers, and hackers.
KEY FINDINGS
Mentorship request process found to be the most pressing issue.
Mentorship request process is the only pain point affecting hackers, mentors, and organizers alike and presents the most pressing and viable case for a digital interface solution. However, qualitative insights are needed to further validate this issue and ensure it is the right problem to focus on.
USER INTERVIEWS
Diving deeper to understand why these problems were happening.
As the surveys allowed me to identify what the key challenges were, I still needed to figure out the reasons behind these pain points. To build context, I began with desk research and a competitive analysis of existing tools, then planned and facilitated 8 user interviews with mentors, hackers, and organizers to explore the frustrations they face when seeking help and managing requests.
Pain Point | 1
Requests are hard to track, forgotten, or lost in channels.
You have to ping the channel and hope [a mentor] will come to you. Could be more streamlined cause every time I ping for help I see threads like “Where are you?” or “Has someone helped you?” so oftentimes they get buried.
Pain Point | 2
Hackers struggle to describe issues clearly, making it difficult for mentors to assess the problem.
I went to help and listened, but it turned out there were only minor mistakes. My intervention and asking them to explain wasted both of our time because the issue was so simple.
Pain Point | 3
When mentors can’t solve an issue, asking for help is time-consuming and adds more clutter to channels.
It’s hard to communicate if I want another mentor to take over without spamming Discord.
Pain Point | 4
Low quality mentorship support decreases engagement and retention.
The mentor system didn’t work properly and I’d like to see mentors give more advice than they did, even a briefing or presentation would be good. I don’t go to hackathons anymore because of this.
FRAMING THE PROBLEM
How does this impact hackers and mentors?
Mentorship request process is the only pain point affecting hackers, mentors,
Hackers lose time
Unresolved requests causes frustration for as hackers waste time waiting for help.
Decrease in hackathon satisfaction rate
Low mentorship quality or unresolved requests makes hackers feel unsupported and ignored.
Mentor burnout
The clutter in messaging channels complicates mentors' ability to assess issues and find relevant requests.
Mentors are discouraged
Public referral process is time-consuming and discouraging as it makes mentors feel unqualified.
DESIGN CHALLENGE
How might we connect hackers who encounter issues with the right mentors to ensure timely, effective support?
Celine sent a message.
1m
Solution Development
IDEATION
Mapping out key interactions of the request system.
I used my research foundation to translate insights into user flows and wireframes. The proposed solution, HackerHelper, is a help request ticketing system designed to streamline mentorship at hackathons.
Ticket Request System
Hackers submit structured help requests, and mentors receive personalized ticket recommendations based on their expertise.
Mentor Referral
If a mentor can’t resolve a request, they can refer it to another mentor with the right skills and expertise.
Feedback Form
After a mentorship session is complete, hackers can provide feedback to improve mentor effectiveness and track resolution quality.
DESIGN SYSTEM
Building the design system for scalability.
To ensure consistency across the interface, we developed a comprehensive design system with WCAG accessibility guidelines in mind. I contributed by designing vector illustrations for empty states, onboarding tutorials, and visual markers of content categories to improve the interface’s overall usability.
Celine sent a message.
1m
Evaluative Research
USABILITY TESTING
Refining the prototypes through user feedback.
To validate our designs, I conducted 5 usability studies over Zoom. Each study included 2 hackers and 3 mentors. These sessions provided insights into how each group interacted with the system and identified key usability issues.
Usability Findings | 1
2/2 hackers felt the form was too long and difficult to convey their feedback.
fd
I wouldn’t use this much because I feel like if they were average, i wouldn't give feedback. I would do it if they were exceptionally good or bad. Right now, the send feedback page has a lot of words. I would personally skim this. I prefer a slider like 1 -10.
I prefer to leave a comment on other mentor feedback like the ‘ratemyprof’ website. So this is something other [hackers] can see so they know the mentors abilities. I want to tell other people about my specific experience.
Revision
Simplifying the feedback system with a single input field.
Hackers wanted a more flexible way to share feedback, with one preferring a free-form comment system over structured survey responses. The revised form removes MCQs and replaces them with a text input box.
Usability Findings | 2
3/3 mentors struggled to assign tickets to themselves.
I am confused. Which button do I click to assign the request to myself?
Revision
Simplifying ticket assignment and discoverability.
The CTA was redesigned to improve visual hierarchy, information architecture, and interaction clarity. Secondary actions such as copying the request link or reporting are now housed under a three-dot menu in the top-right.
Usability Findings | 3
3/3 mentors are overwhelmed with the notifications page but didn’t notice our existing filter functionality.
There’s a lot here. Can't tell by just skimming, i have to read to understand because there's a lot of different things.
Revision
Improving filter visibility on the notifications page.
Mentors felt overwhelmed by the notifications page and didn’t notice the existing floating filter icon. The filter was redesigned as persistent tabs to reduce clicks and improve visibility.
Usability Findings | 4
3/3 mentors didn’t find value in numerical performance ratings.
Unless the number is really low, it’s hard to tell what I need to improve on.
I personally think that the actual numbers shown is a discouragement if I don’t do well. When I think I did well but people give me a 3/5, it feels very direct with the numbers and would affect me.
Revision
Shifting from numerical ratings to qualitative feedback.
The feature is replaced with an open-ended text feedback form. This approach not only helps mentors understand how to improve but also creates an opportunity for positive reinforcement, as hackers are more likely to leave comments when they have an exceptionally good experience.
Celine sent a message.
1m
Exploratory Research
SURVEY
Identifying the target audience and problem space.
To determine which stakeholders faced the most significant challenges, I designed and distributed separate surveys for three user groups; mentors, organizers, and hackers.
KEY FINDINGS
Mentorship request process found to be the most pressing issue.
Mentorship request process is the only pain point affecting hackers, mentors, and organizers alike and presents the most pressing and viable case for a digital interface solution. However, qualitative insights are needed to further validate this issue and ensure it is the right problem to focus on.
USER INTERVIEWS
Diving deeper to understand why these problems were happening.
As the surveys allowed me to identify what the key challenges were, I still needed to figure out the reasons behind these pain points. To build context, I began with desk research and a competitive analysis of existing tools, then planned and facilitated 8 user interviews with mentors, hackers, and organizers to explore the frustrations they face when seeking help and managing requests.
Pain Point | 1
Requests are hard to track, forgotten, or lost in channels.
You have to ping the channel and hope [a mentor] will come to you. Could be more streamlined cause every time I ping for help I see threads like “Where are you?” or “Has someone helped you?” so oftentimes they get buried.
Pain Point | 2
Hackers struggle to describe issues clearly, making it difficult for mentors to assess the problem.
I went to help and listened, but it turned out there were only minor mistakes. My intervention and asking them to explain wasted both of our time because the issue was so simple.
Pain Point | 3
When mentors can’t solve an issue, asking for help is time-consuming and adds more clutter to channels.
It’s hard to communicate if I want another mentor to take over without spamming Discord.
Pain Point | 4
Low quality mentorship support decreases engagement and retention.
The mentor system didn’t work properly and I’d like to see mentors give more advice than they did, even a briefing or presentation would be good. I don’t go to hackathons anymore because of this.
FRAMING THE PROBLEM
How does this impact hackers and mentors?
Hackers lose time
Unresolved requests causes frustration for as hackers waste time waiting for help.
Decrease in hackathon satisfaction rate
Low mentorship quality or unresolved requests makes hackers feel unsupported and ignored.
Mentor burnout
The clutter in messaging channels complicates mentors' ability to assess issues and find relevant requests.
Mentors are discouraged
Public referral process is time-consuming and discouraging as it makes mentors feel unqualified.
DESIGN CHALLENGE
How might we connect hackers who encounter issues with the right mentors to ensure timely, effective support?
Celine sent a message.
1m
Solution Development
IDEATION
Mapping out key interactions of the request system.
I used my research foundation to translate insights into user flows and wireframes. The proposed solution, HackerHelper, is a help request ticketing system designed to streamline mentorship at hackathons.
Ticket Request System
Hackers submit structured help requests, and mentors receive personalized ticket recommendations based on their expertise.
Mentor Referral
If a mentor can’t resolve a request, they can refer it to another mentor with the right skills and expertise.
Feedback Form
After a mentorship session is complete, hackers can provide feedback to improve mentor effectiveness and track resolution quality.
DESIGN SYSTEM
Building the design system for scalability.
To ensure consistency across the interface, we developed a comprehensive design system with WCAG accessibility guidelines in mind. I contributed by designing vector illustrations for empty states, onboarding tutorials, and visual markers of content categories to improve the interface’s overall usability.
Celine sent a message.
1m
Evaluative Research
USABILITY TESTING
Refining the prototypes through user feedback.
To validate our designs, I conducted 5 usability studies over Zoom. Each study included 2 hackers and 3 mentors. These sessions provided insights into how each group interacted with the system and identified key usability issues.
Usability Findings | 1
2/2 hackers felt the form was too long and difficult to convey their feedback.
I wouldn’t use this much because I feel like if they were average, i wouldn't give feedback. I would do it if they were exceptionally good or bad. Right now, the send feedback page has a lot of words. I would personally skim this. I prefer a slider like 1 -10.
I prefer to leave a comment on other mentor feedback like the ‘ratemyprof’ website. So this is something other [hackers] can see so they know the mentors abilities. I want to tell other people about my specific experience.
Revision
Simplifying the feedback system with a single input field.
Hackers wanted a more flexible way to share feedback, with one preferring a free-form comment system over structured survey responses. The revised form removes MCQs and replaces them with a text input box.
Usability Findings | 2
3/3 mentors struggled to assign tickets to themselves.
I am confused. Which button do I click to assign the request to myself?
Revision
Simplifying ticket assignment and discoverability.
The CTA was redesigned to improve visual hierarchy, information architecture, and interaction clarity. Secondary actions such as copying the request link or reporting are now housed under a three-dot menu in the top-right.
Usability Findings | 3
3/3 mentors are overwhelmed with the notifications page but didn’t notice our existing filter functionality.
There’s a lot here. Can't tell by just skimming, i have to read to understand because there's a lot of different things.
Revision
Improving filter visibility on the notifications page.
Mentors felt overwhelmed by the notifications page and didn’t notice the existing floating filter icon. The filter was redesigned as persistent tabs to reduce clicks and improve visibility.
Usability Findings | 4
3/3 mentors didn’t find value in numerical performance ratings.
Unless the number is really low, it’s hard to tell what I need to improve on.
I personally think that the actual numbers shown is a discouragement if I don’t do well. When I think I did well but people give me a 3/5, it feels very direct with the numbers and would affect me.
Revision
Shifting from numerical ratings to qualitative feedback.
The feature is replaced with an open-ended text feedback form. This approach not only helps mentors understand how to improve but also creates an opportunity for positive reinforcement, as hackers are more likely to leave comments when they have an exceptionally good experience.
Celine sent a message.
1m
Exploratory Research
SURVEY
Identifying the target audience and problem space.
To determine which stakeholders faced the most significant challenges, I designed and distributed separate surveys for three user groups; mentors, organizers, and hackers.
KEY FINDINGS
Mentorship request process found to be the most pressing issue.
Mentorship request process is the only pain point affecting hackers, mentors, and organizers alike and presents the most pressing and viable case for a digital interface solution. However, qualitative insights are needed to further validate this issue and ensure it is the right problem to focus on.
USER INTERVIEWS
Diving deeper to understand why these problems were happening.
As the surveys allowed me to identify what the key challenges were, I still needed to figure out the reasons behind these pain points. To build context, I began with desk research and a competitive analysis of existing tools, then planned and facilitated 8 user interviews with mentors, hackers, and organizers to explore the frustrations they face when seeking help and managing requests.
Pain Point | 1
Requests are hard to track, forgotten, or lost in channels.
You have to ping the channel and hope [a mentor] will come to you. Could be more streamlined cause every time I ping for help I see threads like “Where are you?” or “Has someone helped you?” so oftentimes they get buried.
Pain Point | 2
Hackers struggle to describe issues clearly, making it difficult for mentors to assess the problem.
I went to help and listened, but it turned out there were only minor mistakes. My intervention and asking them to explain wasted both of our time because the issue was so simple.
Pain Point | 3
When mentors can’t solve an issue, asking for help is time-consuming and adds more clutter to channels.
It’s hard to communicate if I want another mentor to take over without spamming Discord.
Pain Point | 4
Low quality mentorship support decreases engagement and retention.
The mentor system didn’t work properly and I’d like to see mentors give more advice than they did, even a briefing or presentation would be good. I don’t go to hackathons anymore because of this.
FRAMING THE PROBLEM
How does this impact hackers and mentors?
Mentorship request process is the only pain point affecting hackers, mentors,
Hackers lose time
Unresolved requests causes frustration for as hackers waste time waiting for help.
Decrease in hackathon satisfaction rate
Low mentorship quality or unresolved requests makes hackers feel unsupported and ignored.
Mentor burnout
The clutter in messaging channels complicates mentors' ability to assess issues and find relevant requests.
Mentors are discouraged
Public referral process is time-consuming and discouraging as it makes mentors feel unqualified.
DESIGN CHALLENGE
How might we connect hackers who encounter issues with the right mentors to ensure timely, effective support?
Celine sent a message.
1m
Solution Development
IDEATION
Mapping out key interactions of the request system.
I used my research foundation to translate insights into user flows and wireframes. The proposed solution, HackerHelper, is a help request ticketing system designed to streamline mentorship at hackathons.
Ticket Request System
Hackers submit structured help requests, and mentors receive personalized ticket recommendations based on their expertise.
Mentor Referral
If a mentor can’t resolve a request, they can refer it to another mentor with the right skills and expertise.
Feedback Form
After a mentorship session is complete, hackers can provide feedback to improve mentor effectiveness and track resolution quality.
DESIGN SYSTEM
Building the design system for scalability.
To ensure consistency across the interface, we developed a comprehensive design system with WCAG accessibility guidelines in mind. I contributed by designing vector illustrations for empty states, onboarding tutorials, and visual markers of content categories to improve the interface’s overall usability.
Celine sent a message.
1m
Evaluative Research
USABILITY TESTING
Refining the prototypes through user feedback.
To validate our designs, I conducted 5 usability studies over Zoom. Each study included 2 hackers and 3 mentors. These sessions provided insights into how each group interacted with the system and identified key usability issues.
Usability Findings | 1
2/2 hackers felt the form was too long and difficult to convey their feedback.
fd
I wouldn’t use this much because I feel like if they were average, i wouldn't give feedback. I would do it if they were exceptionally good or bad. Right now, the send feedback page has a lot of words. I would personally skim this. I prefer a slider like 1 -10.
I prefer to leave a comment on other mentor feedback like the ‘ratemyprof’ website. So this is something other [hackers] can see so they know the mentors abilities. I want to tell other people about my specific experience.
Revision
Simplifying the feedback system with a single input field.
Hackers wanted a more flexible way to share feedback, with one preferring a free-form comment system over structured survey responses. The revised form removes MCQs and replaces them with a text input box.
Usability Findings | 2
3/3 mentors struggled to assign tickets to themselves.
I am confused. Which button do I click to assign the request to myself?
Revision
Simplifying ticket assignment and discoverability.
The CTA was redesigned to improve visual hierarchy, information architecture, and interaction clarity. Secondary actions such as copying the request link or reporting are now housed under a three-dot menu in the top-right.
Usability Findings | 3
3/3 mentors are overwhelmed with the notifications page but didn’t notice our existing filter functionality.
There’s a lot here. Can't tell by just skimming, i have to read to understand because there's a lot of different things.
Revision
Improving filter visibility on the notifications page.
Mentors felt overwhelmed by the notifications page and didn’t notice the existing floating filter icon. The filter was redesigned as persistent tabs to reduce clicks and improve visibility.
Usability Findings | 4
3/3 mentors didn’t find value in numerical performance ratings.
Unless the number is really low, it’s hard to tell what I need to improve on.
I personally think that the actual numbers shown is a discouragement if I don’t do well. When I think I did well but people give me a 3/5, it feels very direct with the numbers and would affect me.
Revision
Shifting from numerical ratings to qualitative feedback.
The feature is replaced with an open-ended text feedback form. This approach not only helps mentors understand how to improve but also creates an opportunity for positive reinforcement, as hackers are more likely to leave comments when they have an exceptionally good experience.
IMPACT
Value for Users
During testing, HackerHelper reduced the time needed for hackers to connect with mentors, and for mentors to coordinate with each other especially during large hackathons where requests can pile up.
As a previous hacker and mentor, I think an app like HackerHelper would be really useful! It makes it much easier for hackers to connect with mentors, and for mentors to communicate with each other. This would be especially helpful in larger hackathons by keeping requests organized and clearly indicating which request is being worked on by which mentor. So overall, I would love to see this implemented for future hackathons.
As a previous hacker and mentor, I think an app like HackerHelper would be really useful! It makes it much easier for hackers to connect with mentors, and for mentors to communicate with each other. This would be especially helpful in larger hackathons by keeping requests organized and clearly indicating which request is being worked on by which mentor. So overall, I would love to see this implemented for future hackathons.
Anonymous User Tester
Value for SFU Surge
HackerHelper was adopted by the SFU Surge Hackathon Club, who are now implementing it for their upcoming events. I designed custom illustrations inspired by their mascot, ensuring the visuals felt familiar and aligned with the club’s identity. This strengthened community connection and made the tool feel like a natural extension of their brand.
RETROSPECTIVE
Final reflections and learnings.
Working on HackerHelper was both challenging and rewarding. It pushed me to think critically about how to transform complex processes and touchpoints into a user-friendly digital experience. Some things I learned throughout the project include:
Illustrations can help with usability!
This project taught me that illustrations should go beyond aesthetics. I suggested adding illustrations to guide users through complex processes. While some stakeholders were concerned they might be distracting, I learned that when illustrations clearly communicate actions, they can enhance the user experience. Usability testing showed that the feedback was positive as users found the illustrations made the onboarding journey more engaging!
Summarizing responses in real-time when facilitating user interviews.
I found that reiterating what users say during interviews helps check my understanding and shows them that I'm actively listening to their voices! Additionally, this technique serves as an efficient way to structure my notes and saves time during analysis, as I could directly transfer insights into sticky notes without having to rephrase them again.
