Team: Alex Hernandez, Gordon Wu & myself
Role: Lead Product Designer
Software: Figma, Adobe Illustrator
Duration: Jun 2022 - Oct 2022, Jun 2023 - Oct 2023
pluto was created as an internal hacker-management tool for nwPlus, a club at UBC that annually organizes three of the largest hackathons in Western Canada.
💡 problem
✦ nwPlus hackathons have hundreds of participants with multiple statuses to keep track of, including check-in, meals, swag, bag-check, activity attendance and prizes.
✦ Previous hackathons have managed all this information using Google Sheets, which is inefficient and requires a lengthy onboarding process for organizers
✦ The objective was to create a mobile app that streamlines the process of managing hundreds of hackers' information with the use of unique QR codes.
the design challenge ✷
How can we develop a mobile app to efficiently manage diverse hackathon participant statuses, eliminating the need for Google Sheets?
🛠 process
research — user flow — lo-fi wireframes — usability testing — hi-fi prototype
✷ I followed the design thinking process to ensure that my solution addressed the pain points, motivations, and behaviours of my user that were identified in my research.
✦ I contacted members of the nwPlus team—our target users—to identify any pain points regarding their current process for managing tracker information. Some insights I received:
✧ Google Sheets is prone to human error, time-consuming to navigate and requires a lot of manual labour when managing hundreds of participants' information
✧ When 2+ people have the same name, there is no unique identifier that allows organizers to easily identify the hacker they are looking for
✦ I researched existing QR scanner apps and noted down aspects that we liked and disliked
✦ We created a user flow to represent the steps a user would take to complete a given task, helping us visualize the main options we would need to put on our homepage.
✦ Using the user flows, I created a few iterations of low-fidelity wireframes that led us to have 2 main pages - the 'homepage' where users would select a task then scan the participant's QR code, and the list-view page that would allow the user to manually search for a participant's name
⚙️ usability testing
With our mid-fidelity prototype, I conducted moderated usability testing with our target users: members of the nwPlus team. We kept the design simple to encourage more feedback from our participants.
We conducted usability testing with 6 participants over 1 week via zoom. Throughout the week, I made revisions to our design based on the insights we received - towards the end of the week, the users were able to complete all tasks with ease.
Some improvements I made—
mid-fidelity
high-fidelity
✦ rearranging the buttons to be more intuitive (e.g. info & check-in are at the top because they will be most frequently used), removing ones that were no longer deemed necessary
✦ updating the navigation bar icons to more accurately reflect the page contents
to the home page
✦ updating the 'checked in' indicator to clearly reflect the participant's status
✦ adding frequently accessed fields such as dietary notes and pronouns at the top of the profile
✦ removing the edit buttons for fields that don't need it, and simplifying the flow for adding additional meal portions with larger buttons
to the profile page
👀 outcome
The outcome of this project was an intuitive mobile app with a simple design that has reduced the onboarding time for new organizers by over 50%, and continues to streamline the process of participant information management at hackathons.
Once the design was complete, I demoed our prototype and handed it off to the nwPlus development team, who have finished implementing the designs for use at our three upcoming hackathons this year, HackCamp, nwHacks and cmd-f!
