Objective:
+ create a simple to use, fully featured, expandable clock app for Windows 8 that aligns with Windows 8 app design guidelines
My Role:
+ concept, spec, execute all aspects of design for a full Windows 8 clock app
+ collaborated with developers at AttackPattern on development/deployment
Overview
The guys at AttackPattern and I teamed up to create a Windows 8 clock app. The goal was to make a simple yet engaging clock app and have it available at launch of the new Windows 8 app store. I was commissioned to design all the visuals and interactions for the app while AttackPattern would take care of development and deployment.
Initial logo explorations
I knew I wanted to keep the app branding simple, and the simplest name for a clock app? "Clock App". :)
But that wasn't brand-worthy. So I knocked out the extra extra "c", to reinforce how simple the app would be (So simple, it takes one less letter to spell! :) .
Below are some initial logo concepts. The idea was to spell the name of the app out using the elements of a clock face. Not exactly the newest idea under the sun, but, it's simple and memorable.
Final Logo
Below is the final logo - sometimes you'll see it without the extra set of clock hands in the "o".
Final Clok Face Layout
The main use of the app would, not surprisingly, be a clock face that displays current time, date, weather, and any active alarms. The layout (final below) scales to any screen resolution.
Default face while idle
Default face while app bar envoked
Clok would have a clean but recognizable default visual style, but I felt there was room here to make the app a bit more expandable. So I pitched the idea of having the app free to download, but eventually release "Clok Paks"; extensions of the app that could be purchased that would change the visual theme of Clok.
Each "pak" would come with 4 visual variations on a theme that the user could switch by tapping/clicking "Change Face" in the app bar (i.e. the "Future Pak" would have all new fonts, backgrounds, and styles that are sci-fi themed).
Interactions
Below are videos illustrating the main interactions within the app.
With most design projects I try my best to create "animated wireframes" from the start; something in-between a full visual comp, a prototype, and a wireframe. So what you see here is largely unfinished, but close enough. I find this works best in not only telling the product story but as a communication tool between myself and engineers.
Two simple timer features are available in Clok - countdown and stopwatch. Countdown has a fun way of visually letting you know (besides the time itself) when time is up. Stopwatch has a nice feature that lets you export/save your records.
The feature we were most excited about, Lullaby. Turn on Lullaby to soothe yourself to sleep - either for a quick nap or a full night. Lullaby plays an ambient sound of your choice for a set amount of time. It combines the sound with a soothing animated visual to help you relax and get some rest (i.e. sounds of waves + visual of a tranquil seashore).
What good would a clock app be without alarms? Not good at all. Here you can set alarms easily using some of the interaction patterns of Win8
Settings would be handled by the settings "charm" of the WIn8 OS
An App Deferred
In light of less-than-stellar Windows 8 app store sales, the decision was made to hold off on production of Clok before full development started. Despite the set-back designing Clok was a great exercise in Windows 8 app design. I look forward to producing more apps for the Windows platform in the future.
Some of my spec work from the design phase is below.
At least I got some good speccing exercise in :)