Apple Clock
A revamp of Apple's native clock app.
WHAT
Case Study
WHERE
San Francisco, CA
WHEN
November 2018
Clock App
The project started with a simple enough problem:
People set multiple alarms to wake up in the morning instead of using the Bedtime section of the Clock.
This is not how the app was intended to be used and it should be adapted to the user's needs.
Research
The case study started with a survey of people to guage how they use their alarm and what pain points they might experience within the app.
Survey
Interviews
Apple has a built in section for users that want to utilize the clock app for their primary way of waking up. This feature is called Bedtime.
Of the survey respondents, 62% had never noticed the bedtime feature, and the others that did know about it had never used it.
After the survey, I conducted interviews of four of the survey respondents. Each one had a different perspective and way of using the clock app. Three of them also mentioned that they would like the option to set multiple timers at once. People also tend to set the same timers over and over again.
The Bedtime App
It became clear that two sections of the app needed to be redesigned...
Alarm
I set out to redesign the Alarm section of the app to make it more user friendly by adding intuitive gesture control and menus.
The addition of "disarm challenges" would help prevent users from oversleeping by making it more difficult to fully deactivate the alarm.
Timer
The timer redesign would be simple enough: make it possible to add a timer once one is already going. The challenge would be to make it look natural if someone added more than just one. The currently running timers would have to stack and scroll behind the bottom menu. When none are activated, the recent timers will show up at the bottom.
Original Screens
Persona
I created a user persona based on survey and interviews. This would be a person who represents the users from the survey and interviews.
Ideate
Working within the framework of the existing app, I sketched out some solutions for the wireframes of the added functionality of the app.
Alarm Wireframes
In XD, I recreated the basic functionality of the alarm section of the app and connected it more naturally to the Bedtime section. Within the options page, I added Disarm Challenge and created the necessary sub pages as overlays.
The Challenges are four sections:
Math, Picture, Speech, and Movement.
Math
The user will be required to solve a math problem of adjustable difficulty in order to fully disarm the alarm.
The challenge can also be applied to the snooze button.
Picture
Upon activating this option, the user will have to take a picture of something away from their bed in order to let the app know that they are up and awake.
The recommendation is something outside of the bedroom.
Speech
The user will have to speak a phrase dictated to them by the alarm app. For example, the text will read, "I solemnly swear that I am up to no good" and the user will have to speak that out loud in order to disarm the alarm.
Alarm Screen Redesign
Timer Wireframes
The timer portion of the project was simple enough: add a button to enable the user to create a new timer once one was already running. This, however, lead to the problem of how to visualize the running timers, if more than two were running at a time.
Screens
New screens needed to be created using the existing design language and form. The results are so similar that the user of the prototype wouldn't know the difference between it and the real app.
Animation
The simplicity of the solution is enhanced by a minor but effective animation of the timer dropping down as the new timer selection pops up. This allows the user to track where each timer falls on the heirarchy below.
