“When 2+ people have the same name, there is no unique identifier that allows organizers to easily identify the hacker they are looking for, so it takes longer to find the right profile”
“Google Sheets is prone to human error, time-consuming to navigate and requires a lot of manual labour when managing hundreds of participants' information - it's so frustrating when there's a long line”
With these insights…
Gordon and I 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 in Figma 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.
Does it make sense to our users?
To answer this, I conducted moderated usability testing with 6 of our target users over zoom. We decided to conduct usability testing at the mid-fidelity prototype stage to encourage more feedback from our participants regarding usability, and less about aesthetics. I prepared a list of tasks for each participant to complete in the app, and kept track of:
the duration taken to complete each task
the steps taken to complete each task
whether each task was completed successfully
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.
Once the design was finalized, I prepared the design file for handoff by connecting the screens into an interactive prototype in Figma. Then, I demoed the prototype at a meeting with our engineers and product manager!
The outcome!
The outcome of this project was an intuitive mobile app with a simple design that has reduced the onboarding time for new organizers significantly, and streamlined the process of participant information management at hackathons by over 60%.
The nwPlus engineering team have finished implementing the designs for use at our three upcoming hackathons this year, HackCamp, nwHacks and cmd-f! We’ve since received lots of positive qualitative feedback from our hackers, including praise for reducing long lineups with our innovative QR app :D. Internally, this app has also helped make it easier for our team to collect data to further improve future iterations of our hackathons.
Improvements from usability testing
HOMEPAGE
Rearranging the buttons to be more intuitive. For example, info & check-in are at the top because they will be most frequently used. Also, removing buttons that were no longer deemed necessary
Updating the navigation bar icons to more accurately reflect the page contents
PROFILE
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
Design System
Alex and I created a design system from scratch for a new internal tool app, aligning it with the existing design system at nwPlus. Using components in Figma, I ensured consistency and scalability across UI elements while adhering to industry-standard processes like atomic design principles and accessibility guidelines.
I built components such as buttons, input fields, and icons, ensuring consistency in style, spacing, and interaction patterns. By leveraging reusable components and detailed documentation, I streamlined the design handoff process, allowing for easy collaboration and future iterations.
My design process
user research — user flow — wireframes — usability testing — hi-fi prototype + design system — handoff
To start, 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:
pluto.
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, the organization behind 3 of the largest hackathons in Western Canada.
The problem
nwPlus hackathons are logistically-complex events—each 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 an internal-facing mobile app that streamlines the process of managing hundreds of hackers' information with the use of unique QR codes.
(A quick sneak peek at the solution 👀 )
Back to: The design challenge
How can we develop a mobile app to efficiently manage diverse hackathon participant statuses, eliminating the need for Google Sheets?