Moyori

Toilet and ATM finder
Individual | 10 weeks | UI Design and Swift scriping

Introduction

The Moyori app, which locates ATMs and toilets nearby and directs users there, is the app that will be put to the test. The user can access a detailed view of each site that includes basic information on the restrooms or ATMs there, such as operating hours, ratings, and facility surcharges, as well as an overall list view of nearby restrooms and ATMs. Users may input all the basic information about the facilities via the app, and if they discover that a restroom or ATM is not there where it should be, they can also report it in the app. This information is then added to a database of restrooms and ATMs.

Functional / Non-functional Requirements:

Before starting to think of the design of the prototype, I searched for the existing app. Since Jizoku consists of three functions (food diary, food offers and food recipes). I searched for different apps with different functions and got some ideas.

Functional Requirement

• The map API should be loaded after selecting the navigation button
• The addition of toilet/ATM or any issue reported should be successfully submitted to the server and reviewed by the admin before updating
• When anything is updated on the toilet/ATM list, it should be updated on all platforms (phone, tablet, web version) simultaneously.
• When the users input a postcode in the search bar, the postcode should be able to convert to an address and show the nominated location on the map
• The map on the home should be updated with the user’s current location

Non-functional Requirement

• The app should be able to come up with the result after 3 second
• The navigation map should be able to load within 5 second
• The processing of each request should be done within 10 seconds
• The app should be portable, it should be working with no problem when the OS is updated.
• All the data saved in the app by the user (i.e. saved toilets, searching history) should not be leaked to anyone except the admin.

Wireframes

Toilet Nearby
Here is the user flow of the toilet nearby. The home page shows the toilet next to them currently. And users can also search for toilets in nominated place in the search bar, when they click into one of the places, all the toilets in that place and the details (i.e. opening hours, locked or not, disabled access, charged or not and the exact location of the toilets) are shown. 

ATM Nearby
Here is the user flow of the toilet nearby. The home page shows the ATM next to them currently. And users can also search for ATMs in nominated place in the search bar, when they click on one of the places, all the ATMs in that place and the details (i.e. opening hours, ATM surcharge, card that the ATM receive and the exact location of the toilets) are shown.

Wireframe of Toilet nearby

Wireframe of ATM nearby

User Flow

App lifecycle

Not running
In this mode, the app does not execute any action and does not have the cache memory like the search history. But the data like bookmarked ATM/toilet is still in the app memory.

Inactive mode
In this mode, the app is initiated, and the app isn’t doing any touching events.

Active mode
The app is active in the foreground so all the functions of the app will be active.

Background mode
In the state of background mode, if the user is running another app but puts this app in the background, the navigation will still be working if it is being used. If it has been reopened, the UI looks the same as how it looks for the last time.

Suspended mode
When is app is closed, the app won’t allow any further action, and the navigation will be terminated. But the search history won’t be deleted.