Pluto
A simple design solution for managing hacker logistics during hackathons
Overview
Pluto is an internal management app for nwPlus organizers to record hacker-specific information at our hackathons. This tool has a built-in QR scanner that will be used to scan hackers for check-in, meals, workshop attendance, hackathon swag, and baggage for those who are traveling.
Team: Gordon Wu, Maureen Luo
Role: Designer
Software: Figma
Duration: July - September 2022
Problem
Pluto was originally an NFC tracker app that was worked on in 2019, but was archived due to COVID-19. The project stayed in our backlog until this year, where in-person hackathons have finally come back to life.
Due to the large number of participants that attend our hackathons each year (HackCamp, nwHacks, cmd-f), managing hacker information and meal servings were two things that became very tedious. We took these factors into consideration when updating the app and were given three months to complete it in time to use at our first hackathon in November, HackCamp 2022.
Research
Current product analysis:
1. Absence of user flow, intermediate screens, and prototyping
We noticed the absence of prototyping and user flow, making it difficult to navigate and visualize the functionality, but easier to identify what was missing.
2. No navigation bar for easy access
The drop-down menu was a useful way to access tabs, but the homepage and hacker list view were the most visited tabs, causing inconvenience as users had to click the menu first to access them.
3. Lack of hacker profile details
Managing hacker information was tedious, so we aimed to include comprehensive details in their profile for easy accessibility and to minimize the need for backtracking.
4. Redundant check-in list view for workshops/events and meals
Redundant list view screens in the old project file showed the same check-in progress, adding complexity for users. To address this, we decided to change how we track this information.
User Flows
In the initial design stage, we created one big user flow to encapsulate all the functions including login, QR code scanning, searching hacker profiles, tagging hackers for meals, workshop attendance, and bag check.
Prototyping
1. Low-fidelity prototyping
After our initial analysis, we went ahead and started implementing them into our low-fidelity sketches. We then narrowed them down depending on which had lower costs, while still maintaining high efficiency for the user.
2. Mid-fidelity prototyping
After finalizing our low-fidelity sketches, we moved on to create an interactive mid-fidelity prototype that was used later for usability testing.
User Testing
Usability testing was conducted with six participants from our nwPlus organizing team. The testing took place over two weeks via Google Meets. Based on the identified issues, we made two iterations of the prototype. The final iteration improved task completion speed and efficiency for users.
Critical findings
-
Users clicked the camera button on the navigation bar instead of using the dedicated buttons for check-in and meals on the homepage.
-
Users had difficulty finding hacker information due to the absence of a dedicated button on the homepage, often mistaking the list view icon for a menu button and resorting to the camera button on the navigation bar.
Design Decisions
Based on the feedback received from our rounds of usability testing, we were able to make some key design decisions leading into our high-fidelity prototype.
1. Navigation bar clean-up
The camera button was originally designed to quickly access the QR scanner for scanning hacker profiles, but that didn't seem very intuitive so we removed it entirely.
While the functionality was something we still wanted to keep within the app, we took it off the navigation bar and created a button for it labeled “Hacker Info” on the homepage.
2. Filtering list view for organizers, hackers, and mentors
Initially, we intended to include this feature in our high-fidelity prototype to improve the organization and search experience in the list view. However, we realized it added an extra step and decided to remove it entirely.
Outcomes
1. Homepage revamp
Adding a navigation bar reduced the number of repeated actions for the user. In addition, we made an update to the button icons in our high-fidelity prototype to make things more visually appealing and intuitive for the users.
2. Updated hacker profiles
Additional relevant hacker information was included on the profiles which include: phone number, a section for additional notes (i.e. allergies, dietary restrictions), and workshop attendance.
3. Removing redundant list view screens
We removed redundant list view screens for check-in, meals, and workshop attendance. All relevant information is now accessible through the hacker's profile, which can be accessed via the list view button on the navigation bar. Hackers can be searched from the list and their information will be displayed on their profile.
Reflection
Throughout the design process, we learned a lot about catering to the user’s needs and not what we envision for the user. We also learned the importance of including necessary details in our tasks for usability testing, to minimize the amount of confusion for our users.
Pluto was a project that I’m very fortunate to have been given the opportunity to work on since the file had been archived in 2019. Now that hackathons are back to being in-person, we’ve created a viable solution for our organizers at nwPlus to increase efficiency in managing logistics.