Nightcap (mobile application)

UX Tools: Sketch, InVision, Flinto, OmniGraffle, Illustrator, and Photoshop
Time Frame: 2 weeks

The Problem

Johnny Lau, a classmate of mine, was having a difficult time getting to be on time after working the late shift at his bartending/serving job. Johnny would try ending the night with a drink and a movie. Inevitably, this would end in staying up a bit later than expected. Thus the following morning he would sleep in late and start his day later than expected.

The Solution

After conducting three long interviews to get a bit more in-depth of his daily and weekly activities, it was through this research that I came up with an alarm clock/personal activities aggregator. The alarm will wake Johnny on time as expected, but with a twist. Rather than hitting the snooze button, his personal taste in music will be playing along with the activities his friends are doing for the day. Along with getting news that pertains to Johnny's current day.

“I’ve always been ready to switch paths in life to achieve goals.”
~ Johnny Lau

Sketching / Paper Prototyping

With the sketching complete, and the user flow drawn out, I imported the images into InVision. With a live prototype I was able to user test the application with three people. With the feedback I was able to make several more iterations before I was able to go to a high fidelity prototype.

High Fidelity Screens

Below you will be walked through the creation of an alarm for your daily work schedule using high fidelity screen shots. 

Intro Page: The Screen introduces the application with a sheep looking to get sleep as it moves on screen.
Log In Screens (1): If you Log In or Register you will be able to save all your feeds and alarm setting. If you sign in as Guest, you will still be able to do all the things you could do as if you had chose to Log In or Register. But as soon as you close Nightcap as a Guest, all your information will be cleaned from the application.
Sign Up/Register (2): Selecting this option will take you to the Register screen where you enter some basic information.
Profile (3): Here you save a picture, scan your phone or manually enter apps that you use in your daily routine.
Alarm Setting (4): All your profile settings will be displayed in this location. At this point you will be prompted to enter your wake time.
Set Alarm Time (5): You can enter the time, day of the week, snooze settings and tone or music to wake up to.
Name Alarm (6): After all your alarm settings are complete you will need to name and save the alarm.
Alarm Settings (7): Now you have your time, alarm name and frequently used applications displayed. At this point you can make one last adjustment.
Select Alarm (8): You have a clear display of your saved list of alarms for different activities.
Alarm activated (9): The time has come and your alarm is playing your favorite music from your steaming music provider and is displaying all your feeds. Now rather than just hitting the snooze button, you are drawn into what’s going on in your community and what friends are doing that day. So you can select to read for a bit or get motivated to start your day immediately.