SP_AC_HeaderTitle@3x
SP_AC_Img_AlarmClock

PROBLEM

The goal of this project was to find a clock UI that made telling the current time, as well as the time of any alarm (and whether or not it was set) unmistakable. Countless instances of setting alarms for the wrong time, or mistakenly assuming one had been set, had surfaced the dire inadequacy of current interfaces in communicating AM/PM and alarm status (communicated, in this case, by only the presence or absence of a dot.) That an indicator could be so subtle as to undermine a product's core purpose only served to underscore the salience of this problem.

RESEARCH

After some reflection, I concluded that the root of the problem I was solving was not about puntuality, but rather intuitive time-telling. There are myriad reasons people need to tell time, and, as my ease confusing one time for another had shown, modern time-telling had become so abstract as to sometimes undermine people’s ability to do so. As such, my explorations would seek to re-ground timetelling in familiar visual models drawn from common human experience.

SP_AC_Img_Sundial
SP_AC_Image_ElapsedTime

ITERATION

The exploration process involved scouring and emulating numerous precedents, both historical (sundials, hourglasses, candles), natural (light and shadow, rotation), and industry-adjacent (loaders and progress bars, such as the one pictured below.) However, despite the advantages these offered in terms of an intuitively quick learning curve, they fell short in their imprecision and radical dissimilarity from convential timepieces, a dissimilarity stark enough to potentially deter adoption. Thus, it was determined that an ideal solution would need to marry more intuitive timetelling with some degree of conventional precedent.

SP_AC_Img_ProgressBar

SOLUTION

The eventual solution aimed to combine the best of both worlds. It played off of familiar form factors and featured the familiar central numerical display for at-a-glance readability. But, importantly, it added a layer of unmistakeable visual metaphor to drive subconscious understanding and circumvent the type of user error that provided the impetus for this project. Namely, it synthesized the familar perimetric motion of clock hands with the original timeteller for all Earthlings—the sun—to create a 24-hour clock with a sun that rises and sets in real-time. As shown below, this would allow clear and easy visual distinction between numerically identical times-of-day.

SP_AC_Img_Section-Noon-Midnight

INTERACTION

Of course, this solution would be little more than window dressing if not used to address the original prompt. Accordingly, the same interface component that houses the 24-hour sun cycle also serves as the means for setting and viewing alarms. Simply tap and drag along the perimeter to set an alarm, and the alarm will be triggered once reached by the virtual sun. This iconographic alarm indicator, besides offering vastly more semantic clarity over its dot-based predecessors, also avoids the possibility of being set for the wrong half of the day due to its being positioned relative to the sun. All in all, the solution provides an amount of clarity and ease that one should not mind waking up to.

SP_AC_Img_SectionLast