Wireframes
This page introduces the AlarmFlow wireframes and explains how users complete the key task of setting alarms. We will follow Mark Miller’s scenario from “Personas and Scenarios.” Mark wants to set six alarms at five-minute intervals between 6:00 AM and 6:25 AM, and he wants to do so with as few taps as possible before going to sleep.
The wireframe shows the continuous flow of the process, from opening the app to completing the alarm setup.
Mark opens AlarmFlow. The dashboard is the app’s only management screen; it displays the start time, end time, and interval of the current alarm settings, with a “Create Alarm Set” button at the bottom. The displayed values (12:00 / 13:00 / every 2 minutes) are carried over from his last edit, so he doesn't need to reconfigure them from scratch. The "X" labeled “Delete Alarm” on the left removes the alarm set from the dashboard. You can also delete it by double-tapping the row. To adjust the alarm set for tomorrow morning’s schedule, Mark taps “Change Start Time.”
The start time selection screen appears, displaying a scroll wheel for setting the hour and minute. The rest of the dashboard is dimmed so you can focus on the selection at hand. The top bar contains two control buttons. The “Remove Changes” button on the left discards all changes made on this selection screen and returns you to the dashboard, while the checkmark on the right saves them. Mark sets the hour wheel to 6, leaves the minutes at 00, and taps “Save.”
The dashboard appears, and the start time has been updated to 6:00. The end time and interval remain unchanged. Next, he taps "Change End Time.”
The end time selection screen appears with the same layout as the start time selection screen. This ensures consistency, so Mark doesn’t have to learn how to use it all over again. He sets the end time to 6:25 and taps “Save.”
The dashboard shows a start time of 6:00 and an end time of 6:25. Since the interval is still set to “every 2 minutes” from Mark’s previous session, he taps “Change Interval” to adjust it.
Instead of a scroll wheel, the interval selector displays a short list of preset options (1, 2, 3, 5 minutes, and additional options up to 60 minutes accessible by scrolling). Since the interval options are limited, it’s faster to scan through the list and tap an option than to use the wheel. Mark taps “5 minutes.”
The dashboard currently displays “Start 6:00 / End 6:25 / Interval every 5 minutes.” Since all three required fields have been filled in, the “Create Alarm Set” button becomes active. Mark taps that button.
The dashboard switches to a compact overview view showing the saved alarm settings (Start time: 6:00 / End time: 6:25 / Interval: 5 minutes) and an on/off toggle on the right. Here, Mark can enable or disable the entire set with a single tap. This addresses the latter part of his scenario, where he wants to avoid the hassle of tapping each remaining alarm one by one to silence them before boarding the train. Since only one alarm set is displayed on the dashboard in this walkthrough, only one toggle is shown; however, if there are additional alarm sets, they will appear as separate rows, each with its own toggle.