Making an app for Apple Watch

prox·i·mate ˈpräksəmət/ from Latin proximatus ‘drawn near,’

We’re happy to announce the release of our new app Proximate! It’s a visual countdown app for Apple Watch and iPhone. Check it out on the App Store. Here’s the story about how it all happened and what we learned while creating this Apple Watch app.

image02

Since The Smyth Group includes app developers and app designers, we immediately began thinking of uses for the newly announced Apple Watch. The idea for a countdown app started when the sister of one developer showed him an app she was using to count down to her trip . It was, well, bad. But seeing that app led to the mockup of a simple countdown app that allowed users to attach a photo to each countdown.

image00

After getting together to discuss the idea, the team realized an important factor to consider is the persona of a new Apple Watch owner. They’re excited about this new gadget, but they also want something that’s useful on their wrist and want apps that are interesting enough to come back to regularly. So it has to be worth a spot in their Glances.

This thought process led to the question: Why would someone count down to a day in the first place? It’s clearly something they care about and are anticipating.

So what if the countdown was a “living thing”? Not just numbers, but something a user can see change as their important day got closer? Proximate was born.

When Jamie Smyth (as in The Smyth Group) was asked if a watch app could be built, he said, “Go for it.” Pretty cool.[1]

image03

The team moved forward with the direction of building a “living” countdown app. It would use animation to represent time. We wanted to start with simple visualizations that were more linear to indicate a clear start and end point to communicate progress.

image01

image04

Glances

The first objective was to have the entire app consumable in the Glance. Not a lot of apps are doing this, but Proximate’s Glance rotates through every countdown sequence. WatchKit makes this really simple to do when combined with some clever use of Cocoa Touch timer logic.

Interestingly, we soon discovered some of the limitations of Glances. One example is the entire screen is not fair game. It’s broken up into two regions, which forced us to rethink our visualizations and what we displayed in a Glance.

We also learned through normal use that Glances are a bit unreliable. With WatchKit 1.0, communication between an app running on Apple Watch and its extension running on the iPhone is quite slow and this effects how quickly a user’s Glance will update. This led us to shortening the pause between countdowns. It was also useful to shorten the pauses because the watch screen turns off quickly, which leaves little time to display anything useful.

Watch App

The original plan for Proximate included having creation and deletion on the app itself. However, we decided to go with a very simple approach for V1: Watch is for consumption, phone is for administration. We went with a list→detail pattern so we weren’t just duplicating the Glance.

Visualizations

Since animated UI elements are not allowed in WatchKit, every animation must use PNG sequences. We made use of Adobe After Effects for each of our visualizations and learned a little bit about Expressions to automate as much as we could. There’s something exciting about being limited to frame animation as constraints usually brew creativity. Our initial visualizations are simple progress indicators, something we could map to a percentage e.g. 10% closer = moves 10%. This logic was simple enough until we realized a little something about the nature of time.

We had a moment of crisis when we realized that “10% closer” is harder than it sounds. It was 10% closer than what? From when you created your timer? From the moment you called up the app? From the dawn of time?

Rather than explain the solution now, you can read more about it here. But essentially, we decided to base our scale of time on a curve of “nearness” (think “proximate”) or the closer you are, the closer it feels.

IMG_8528

Admittedly, this was confusing to many of our beta testers. Once we explained this seemingly simple detail, most were on board. Don Norman spends a lot of time in his fantastic book, The Design of Everyday Things, talking about conceptual models. If your user thinks your product works one way, but it’s built another way, bad things happen.

So to help prevent confusion, we added a little onboarding walkthrough of the app. But really, right now, we’re representing a curve with some very linear visualizations. As we move away from those progress-bar animations, we hope that people won’t even think about our solution. Your day should just feel near or far. Or it should feel like a mustache (coming soon).

lumberjack

The time is near

Our store submission process was relatively painless, although, we ran into some metadata problems with our app preview. (FYI – Don’t show the home screen, just your app.) We set a goal for release, and have been watching our countdowns move ever closer. Time now looks how it feels.

Key findings

  • Account for sluggishness on the Apple Watch
  • If you’re using a novel conceptual model, make sure you educate your user or, at least, don’t mislead them
  • Know the design limitations of UI
  • WatchKit can help you load content on demand, so don’t try to load more content than you need to. This leads to faster load times for watch apps and Glances.
  • [1] Of course, he also wants us to be able to say we know how to make apps for Apple Watch. He’s no dummy. So, hello, world! We design and develop apps for the Apple Watch! Let’s talk!

Leave a Reply

Your email address will not be published. Required fields are marked *