May 2023 to August 2023
Overview
Potty Pass is a new Flordia-based startup that intends to bring clean and quality port-a-potties to events all around the country, featuring a multi-tiered ticketing and pass system as well as attendants/guards.
Problem and Goal
Clean bathrooms at events (especially outdoor events) have always been an issue. With the shrinking number of public bathrooms alongside the poor sanitary conditions they're often found in, Potty Pass aims to provide cleaning to portable bathrooms at events alongside staff attendants to create a cleaner and more sanitary environment for eventgoers of all kinds, especially women and children.
Solution
The Potty Pass platform allows users to view events that are occurring nearby that they may be going to and purchase passes that will allow them exclusive access to Potty Pass's portable bathrooms, which will be cleaned in between uses and have attendants stationed outside to cater to the needs of any eventgoers.
Deliverables:
Low and high-fidelity frames for
Homepage
Product (user-purchase flow, ticket access/sharing, profile settings)
Administrator platform
Moodboard
Information Architecture - Sitemap and Userflows
Team
Our team consisted of me and my senior designer Rachel Xie. We constantly stayed in coordination with my superior Anthony Ferrara (lead designer and CEO of Oxy), Potty Pass CEO and entrepreneur Chris Watley, as well as his team members - Todd, VP and Gabe, COO.
Role
Under the supervision of Rachel, I took the lead on this project to help create Potty Pass's identity. I was in charge of competitive research, moodboarding, wireflows (which I coordinated with my senior on), and product wireframes and high fidelity frames. My senior took responsibility for the homepage frames, and collaborated with me on the administrator experience.
Full process below
Moodboard
We began the project with moodboarding - mostly looking at other competitors and similar products in the space to see what they looked like and how they presented their brand identities.
We also examined various logos with closely related themes such as bathrooms, queues, VIP or premium experiences, cleanliness, and more.
We also tried to find UIs that we felt had similar vibes with what we were trying to create, as well as image styles that would help us convey the brand identity and personality of Potty Pass.
Sitemap and Userflows
Next, we created the sitemap of what we thought Potty Pass would look like, and used it to create a userflow of how users would traverse our product.
We went through a few variations of the MVP userflow, not being sure whether to require the user to log in or create an account to purchase a ticket, or if they needed to pay online or in-person. In the end, we introduced an in-person kiosk for those who didn't feel comfortable paying online, including a prompt that would automatically create an account for them using their payment details. This would link their tickets/passes to their accounts.
Wireframes
Our next step was to wireframe everything. I took charge of the product side - what the user would see after they clicked "buy now" to what the tickets would look like.
I've shown a few of the key screens of the mobile wireframes below - the homepage, the post-purchase receipt, the ticket, the dashboard, and the browse events page.
Wireframe Iterations - Dashboard
Originally, my plan was to include a dashboard where the user could view their purchased tickets/passes and potentially purchase new ones. However, after iterating and critiques with more senior designers, I came to realize the following points:
It makes for a poor experience to not be able to see all of a customer's passes (if they purchase more than two or 3 passes
Users who buy passes for one event are unlikely to want to buy passes for other events
This places pass purchase on a lower tier of priority in the information architecture
The final versions of the screen are shown below.
One thing I noticed from my designs is that I do feel like it skews more towards native app instead of mobile web app, which is something I'd like to explore and rectify in the future.
Wireframe Iterations - QR Code / Ticket System
In the beginning, I felt like it would be a good idea to be able to access a specific ticket from the front page and display it as a modal, moving it up in the hierarchy of information. However, I didn't take into account the potential need to scroll through various tickets, and how the modal version would break the flow of the user.
We made sure to use QR codes, as they are omnipresent in all event apps and websites, and quick to scan in crowded venues and stadiums.
The following screens show the iteration process.
The changes were applied in these iterations for these reasons:
Added virtual wallet addition especially due to many events having lack of accessible WiFi
Reduced button sizes for functions that were less important (download and share vs. virtual wallet)
Reduced the return to dashboard button into a text button due to its minimal importance along with the existence of a back button on web browsers, which would reduce its potential usage
Wireframe Iterations - Success Page
To help create a better experience for the user, I incorporated a success screen after user login. However, the original version having a button would inevitably break the user's flow, which is why my senior designers recommended a popup in the flow instead.
However, looking back at it, I feel like a popup would interrupt the user's experience and be rather jarring, which is why I think in a future variation, I'd return to something similar to the original version, just without a button and having it automatically allow the user to proceed to their dashboard.
Style Guide
After multiple rounds of style exploration, we settled on the following color palette, typography, and iconographies.
Logo Exploration
After several renditions of logos came back from our agency's artists, we got together with our clients and explored various Potty Pass logos.
Our final logo features a similar design, but with a friendlier graphic for better approachability and emphasis on Potty Pass's family-friendly sanitary services.
Reduced crown fill to outlined for overall consistency
Happy face for warmer, more family friendly tone
Toilet paper roll motif (not sure why we removed the ticket stub dashes, to be honest)
High Fidelity
We applied the previously created styles to our wireframes, thus creating the following frames.
High Fidelity Iterations - Login Screen
I tried to breathe some personality into the login screen, experimenting with the original blue and black gradient that the client seemed to resonate with, alongisde some interesting illustrations our other designers found. I tried curving some edges for a softer or sleeker look (in some cases), as well as experiment with the background.
I combined two previous variations into the final screen, shown below.
This combination was the result of these thoughts:
Removed the curves for less complexity, reducing user confusion and easier development
Added illustration for a more casual and welcoming tone and to reduce odd blank space
Picture background adds a sense of legitimacy and generates a more event-driven environment
Other Assets
We also created other assets and flows, such as emails (as seen below) for registration and event reminder, social share images. Alongside these assets, there are a few I'm not quite allowed to show - such as our admin/management platform, badges for Potty Pass employees, as well as the pitch deck to help Chris and the team get more investors on board.
Image: Social share images
Final Showcase
After handing everything off to dev via Loom videos, this marked the end of our agency's responsibilities.
Image: Final product images
Reflection
This was the first project I took part of at Oxy where I had involvement in the whole process! It was super enlightening, and I found that my UI skills (especially my mobile UI) had a lot to improve on. This was also my first time creating social and email assets - I loved getting exposure to working on deliverables that didn't consist of just wireframes and prototypes!
I enjoyed my first taste of working and interfacing with clients at an agency, and learned a lot on how to facilitate meetings to keep everyone on track and productive.
I'd say my biggest challenges during the project were working with mobile size screens as well as make sure client meetings stay focused. It was also difficult to take into account of the different technologies used in our product and design accordingly - for instance, what payment processing service we'd be using and how our designs would be affected by their involvement. I hope to coordinate better with developers in the future and see how their APIs affect design so I can prepare accordingly.
Measures of Success
As a 0 to 1 product, I believe the best ways to measure success would most likely be:
New users (measuring adoption rate among new customers at events)
Task completion success rate (purchasing a ticket and adding it to wallet)
Conversion rate (to see if the homepage is enticing enough)
Time on task (would be important to see how easy it is to buy tickets, especially during bathroom emergencies)
Bounce rate (could be influenced time on task or other factors)
Unfortunately, as we handed off the product and additional pitch decks to the Potty Pass team, I do not have concrete numbers to provide.