The Project
Bathroom Finder is an app and website that helps users find nearby bathrooms. It is designed to help travelers and homeless people in particular. This project was inspired by the prompt: “design an app and website for social good.” It was my third UX design project in the Google UX Design Professional Certificate program on Coursera. I was the lead UX designer. The project took 9 days to complete.1
I followed the 5 phases of the design process: empathize, define, ideate, prototype, and test. These phases helped me focus on the needs of the users and create a solution that works well on different devices. Bathroom Finder is meant to make finding a bathroom easier for people who need it the most.2
Empathize
The first phase of the UX design process is empathize. During this phase designers research the user base to understand their needs. This phase includes user interviews, user personas, user stories, and user journey maps. These tools help designers gain insights for product development.3
User Interviews
For this project I did not conduct user interviews. My instructors did not assign me this task so I skipped this step. I then moved on to the next phase: creating user personas.4
User Personas
For this project I created user personas based on the target demographics. Each persona was a one-page document that included a fictional name, a picture, a brief description of the user’s background, and a quote that reflected their personality.5
User Stories
A user story is a short description of a potential user and their problem. It is based on a user persona. User stories highlight challenges users face and help guide solutions. They are helpful to designers because they focus on user needs, ensuring the design solves real problems.6
The formula provided by Google for writing user stories is:
“As a/an [type of user] I want to [action] so that [benefit].”
I used this formula to develop user stories for each of my 3 user personas, James Partridge, Andrew Bencher, and Katherine Washington.7
User Journey Maps
After writing user stories, I created a user journey map. A user journey map is a visual representation of a user’s problem and the steps they take to solve it. It is divided into squares, with each square describing the user’s situation, feelings, and actions. I made a user journey map for the persona James Partridge, whom I developed earlier in the empathize phase.8
Define
The second phase of the UX design process is define. In this phase, the designer understands the users’ problems and selects one to solve. The solution often leads to a new product or service. The designer creates problem statements and goal statements during this phase.9
Problem Statements
In the define phase of the UX design process, I wrote problem statements. A problem statement is a brief description of a user’s problem that the designer aims to solve. It is based on research and user personas created during the empathize phase.10
The formula provided by Google for a problem statement is:
“[User name] is a/an [user characteristics] who needs [user need] because [insight].”
For my Bathroom Finder project, I wrote 3 problem statements—one for each of my user personas: James Partridge, Andrew Bencher, and Katherine Washington.
Goal Statement
For my Bathroom Finder project, I wrote a goal statement to propose a solution to the problems identified in my user personas. A goal statement in UX design outlines the solution to a user’s problem.11
According to the formula provided by Google, a goal statement typically reads:
“Our [product] will let users [perform specific actions] which will affect [describe who the action will affect]. We will measure effectiveness by [describe how you will measure the impact.]”
My goal statement described how Bathroom Finder would address users’ needs for accessible restrooms and how its effectiveness would be measured.
Ideate
The third phase of the UX design process is ideate. This phase focuses on brainstorming. During this phase the designer develops many design solutions to solve the user’s problems. Exercises like rapid sketching and storyboarding are used during this phase.12
Rapid Sketching
Rapid sketching is when a UX designer quickly draws design ideas in a short time. I used the “Crazy Eights” format for rapid sketching in previous projects. For my Bathroom Finder project, I didn’t use “Crazy Eights.” Instead, I made one sketch to explore a design solution for the app.13
Storyboards
Storyboarding is an exercise where the designer imagines a user interacting with the product. A storyboard is similar to a comic strip. The designer can draw storyboards from a distance or focus on details. In wide-shot storyboards, the context of using the product is shown. In close-up storyboards, the focus is on how the product works.14
I did not produce storyboards for my Bathroom Finder project.
Prototype
Prototype is the 4th phase of the UX design process. In this phase the UX designer creates wireframes, mockups, and prototypes.15
Wireframes
Wireframing is the first task in the prototype phase. It involves creating simple visuals to represent the basic layout and functionality of the product. A wireframe serves as a rough draft of the design. Designers often create both paper and digital versions of their wireframes.16
Paper Wireframes
UX designers often create paper wireframes before moving to digital ones. Paper wireframes are quick, cheap, and easy to produce. I developed paper wireframes for my Bathroom Finder project.17
Digital Wireframes
A digital wireframe is a simple, computer-generated layout of a design created using software like Figma or Adobe XD. It is based on earlier paper wireframes and provides a clearer idea of how the app or website will look. Digital wireframes are a key step before moving on to the next phase in the design process.18
I made my digital wireframes in Figma.
Lo-Fi Prototypes
A lo-fi prototype is a basic, interactive model of an app or website. It is made using wireframes and focuses on demonstrating the app’s core functionality without refined design elements like colors or fonts. Lo-fi prototypes allow designers to test how users interact with the app before adding more details.19
I did not create a lo-fi prototype for Bathroom Finder, electing instead to advance to the next step and produce mockups of the app and website.
Mockups
A mockup in UX design is a detailed, static, and non-interactive visual of an app or website. It includes elements like colors, fonts, and images, offering a realistic preview of the final design before development.20
In the next step of the prototype phase I created a mockup for my Bathroom Finder app and responsive website.
Hi-Fi Prototypes
A hi-fi prototype is a detailed, interactive model of an app or website that looks and feels like the final product. It includes elements like colors, fonts, and images. I created a hi-fi prototype for the Bathroom Finder app and website to test and refine the user experience.21
You can view my interactive prototypes at the following links:
Bathroom Finder Hi-Fi Prototype (App)
Bathroom Finder Hi-Fi Prototype (Web – Desktop)
Bathroom Finder Hi-Fi Prototype (Web – Mobile)
Test
The fifth phase of the UX design process is testing. However, testing is not always the final step. The design process often includes multiple rounds of testing and revisions throughout development.22
During the test phase, the app or website is presented to users who provide feedback on their experience. This can take place through a critique session, a usability study, or both.
Crit Session
A crit session, short for “criticism session,” is when a prototype is presented to a tester, often a designer, engineer, or other expert, who provides feedback and critique. Crit sessions are an effective way to gather valuable input quickly. For my Bathroom Finder UX design project I conducted a crit session with a tester to refine the design and ensure it met user needs.23
The crit session involved testing the prototypes, recording the tests, and taking notes on the feedback acquired during the session. The feedback was then used to create a list of action items and guide the development of the project.
Revisions
After conducting and taking notes on the crit session I revised the design to incorporate my tester’s feedback.
While I have completed the design process and created a functional prototype for Bathroom Finder there are still some features and improvements that have yet to be implemented. Bathroom Finder may not be completely finished and I may update the designs for it in the future.
Thank you to my tester! Your feedback was valuable and helped me create an excellent design for my product.