My role:
sole UI designer
My deliverables:
User persona, 1 set of wireframes
Problem:
Although alarms are relatively effective as of now, people continue to sleep through alarms or the opposite, have alarms go off when they're unneeded.
Goal:
Design an alarm clock mobile app that allows user to only have the alarms they need always when they want them while making morning tasks, such as checking notifications from other apps and planning one's schedule, be a seamless part of the app experience.
Assumptions:
Users are familiar with how to navigate smartphones and used to existing patterns of using mobile apps.
Creating a user persona:
I started by researching most common issues with current alarm clocks and alarm apps which informed the user persona (above) that I created. Then, I worked to design an alarm clock app with a nightly reminder of when the users next alarm so they can edit the alarms the night before if there is a mistake so they can wake up reliably, as well as escalating alarms that get louder and more high pitched the longer they are left ringing for those who sleep through the alarm.
Paper sketching/wireframe planning
Wireframes using Whimsical:
Usability Testing:
I conducted 4 user tests with a convenience sample of Tufts undergraduate students. Overall, users found that the app was intuitive and useful.
Issues found:
- users did not know what R meant
- users found the edit/delete on the left-hand side of the alarms when editing to be visually unappealing
- users had a vague-but not clear-understanding of what nightly reminders, soft alerts, and escalating alarms are
Design rationale:
- Gradient: I chose a sunny gradient to correspond with the name of the app. Particularly, the gradient goes from light to dark to parallel how the times are listed chronologically, from earlier in the day to later.
- Alarm details: The name of the alarm is in smaller text and under the time because the user is most concerned about confirming the time of the alarm and that it will go off as wanted. I chose to list the details of the alarm to the right of the time following a left to right reading convention where primary information is listed first and secondary information is to the right. To reduce on text, I utilized icons and abbreviations. The formatting is consistent from alarm to alarm so that the user can check the details of the alarm without trying to figuring out which details are being shown for each alarm. The AM/PM are written vertically since the goal of this page is to feel like a skimmable grid with clear columns and clear rows.
- Edit page: I tried to make as many things as possible editable without being clicked into. This was my basis for the picker, the am/pm tap toggle, the days of the week tap/slide feature, the type fields for alarm name and alert/snooze times, and the soft alert and snooze toggle. From the usability test, I added a page explaining what those features are if a user is unclear.
- Slide up to dismiss alarm: One can frequently mispress a button on their phone. In order to prevent this when waking up/grabbing the phone as the alarm rings, the user must slide to dismiss or snooze alarm rather than tap.
Next Steps:
Consolidate soft alert and escalating snooze edit pages into a single edit page.
Add escalating alarms in addition to escalating snooze.
