iOS Alarm Interface redesign
Feature Design
The problem
In iOS 14, setting an alarm meant choosing between typing the time and scrolling through it. I found that combination confusing. I wanted to explore a more familiar way to set the time, using an interaction based on the hands of a table clock.
The original screens show where the interaction became awkward:
Setting the alarm time felt more complicated than it needed to be.
Two ways to enter the time added a decision before setting the alarm.
Editing an alarm required several taps; it couldn't be done directly from the first screen.
The app opened on World Clock. I wanted the Alarm tab to come first for this task.
My redesign
I redesigned the interface around familiar, physical objects, drawing on Apple's earlier approach. An analogue clock gives the alarm screen a clear starting point.
Open the app on the Alarm tab.
Use a tappable analogue clock, based on a table clock, to begin setting an alarm.
Let people swipe left on an alarm to edit or delete it from the first screen.
Set the time by moving the hour and minute hands.
I designed the screens in Figma and built the interactions in Protopie.
Try the prototype
Open the prototype link below in your browser, or in Protopie Player on your phone. You'll need Protopie installed on your computer to edit the source file.
I built the prototype so you can move the hands to any time, but saving always opens a screen with a predefined alarm. Set it to 6:30 AM to follow the intended flow. Saving arbitrary times would need further work.
Tools
Figma · Protopie · iOS · Open-source .pie file
Source file
Prototype
