case study: personal safety app

ui/ux review (audit)

general notes

increase dimension of areas the user needs to interact with (think finger size and not pixel size). place frequently-used buttons at the bottom of the screen, because they are comfortably reached with one thumb. implement common swipe gestures, and show affordances when a particular interaction might be overlooked. ensure sufficient font size and contrast of text on background.

mobile screen thumb stretch comfort areas

splash screen and before-signup screen

use a caption to tell users immediately what the app is about (suggestion: “know where your loved ones are”). introduce a simple call-to-action (“swipe to see how”) for a quick onboarding tour before signup (register). the onboarding tour helps first time users.

splash screen and before sign-up screen

onboarding

simply and briefly explain the app’s main features. limit the onboarding to 4-5 screens max and show progress (small circles). allow users to “skip” (this brings the user back to the before-signup screen). functionality: swipe to see next screen.

onboarding screens

register and login

register. this screen requires careful consideration. only ask the user for what is essential at the signup stage (registration). avoid user fatigue and collect the remaining data at a later stage. a reduction in user fatigue increases conversion rates. don’t ask for password confirmation. tick by default the terms and conditions acceptance. the “organization” and “individual” options might introduce doubts in the user’s mind (is this distinction necessary at this stage?). consider whether you need all this info, and remove if unnecessary: address, postal code, country, state, city, phone number, person designation.

register and login screens

list of devices (homepage)

the “hamburger icon” (to access the slide-out menu) is located at the bottom of the screen estate and is always visible. next to it, the “notifications icon” is also always visible (at least on the homepage). when the app is used for the first time, there are no connected devices. a quick note explains where to tap to add a device (“plus icon”). once several devices are connected (Susan, John, etc.), they are shown starting from the bottom of the screen. avoid the “Edit icon” next to each device/name (as per current implementation); the settings will be accessible once a device is selected.

list of devices screen

slide-out menu

the slide-out menu is accessed by tapping the hamburger icon (as well as sliding from the left edge, as currently implemented). the most important and frequently used items (e.g. devices, geo-fences) are located at the bottom. consider reducing the number of menu items (ideally to a maximum of 7). ensure that they are all visible without scrolling.

slide out menu screen

device

this screen is reached once a device is selected from the homepage (e.g. John). in the navigation at the bottom of the screen, the “go back icon” and “settings icon” are added. the “settings icon” allows a user to edit the device details. the two main options (real time tracking and history tracking) are prominently shown. details for this particular device (e.g. icon, photo, number, etc.) can be shown in the upper part of the screen estate.

device screen

real time tracking

full screen map. name of tracked device on top.

real time tracking screen

history tracking

flow: from > select date > select time > confirmation (feedback). when selecting the date, the calendar is fully shown (including the days of the week). swipe to change the month. once the date is selected, the screen switches automatically to time. here: clearly separate the 3 sections (hour, minute, AM/PM) and show the selected elements with a heavier and bigger font. after tapping “OK” the selected date and time are shown on the “from” button.

history tracking screen

list of geo-fences and new geo-fence

when creating a new geo-fence (after tapping the “plus icon” on the list of geo-fences screen): allow the user to select the center of the fence by tapping on the map. it’s difficult to do so by moving the map instead (current implementation). shape: consider removing the rectangle shape unless this is absolutely necessary. dimension: consider the use of values inputted by the user instead of the slider.

list of geo fences screen