Image for post
Image for post

Apple Watch Journey— Learning Through Doing.

Originally published on Smashing Magazine.

One sunny morning in the summer of 2014, I was sitting in a café having just finished an hour-long call with my remote team. I had some free time on my hands, so I pulled my notebook out and started playing around with an iWatch app idea. Yeah, you read that right — 2014 and iWatch, before a watch had ever been announced.

Image for post
Image for post
24 hours” first drawing, entry from author’s notebook.

It’s a story with an unexpected ending

We started with the problem — making time zones easier to handle — and learned a lot along the way, including a surprise we received at the very end.

Image for post
Image for post
‘24 Hours’ app for iPhone and Apple Watch
Image for post
Image for post
‘24 Hours’ app for Apple Watch

The problem

The problem before the watch problem, that is. We wanted to solve a headache this new world of interconnectivity created. With the Internet and mobile, communication became really easy. So easy that people all over the world can now chat, work, and play as if they’re in the same room. Except they aren’t: the earth is still round, it still spins, and that creates time zones. That creates a problem.

Image for post
Image for post
Author’s dashboard with multiple timezones and names of people who live in these timezones.

The way people measure time is screwed up, and there’s little we can do about it

Most of us have ten fingers. We count to ten in pre-school. One meter is a hundred cantimeters, there’s a hundred pennies in a dollar, etc. Our brain is trained for and constantly reminded of the decimal system. In fact, many of us don’t think there’s any other way to count: 9+9 is always 18. Until we start measuring time.

Image for post
Image for post
Ancient Egyptian sundial (c. 1500 BC) from the Valley of the Kings. Daytime divided into 12 parts.

First Solution

World Clock app for Mac

To solve this problem of time, we started with a World Clock app for Mac. It allows you to quickly convert time by dragging a shadow over a world map. While you drag, all clocks will adjust their time according to the position of the shadow. To find a suitable time, just keep dragging until one of the clocks shows the time you want.

Image for post
Image for post
World Clock” for Mac.
Image for post
Image for post
World Clock” for Mac in action
Image for post
Image for post
World Clock Widget in action

Mobile Version Struggle

We solved the time-conversion problem for big screens, but everything we tried for smaller devices never felt quite right.

Image for post
Image for post
“24 Hours” for iOS concepts.

Intensifying the conflict

At Minimum we sometimes use the principle of intensifying the conflict: make the contradiction 10, 100, 1000 times more intense than the original problem. This forces us to look at the problem in a completely different way and often helps us find unusual solutions.

“Wrist-first” approach distilled our thinking

We were stuck until Moto 360 came along, and Apple Watch rumors started to leak. That’s when I started playing around with a wrist-worn version of our World Clock Mac app.

Image for post
Image for post

Second Solution:

“24 Hours” app for iPhone and Apple Watch

Ironic cliché: the solution was staring at us the entire time. Have a look at the icon of our World Clock Mac app.

Image for post
Image for post
World Clock Mac icon
Image for post
Image for post
Image for post
Image for post
24-hour clock face concept for “24 hours” app.

The trade-off

Remember: our goal was not to re-invent the clock, or make a better one, we just wanted to make telling and converting international times easier.
We decided that using a 24 hour face is a fair trade-off:
it’s not as familiar as a 12-hour clock face. People would have to get used to it, but they’d have a much easier way of telling and converting times once they do. We decided this was a fair trade-off.

The process

Image for post
Image for post

Prototype

How do you design for a product that doesn’t exist yet? Since we started before Apple Watch was ever announced, we decided to prototype on an iPhone.

Image for post
Image for post
Image for post
Image for post
‘24 Hours’ prototype with rotating clock face (the original build of the app was lost).
Image for post
Image for post
Map view makes one-thumb interactions easier (if you don’t go overboard).
Image for post
Image for post
Image for post
Image for post
Image credit: mstarz.com

External factor #1: iPhone 6 is released

iPhone 6 was beautiful — and black. We liked how the screen became virtually indistinguishable from the hardware, so we decided to switch our gamma to black to support this effect.

