Porta
Introduction
UX Design / UI Design / Fall 2021
Porta is an app designed to help you find any restroom at the click of a button. Not only does it find them, but it can differentiate between gendered and gender-neutral, single-stall and multi-stall, handicap accessible, family, or whether it has a changing room or not.
Tools used: Pencil and paper, Adobe XD, Adobe Photoshop, Adobe Illustrator
The Goal
The goal of this project in my UX design certification program is to create a dedicated app for social good. I decided to make an app to find bathrooms on a map after listening to some peers have a conversation about not being able to find any bathrooms that will accommodate them and their needs. This got me thinking, how can I create something to help them find their needs? I was then able to come up with the goal for my app: to find bathrooms that accommodate the user and their needs.
My Role
I became every role in the UX design process as the lead UX designer and researcher.
Sketches and Wireframes
Research and User testing
After sketching the first wireframes and creating the first digital low fidelity wireframes, I began my user testing to see if there were any challenges in the main user flow that needed to be fixed. I gave four people a monitored usability study that lasted only ten to twenty minutes and took notes on how they interacted with the design and their user experience throughout exploring the low fidelity prototype. I learned a few insights through the feedback from the user study, and I prioritized them from most important to the user flow to least important. The most important pain point was that participants found the drag screen at the bottom to be particularly confusing, they did not know how to interact with it. The second priority pain point was that they were confused as to why the menu option and the search option were so close together. I fixed both of these issues by changing the drag screen action to tap screen and sharpened the edges, for the next pain point I sent the menu to the left side of the header and kept the search option to the right, putting the logo in the middle of the header.
Mockups
-
Before and After
Although a little blurry, you can see the transformation from wireframe to mockup after its usability study
-
Mockup
I decided to use Google’s dark theme design system to help establish a good and consistent design throughout the entire mockup
Final Polished Designs
Results and Outcomes
Every project I take on helps me to grow as a UX designer. This project helped me to hone my skills in Adobe XD and realize how helpful user testing and feedback are to developing a beautiful UI design as well as an enjoyable user experience. I learned how to show off my mockups in an isometric pattern and how to use design systems to keep my work visually appealing and consistent. Thank you for your interest in my work and I invite you to check out my other projects.