![website banner.png](https://static.wixstatic.com/media/6fa78e_f6981ae1a23c4c2f95a95a35a99f6f0f~mv2.png/v1/crop/x_0,y_168,w_3224,h_888/fill/w_2448,h_674,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/website%20banner.png)
Loo is a navigation app designed to help people locate nearby public restrooms.
My Roles
UX/ UI Design, Branding, Prototyping, Illustration
Team & Duration
Collaboration with Google UX designer Chang Yang
September 2022 - November 2022
Methodology
User surveys
User Personas
Competitive analysis
User flow map
Storyboards
Deliverables
User research, Low-Fidelity wireframes, High-Fidelity Mockups, Interactive Prototype
Project Background
Whether it's going to work, running errands, or enjoying a vacation, people are always on the go. However, there's always time to use the restroom. In fact, an average adult uses the restroom between 6-7 times a day.
Unfortunately, it's difficult to find a clean, safe public restroom when it's an unfamiliar place. To combat that issue, we created Loo: an app designed to help people navigate to free public restrooms in the local area.
Problem
When people travel to unfamiliar areas or cities, it is difficult and time-consuming to find free public restrooms. How might we help people conveniently locate a public restroom?
How do we solve this?
By working with my collaborator Chang, we researched and designed an app that focuses its core functions on restroom information and simple navigation.
![description page 1.png](https://static.wixstatic.com/media/6fa78e_cff9c241565047d392500a09b3c9fa08~mv2.png/v1/fill/w_441,h_894,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/description%20page%201.png)
![map view 1.png](https://static.wixstatic.com/media/6fa78e_20c3bb5946b247efb4d8209245d10570~mv2.png/v1/fill/w_441,h_894,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/map%20view%201.png)
![list view 1.png](https://static.wixstatic.com/media/6fa78e_bd30c912382e4e3798bffe78cd698ce4~mv2.png/v1/fill/w_441,h_894,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/list%20view%201.png)
Goals
Streamline the process by
Creating clear and concise navigation
Prioritizing relevant restroom information for users
Coordinating between businesses and users to ensure accurate information
How did we do this?
Please use the buttons below to navigate through this case study. You may also scroll through to view the entire process
Surveys
To gather better insight into our problem and users' needs, we created and sent out surveys to friends and social media groups to better understand their thoughts.
We asked questions like:
1.) What's the most important information you need when looking for a restroom?
2.) Are there any specifications you'd prefer for a restroom?
Survey Takeaways
1.
People would prefer the least amount of verbal communication to staff when looking for the restroom.
2.
Important information: where the restroom is located in the building, is there a password needed, is it handicap accessible, is there usually a wait time/ purchase required
3.
Would prefer to know information about the business and cleanliness ranking before navigating
Competitive Analysis
Researched 4 competitive apps
limited options for viewing restrooms
lack of restroom and business information
inability to navigate to the destination within the app
User Personas
![](https://static.wixstatic.com/media/6fa78e_b4ce6e79b723445cb68655e00e02ee37~mv2.png/v1/fill/w_935,h_526,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/6fa78e_b4ce6e79b723445cb68655e00e02ee37~mv2.png)
![](https://static.wixstatic.com/media/6fa78e_3bc99a4361df4c51a29fa9d33a5b5ce1~mv2.png/v1/fill/w_935,h_526,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/6fa78e_3bc99a4361df4c51a29fa9d33a5b5ce1~mv2.png)
User Flow Map
![Frame 28.png](https://static.wixstatic.com/media/6fa78e_cd403a5bad19466d95ebb4bf69055daf~mv2.png/v1/fill/w_935,h_526,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Frame%2028.png)
Storyboards
![Storyboard Big Picture 3.png](https://static.wixstatic.com/media/6fa78e_496d0e4fa9704173b0b6bb0b8207480f~mv2.png/v1/fill/w_936,h_526,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Storyboard%20Big%20Picture%203.png)
![Storyboard- Close up 2.png](https://static.wixstatic.com/media/6fa78e_a99e2f4c40234be686d3a1386fa74957~mv2.png/v1/fill/w_936,h_526,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Storyboard-%20Close%20up%202.png)
![toilet hand 2.png](https://static.wixstatic.com/media/6fa78e_17c2288b278a47f8a0227b0029593a75~mv2.png/v1/fill/w_227,h_158,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/toilet%20hand%202.png)
Ideate
How might we visualize users' needs?
Key Takeaways
Map and list view
Organize information in 2 alternative viewing options
Streamline user journey
Prioritize restroom info to reduce the confusion after arriving at the business
Simplified navigation
Reorganize app navigation to make it easier to pick a restroom
Affinity diagram
![Frame 29.png](https://static.wixstatic.com/media/6fa78e_3fda7e619242406ea8e5de8085a25abf~mv2.png/v1/fill/w_937,h_527,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Frame%2029.png)
Design
![toilet hand 2.png](https://static.wixstatic.com/media/6fa78e_17c2288b278a47f8a0227b0029593a75~mv2.png/v1/fill/w_227,h_158,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/toilet%20hand%202.png)
How might we create a product that aligns with users' needs and project scope?
Sketches
![Bathroom_Project_Paper_wireframes 1.png](https://static.wixstatic.com/media/6fa78e_ee7787c80613478292d19182c45800ea~mv2.png/v1/fill/w_939,h_725,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Bathroom_Project_Paper_wireframes%201.png)
![homepage_paper_wire_frame 2.png](https://static.wixstatic.com/media/6fa78e_372db22be56c42c58f1edd9bd051a270~mv2.png/v1/fill/w_939,h_726,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/homepage_paper_wire_frame%202.png)
Low-Fidelity Wireframes
![Onboarding 4.png](https://static.wixstatic.com/media/6fa78e_2ea0e92ee2384950b5629c2d167630b7~mv2.png/v1/fill/w_313,h_677,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Onboarding%204.png)
![Homepage (2).png](https://static.wixstatic.com/media/6fa78e_e3e3f8cdf0e5413e900dccaa0376ebaa~mv2.png/v1/fill/w_313,h_677,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Homepage%20(2).png)
![Navigation Page.png](https://static.wixstatic.com/media/6fa78e_2b9ce6e8774544c29063257c50be63c5~mv2.png/v1/fill/w_313,h_677,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Navigation%20Page.png)
![Business account homepage (2).png](https://static.wixstatic.com/media/6fa78e_0168d63c0d9041d4a31d3b545fb7163e~mv2.png/v1/crop/x_0,y_0,w_390,h_845/fill/w_313,h_678,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Business%20account%20homepage%20(2).png)
![List view.png](https://static.wixstatic.com/media/6fa78e_a782c1d8956c42d49e2f43d8473ecb73~mv2.png/v1/crop/x_0,y_0,w_390,h_845/fill/w_313,h_678,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/List%20view.png)
Low-Fidelity Prototype
User Tasks:
-
Create a business account through the onboarding process
-
From the list or map view, select and navigate to a restroom
![Screen Shot 2022-12-06 at 1.15 2.png](https://static.wixstatic.com/media/6fa78e_51986fdc32ec4fac9c5ceff8c311e67a~mv2.png/v1/fill/w_1137,h_704,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Screen%20Shot%202022-12-06%20at%201_15%202.png)
Reiterate
![toilet hand 2.png](https://static.wixstatic.com/media/6fa78e_17c2288b278a47f8a0227b0029593a75~mv2.png/v1/fill/w_227,h_158,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/toilet%20hand%202.png)
How might we evaluate our design?
![MU - Images homepage.png](https://static.wixstatic.com/media/6fa78e_cdb541892e96409b9e563a2ddd86021d~mv2.png/v1/fill/w_313,h_677,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/MU%20-%20Images%20homepage.png)
Mockups
![MU - Homepage (2).png](https://static.wixstatic.com/media/6fa78e_af856dcb051d4c3f97a88ca4536509aa~mv2.png/v1/fill/w_306,h_678,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/MU%20-%20Homepage%20(2).png)
![MU - Navigation Page.png](https://static.wixstatic.com/media/6fa78e_bec98cc82d5f4d838f27d9962d514ad3~mv2.png/v1/crop/x_0,y_0,w_1170,h_2533/fill/w_313,h_678,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/MU%20-%20Navigation%20Page.png)
![MU - Business homepage.png](https://static.wixstatic.com/media/6fa78e_45284d3ca45b4599b85dfa1d1b5df76a~mv2.png/v1/crop/x_0,y_0,w_1170,h_2536/fill/w_313,h_678,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/MU%20-%20Business%20homepage.png)
![MU - Business account homepage.png](https://static.wixstatic.com/media/6fa78e_3dfc336540e94b128bc9b1e56068cb6b~mv2.png/v1/crop/x_0,y_0,w_1170,h_2534/fill/w_313,h_678,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/MU%20-%20Business%20account%20homepage.png)
High-Fidelity Prototype
![](https://static.wixstatic.com/media/6fa78e_a7bc49cb61b246fd81aeddae4c97a22f~mv2.png/v1/fill/w_936,h_623,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/6fa78e_a7bc49cb61b246fd81aeddae4c97a22f~mv2.png)
Design Review
Validate the design
-
Updated font sizes for easier reading
-
Reorganized info spacing and placement for better navigation
-
Coordinated colors for easier accessibility
Key Takeaways
Impact:
-
An all-encompassing app where users can find and navigate to a public restroom
-
Cleaner, simplified process to find a restroom
What I learned:
-
User research, feedback, and iteration is the key to improving design
-
Multiple ways to evaluate and improve on ideas
Next Steps
Another usability study:
Can conduct another round of usability studies to confirm whether users' pain points were addressed effectively
More user research:
Can conduct more research through a larger user group to determine areas of improve
![](https://static.wixstatic.com/media/6fa78e_20c3bb5946b247efb4d8209245d10570~mv2.png/v1/crop/x_0,y_0,w_717,h_877/fill/w_296,h_362,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/6fa78e_20c3bb5946b247efb4d8209245d10570~mv2.png)
LOO
Case Study
![](https://static.wixstatic.com/media/6fa78e_17c2288b278a47f8a0227b0029593a75~mv2.png/v1/fill/w_366,h_254,al_c,q_85,enc_auto/6fa78e_17c2288b278a47f8a0227b0029593a75~mv2.png)
![description page 1.png](https://static.wixstatic.com/media/6fa78e_cff9c241565047d392500a09b3c9fa08~mv2.png/v1/crop/x_0,y_0,w_714,h_694/fill/w_266,h_259,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/description%20page%201.png)