Image for post
Image for post
Image for post
Image for post
Image credit: mirror.co.uk

External Factor #2: Apple Watch gets announced

We were really happy about the watch when we finally saw it. (Who wouldn’t?) We were glad we’d started planning an app for it so early, and felt prepared to make something awesome by the time Apple Watch went on sale. But it was hard to stop calling it “iWatch.”

Image for post
Image for post
Image for post
Image for post
Images from Apple’s website showcasing Apple Watch world clock feature.

Using the crown

The Apple Watch crown really excited us. We couldn’t imagine a better user interface for a world-clock app: people are already used to twisting the crown to rotate watch hands. What could be simpler! Only now there would be more than two hands.

Image for post
Image for post
Sketch made September 10, 2014. (Author lives in Australia so it was September 9 in California.)
Image for post
Image for post

Around this time we did our first test
with external users.

Bad news: almost everyone looked at the iOS prototype above and assumed that the clock face they saw was a normal 12-hour face clock. After looking closer they would notice that number 12 and number 6 repeats twice. That would get them completely confused. Clearly, we needed to make our 24-hour face more different, which in turn will make it obvious and self-explanatory. At least we hoped so.

Image for post
Image for post
Image for post
Image for post
A globe with a 24-hour dial
Image for post
Image for post
Image for post
Image for post
Rotating face belongs in a flight simulator, not on someone’s phone or watch.

Apple Watch challenges

Since we started prototyping before an Apple Watch even existed, our original plan was to scale down our iOS design. But the Apple Watch turned out to be tiny. We couldn’t just shrink our existing UI.

Image for post
Image for post
Image for post
Image for post
Trying to find the best way to present information between night and day.

Prototyping without Apple Watch

Since the Apple Watch wasn’t out in the world yet, we strapped iPhones to our wrists. This prototype had the correct Apple Watch measurements.

Image for post
Image for post
“Trying on” Apple Watch

Reality sets in

Playing with the prototypes was fun. At one point we got carried away with additional functions: adding clocks, a map, calendar events — all of which can theoretically be done on your Apple Watch:

Image for post
Image for post
Image for post
Image for post

Converting Time

When a user twisted the crown, or spun the clock hands, time would shift from “Now” to the future or the past.

Image for post
Image for post

Accounting for color blindness

This future/past addition created a new problem: green and red wouldn’t work very well for people who have color blindness. If you color blind, red and green could become yellow and gray, you could still distinguish between the two, so you can tell whether you converted time forward or backwards, but we felt that it wasn’t elegant and could be confusing.

Image for post
Image for post
24 Hours” app color-blind test
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
24 Hours” app screenshots adjusted for various iPhone models

Working around constraints

Here’s how we saw our “perfect” product at the time:

Crown wasn’t yet available to 3rd-party developers

Newer versions of Watch Kit didn’t show any sign of crown control, so we had to come up with something that would work in a meantime. We decided to try swiping/panning gestures:

Image for post
Image for post

Time to ship something

We realized that Watch Kit probably won’t be updated soon enough for us to fully realize the potential of our concept in time. We needed to ship something before Apple Watch went on sale so we worked with what was available. That’s what you sign up for when you are trying to be among the first delivering a product on a completely new platform.

Real-time video of “24 Hours” prototype for Apple Watch. (With animations.)
Real-time video of “24 Hours” prototype for Apple Watch. (Without animations.)

Shipping

At this point we decided to temporarily turn off the time-conversion feature on Apple Watch version of the app. Our iOS version would be used to it’s full potential while Apple Watch could be used to just tell times at different locations.

Unexpected rejection

The Apple team must have been on the lookout for apps that offer Apple Watch support because It didn’t take them long to reject our build:

Image for post
Image for post

Releasing iOS-only version (for now)

We stripped our iOS app of Apple Watch support and submitted again. This time it was approved.

Product and UX-design and strategy, Crypto UX. Spetsnaz Brigade Commander at Hey Alex! | heyalex.io | Co-founder @extra_foods |

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store