top of page

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

user flow.png
⚙️ 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—



✦ 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

home - scan - info.png
updated profile-midfi.png
empty checked-in hacker meals.png

✦ 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!

pluto hifi screens.png
bottom of page