Designing for the Apple Watch

5 years ago people said nobody would do their taxes on their phone. Now 40% of our customers do some or all of their tax prep on their phone. I certainly don’t want to be the guy who said nobody will do their taxes on their watch, so here I am on record saying people MIGHT do their taxes on their watch one day. I can’t tell the future so I don’t know if we will ever put tax prep on the watch, but I know we want to meet our customers where they are, so TurboTax on the watch in some capacity seemed natural. We already had what we call the “Tax Timeline” (see my medium post on Lessons Learned While Designing a Timeline) which gives our users the ability to access all current and prior year tax data in once place.

So to give our customers a sliver of functionality for the launch of the Apple Watch we decided to provide users their latest tax return status and refund amount via glances and notifications.

Navigation

Once we figured out what we’d put on the watch, it was time to determine the navigation. Apple gives us two options:

  1. Page-based layout: Think of this as tabbed information, where the hierarchy is flat and all items are peers. It’s essentially horizontal scrolling.
  2. Hierarchical layout: This is a pretty standard paradigm that is used often on the iPhone. Use it when there is a parent-child or overview-detail relationship.

Curiously Apple doesn’t allow us to use a combination of the two, although they do it themselves. The Workout app employs both a hierarchical and page-based layout with great success. I really like this and hope they extend this capability to the rest of us soon.

While I’d love to use a combination of the two navigational paradigms, since we are constrained to one we went with hierarchical. You start with a list of tax years you’ve filed with TurboTax which you can dig into to get more details about that return:

Animation

With the constraints we’re given from Apple in terms of visual style (black background, etc.) it is hard to bring forward your app’s brand. All we’re really left with is color and animation. I’ve noticed Apple Watch apps are using loading or progress indiction animations to create consistency with the iPhone app and inject a little branding.

In creating motion design for TurboTax we work very closely with Prototypers. This is a term and a title that can mean a lot of things to a lot of people. For us it’s a hybrid designer and developer; It’s a kick-ass designer stuck in a front-end developer’s body. We work closely with our Prototypers to bring personality, clarity and delight to our experiences through the use of motion.

I knew I wanted to bring some personality and branding to the TurboTax watch app so I consulted our Prototypers. The problem though was that our Prototypers create motion using code, and the Apple Watch only allows frame-by-frame image-based animations, almost like an animated gif. We knew it would be too cumbersome to try to create the animation in Photoshop so we did what we always do and started with code. Our Prototyper, Heather, created a loading animation using velocity.js which allowed us to iterate on it quickly and get it exactly how we wanted it. We wanted the animation to take 4 seconds at 10 frames/second, so she slowed it down to 40 seconds and used a plugin to take a screenshot every second. We then cropped the screenshots and voila, we had our animation. Oh and this whole process took about 3o minutes. Had we tried to do this with Photoshop it would have taken hours to iterate and produce. After the animation ends, the content loads in. Here is the result:

So that’s it for now. It will be exciting to see what we’re able to do moving forward especially once we can have native applications on the watch. As a consumer of the Apple Watch I am very happy with it. Other than the obvious issues including poor battery life and performance issues, the watch is delivering on the promise to keep my phone out of my face. I would love to hear from others who have designed for the watch. What was your experience like?