Revamping our Judging App for an (even more) seamless hackathon experience
With our flagship event of the year — the hackathon — approaching, our team of designers, developers and managers came together to improve upon our existing project scoring application.
Written by: Aman Sharma & Vanessa Seto
Spring into Action — TOHacks 2021 is approaching!
TOHacks is an Toronto-based student organization that hosts events, such as our flagship 2-day hackathon, with the purpose of educating students about revolutionary, ground-breaking technologies such as Financial Tech, Artificial Intelligence, Machine Learning, and Blockchain (to name a few).
The Team —
Product Manager: Vanessa Seto
Product Designer: Aman Sharma
Back-end Developer: Dhruv Shah
Front-end Developers: Manushi Oza, Anoushka Singhal, Nurin Fazil
The Product
The Judging App was introduced last year, at TOHacks 2020, as a way to simplify the judging experience for all users involved.
- For judges, it is meant to provide an intuitive and streamlined platform for judging hackathon projects.Instead of having to open many different project links, jot down notes on a separate page or file, and constantly refer to the judging criteria, this app aims to amalgamate all of these judging processes into one place.
- For hackathon organizers, it serves as a way of tabulating scores to determine winners in their respective categories.
- For hackathon participants, albeit not a direct user, this product allows for their projects to be judged in a fair, standardized way
Although this app proved to be an improvement to the overall judging experience last year, there is always room for continuous improvement, as with any product.
Step 1 — Problem Discovery and Research
Last year’s verdict
To analyze where our product succeeded and fell short last year, we collected insights from user interviews with previous judges and executive members on the team. Here were some of the major findings:
A fringe stakeholder
Although participants at the hackathon will not be using this product, the success of this product directly impacts them, as it will be used to determine winners and rankings of projects. To make sure we didn’t overlook their concerns, we interviewed past hackathon participants and were given the following insights:
- They had concerns that some groups may have unfairly won, and wanted to be assured that there was an adequate due diligence process for fairness
- They wanted comments on their projects to help them improve for next time — something they may miss out on due to the nature of the new virtual hackathon
Ideation
The key takeaways from these interview provided a foundation for us to constantly lean back on during the entire design process. Since user-centricity was our goal, we asked ourselves the following questions throughout the process:
- Are we addressing all pain points identified in the user interview?
- Although they are not direct users, are we addressing participants’ equity and their concerns?
- Can this process be automated any further to increase efficiency on the user’s end?
As well as our major problem statement:
How might we improve or add to the current judging application to create an even more seamless and automated experience for both judges and organizers?
To brainstorm features and improvements, we used our guiding questions, user research as well as our problem statement to divide improvements into three themes: ease-of-use, participant equity and automation. From there we were able to set concrete goals as to what tangible changes we wanted to make this year.
Step 2 — Design
With our features and problem statements laid out, we got to work on fleshing out the new user flows for each user to have a clear idea on what we wanted the experience to look like, end-to-end.
Score Sorting Design
We then got to work on our wireframes and prototypes. This year, we are implementing an all-new score sorting page for hackathon organizers to use, and therefore required some wireframes to figure out the functionality and layout.
We finalized this design for the “All Projects” table. Since each project contained many different identifying parameters (name, ID, category, score, team name etc.), we decided to only show the most important ones on the initial display so as to not overwhelm the user. By interviewing some more hackathon organizers, we were able to finalize the columns shown on the table above.
For the rest of the project information, we conducted A/B tests with users to determine whether it was the most functional to display it in a popup modal, or a separate page altogether.
Through the testing, we found that the user flow was much smoother with the popup modal, as it was easier and quicker to access the previous table as compared to the separate screen. This was one example of how we constantly relied on user insight’s to make decisions.
Judge Comments:
Another design we got to work on was the implementation of judge comments. Through this design, a judge would be able to write a short comment on the project, as well as edit it if needed.
Initially, we had incorporated comments into the scoring page as a third panel, similar to most social media platforms. We thought this would be the most familiar, and therefore the most intuitive layout for judges.
After testing this with users through demos, we realized a better option would be to stick to 2 panels. A comment we got was that the three panels were crowded and overwhelming to look at. Given these insights, we finalized on a two panel design that was cleaner, and in fact, more intuitive.
Design Walkthrough!
After designing, testing, and a little more designing, we reached a high-fidelity prototype we were happy with. The new score sorting feature, the progress bar and project comments already seemed to improve the judging experience for all users.
Judge User Flow
Organizer User Flow
What’s next?
We are currently in the process of developing, testing and shipping this product. Given the new score sorting table feature, as well as the ability to. view projects without a set order, we have new database and back-end requirements. As well, there have been many front end updates regarding the design, which we are currently working to implement.
Feel free to stay updated with this product, as well as TOHacks, at www.tohacks.ca!
