SafeTime for iOS

SafeTime for iOS
SafeTime for iOS
SafeTime for iOS
Final wireframe spec (PDF)

Project Overview

SafeTime is in the process of creating a personal keychain alarm that, when activated, will alert friends and family with your location, letting them know you're in trouble. The device connects to your iPhone via bluetooth and can be configured with the app I designed. My final deliverables were a user flow diagram and a complete deck of wireframes.

Info Gathering

In their business plan, SafeTime tightly defined their target users as female college students living on or around campus who owned an iPhone (since we were only designing for iOS for now). Having such a specific audience was helpful throughout the entire process of designing this app. With a sister in college, I already knew a lot about the problem we were trying to solve, and had a target user ready and willing to answer questions as we went along.

After a few rounds of discussion, we were able to distill I final list of requirements for version 1.0. Some of these included details about the user onboarding process, account safety, and verification that the device would indeed work should it be needed.

Some early ideas

As I began the project, I quickly realized that the first time user setup was going to be the largest and most difficult part of the app. I started with a user flow diagram that laid out the "happy path" as well as a smattering of edge cases:

A chunk of the first time user flow

As the user flow took form, it became clear what screens we needed to design. Here are a few early sketches:

sketches
A few early screens

As I refined the designs, I met regularly with Josie at SafeTime to explain how I was solving problems and to get feedback from her. We worked well together; we communicated consistently and were always on the same page.

Final Design

As noted above, a majority of my time went into the first time user flow. In the three screens below, a user sets up their account and is then asked to add at least one emergency contact. I made adding contacts a part of initial setup because without adding emergency contacts, pressing your keychain alarm does nothing (there's no one to contact). I designed this flow to not only help guide the user through that process, but also to make sure their device would work if they found themselves in a tight spot.

wireframes
Three screens from the first time user flow

Another screen from the final design is the Dashboard. This is the first screen shown to returning users when opening the app. Here, a user can see the current system status and be reassured that everything is connected and working properly (increasing their feeling of safety — that's what the app is for right?).

dashboard
A screenshot of the (heavily annotated) Dashboard page from the wireframe deck — the full PDF is available below
Final wireframe spec (PDF) Back to my work