Smashing Boxes|
06.18.15 |Insights

How We Built An App For The Apple Watch

Design

iOS

IoT

product strategy

UX

We were huddled around a large, projected image of Tim Cook. In true Apple fashion, there was one more thing Tim wanted us all to know… They’re building a watch. It’s personal. It’s sleek. And we’ll all have to wait a year to get it.

We could have listened. Waited a year to start building CRNT for the Watch. But that wouldn’t be in true Smashing Boxes fashion.

Here’s the back story.

I’m a lifelong surfer and designer.

My biggest frustration when surfing is finding the current surf conditions at my favorite spots. I’d call up friends or scan multiple websites. When Smashing Boxes announced “Labs” – off-the-clock time dedicated to exploring creative side projects – I saw an opportunity to bring my idea to life.

I should probably take a moment here to tell you that CRNT won’t make us a dime. At least not this present rendition. This was an experiment. A design challenge, not a business one. Could we create software for a product that, at present, doesn’t exist?

We didn’t know, but we dove right in.

The SDK wasn’t immediately released but images of the Watch had been spread across the internet. I did some quick mock-ups to see if I could pull off the design on such a small screen. It looked good.

My initial mock-up where I thought the screen would stretch to the edge of the watch face. In the beginning, everything was a guess.

It helped that we had started with a minimalist app for iPhone and Android. The simplicity of the previous design made translating it from phone to watch relatively easy. Of course, I’d be amiss to say it was all smooth sailing. The Watch posed new constraints.

The primary challenge was designing for something that was largely unknown and untested. We didn’t have a physical object to test our ideas on. Viewing the designs on a monitor, we didn’t even know if our images were to scale. We had no idea if the functionality that was revealed at the conference would be the same functionality available once the SDK was released.

We had to be creative and flexible.

Would there be glare on the screen in the sun? How would transitions appear? Would there be transitions at all? Was the sky the limit, or would we be severely constrained?

We didn’t know. We had to dream up all the potential variables that could impact the end product. And I am certain there are several that we missed.

Once the SDK was released and we had more information to work with, we took several of our ideas and designs back to the drawing board. We still haven’t tested our app on the Watch and there will be many iterations to come to make it perfect. Never-the-less, we’ve learned quite a bit.

Here’s how we tackled it.

Go simple.

The Apple Watch enforces simplicity; it has to be simple to be effective. With the Watch, the user must be able to execute an action or pickup content in a few seconds or it’s going to fail. That’s your sniff test.

I approached designing for CRNT as if I were drawing in the sand. When you strip down all of the details and break it into segments that are simple enough to communicate in sand, you’ve hopefully achieved something minimal, functional, and memorable for the user.

A team always beats going it alone.

It’s important I mention that I didn’t do all of this alone. I had an amazing team of designers, developers, and marketers working alongside me to bring this app to life and then share it with the world. I also had the immense support of our founders, Brian Fischer and Nick Jordan.

Everyone who was part of this project volunteered their expertise and enthusiasm, and CRNT only exists due to their efforts. Do yourself a favor, and find a great team.

It’s not a reduction game.

It would have been easy to scrunch the design down into an inch by inch square, but it wouldn’t have worked. The Watch demands the removal of complementary content so smart user experience design was crucial.

Even though we were translating a simple and uncluttered app from phone to watch, we had to further refine our goals and focus on what mattered most. I can’t understate how crucial this is. With the watch you are not building an app, you are creating an action.

Cut visual affordances.

It’s not only about designing something cool; it’s also about designing something useful. You don’t need to style buttons. With the Watch, information is the interface.

Consider potential constraints.

This will be much easier for those building for the Watch after it’s released, but regardless, it will still help you to consider the variables and constraints of this platform.

For instance, the Watch may not always used in a stationary or indoor environment so contrast might need to be a consideration. Elements (such as text) must be large, clear, and readable with enough contrast for the user to ‘get it’ without having to work for it.

The phone application has white text and icons on a sky blue screen. For the Watch, we chose a black background with light blue lettering to create greater contrast.

There’s a lot we still don’t know.

Building for the Watch before the Watch was released was a process riddled with guessing and questioning. We don’t know what this is yet or how users will react – both to the Watch and to CRNT.

Ultimately, just as Apple will have much to learn from the initial release of the Watch, app creators like us will also face multiple iterations to get it right. Playing with our app on the Watch after release is likely to be a humbling experience. We’ve created a buzzworthy app for a product we’ve never touched. So far, CRNT has been featured in Mashable, Wearable, and Creative Bloq.

Yet amidst all of the unknowns, one thing is certain: the Watch is about simplicity. To be successful, you have to focus, refine, and prioritize what really matters.

Download CRNT on Android, iOS, and the Apple Watch by the end of the month.