top of page
conceputalization of the logo actually came before the concept and design of the clock face but they each had an impact upon each other.
the initial logo concept moved from the simple type treatment to dropping all of the vowels in favor an even more minimalistic approach to the logo design to incorporating the soft, glowing animation and tittle seconds marker from the clock face to replace the two letter “i”’s in the logotype, using only the tittle to serve two purposes in communicating the letters “i” and the seconds marker. minor fine tuning included softening the corners of the “M” and “N” to compliment the static and animated versions of the logo.
in the end, the logotype created for this concept flowed fluidly to communicate the importance of minimal design without sacrificing the concept of time. it also pays an homage to the modaine simplicity of design.
logo design°
once the wireframe for the watch face ui and ux was completed, the process of the actual build and design of clock face posed many issues but with some creative solutions and approaches, those hurdles were overcome.
below is a quick animation of the initial layout of the clock face. the original design called for most of the numbers on the clock face to be displayed (ghosted back) but with overlapping numbers and dots made for a very busy design. the solution, in this instance, was to remove any numbers / dots that were not necessary in showing “time”.
design°
s1
this is the main screen with the primary clock face. From here, depending on the user swipe direction, can go to sub-screens for deeper interaction beyond time keeping.
the user can also perform a single tap on the screen to access s1.4, the settings screen.
also, the use of 3d touch on this screen will reveal additional information based on the clock face it’s performed on.
s1.1
with the first swipe to the right, is the primary clock face’s alarm / alert screen. from there, the user can choose either to set a new alarm or alert. the alarm is based on the primary clock face’s timezone and current time, whereas the alert is an option where the user creates alerts based on a single or multiple / repeating countdowns (i.e. every hour, every 15 minutes, etc.)
that time is set using the digital crown on the watch.
s1.2
the second sub-function that is linked to the clock face is a timer / stopwatch feature that allows for the user to set the timer using the digital crown to set the desired countdown (seconds, minutes, hours) or by simply pressing the digital crown in without turning it to start the stopwatch (and stop by the stopwatch by pressing the digital crown in again).
at the end of the timer, the watch will buzz as a means to notify the user if they are not looking at the screen.
s1.2
the second sub-function to the timer / stopwatch feature that allows for the user to set the simply start the stopwatch by pushing down on the digital crown and to stop it by pushing down the digital crown again.
to continue with the current stopwatch (once it has been stopped) can be done by pushing down the digital crown once, or to clear it by pushing down the digital crown twice in quick successions.
s1.3
if the watch is connected via bluetooth to a smartphone or via wifi to a network, then weather information can be updated the moment the user swipes to the left screen.
the weather screen will display the weather based on the city / timezone of the linked clock face. high’s and low’s both displayed along with other weather related information (sunny, thunderstorms, etc.).
s1.4
by performing a single tap to the clock face (primary or any secondary clock face) will take the user to the settings screen. from here, the user can change options from the settings options menu (i.e. disabling daylight savings mode, designate the current clock face as the primary clock face, etc.).
s1.5
using the 3d touch functionality on the clock face will allow the user to see additional information either from the main (s1 or s3+) screen or the weather (s1.3) screen.
s2
to add an additional timezone / clock face, all the user need to do is swipe down from the main s1 and by using the digital crown, scroll through to the desired city / timezone and press down on the digital crown to make the selection (or drill down to additional choices).
this new clock face can be accessed from s1 by swiping up to additional clock faces.
s3+
this screen is any additional clock faces (accessed by swiping to the “above” screens) that is added along with the main clock face. all additional clock faces will have the same sub-functions as the main s1 clock faces. clock faces can change from a secondary to primary clock face and vice versa.
s4
this is an error pop-up notification that could appear on any of the screens and the code will determine where the error message is originating from. this pop-up can be closed by tapping on the notification bubble.
a1
this is purely an action where the user, from any screen, taps the screen twice (double tap) will take the user back to the primary / home (s1) clock face.
being a fan of swiss design and enjoying the visual simplicity of the swiss railway clock, owned by modaine, i planned out to create a clock face design that could only function on a digital/smart watch interface. and by taking visual cues and movements from the iconic swiss clock, maintain its simplicity and elegance, but also move a step towards further embracing the digital realm our world is quickly integrating with.
so, by taking the most popular smart watch, the apple watch, and designing specifically for its capabilities, and taking visual inspiration from modaine, this “smart” clock, in its simplicity, not only functions as a reliable clock to tell its viewer time, that is quick and efficient, but also has a depth of sub-functions that allows for the user to garner more information, if the user so desires, thus increasing the richness of the user experience.
inspiration°
to bring about the most efficient mode of displaying time without sacrificing functionality that’s become synonymous with smart watches, certain aspects of the watch face was prioritized while what was considered “non-essential” was relegated to nested menu items that could be accessed through finger swipes, or taps on the watch screen by the user.
this hierarchy of information was broken down to the second and the blinking animation to give a sense of the passing of time.
wireframe / ui°
american designed.
swiss inspired.
mnml
bottom of page