Designing Wallaby for Apple Watch

Navigation, Notifications, Complex Actions & Animation

Wallaby helps you make smarter financial decisions by telling you the best card in your wallet to use to maximize rewards and stay on top of your credit. One complaint we hear about the Wallaby mobile app is people don’t always remember to take out their phone to see which card to use, especially at checkout.

Wallaby for  Apple Watch aims to fix that and put powerful personal finance right on your wrist. Having already created wearable apps for Pebble, Android Wear, Samsung Galaxy Gear, and even Google Glass, we had a pretty good idea what works and doesn’t.

At its core, wearables apps should be designed for context and speed but with a smaller screen size, always on the wrist, and different ways to interact, the Apple Watch brought about new design paradigms and user experience issues that we learned along the way.

Navigation

There are only two types of navigation for Apple Watch apps: hierarchical and page-based.

Hierarchical is best for complex data and works particular well when you need to drill down a series of options. Page-based is recommended when information between the pages isn’t related.

For Wallaby, we chose to make it page-based because it allowed for your best cards for nearby places to display immediately instead of having to first choose an option and going to other pages only required a swipe rather than having to tap a tiny target — try walking and having to touch a tiny target vs swiping the screen to see how much easier it is.

Notifications

When done right, sending the right notification at the right time can be what makes an app go from good to great.

Since the watch is always being worn, you’ll want to limit your notifications to only what’s most useful as it would be pretty annoying if you were constantly being interrupted with something that wasn’t very important.

Wallaby sends timely notifications only if one of your cards has a special deal on that day, an upcoming bill or annual fees. In the future, when we’re able to detect your location with a higher accuracy without draining the battery, we’ll be able to alert you the best card to use right when you walk into a store.

Complex Tasks

With a small screen, complex tasks that involve lots of input and setup isn’t ideal on the watch.

To keep the experience as seamless as possible, we took advantage of Handoff, which allows the watch and phone to communicate with each other so you can pick up where you left off.

When we needed the user to do more tasks on the phone such as creating an account, agreeing to permissions, or connecting to banks, we show a helpful message on the watch and automatically take them to the right screen when opening up the app on the phone.

Animation

Beautiful, subtle animation can enhance the user experience and make apps more engaging, dynamic, and memorable. We used Framer, an interactive prototyping tool, to play with speed and movement on different screens.

When creating animations on the Apple Watch, you can’t just give your developer a GIF and tell him to dynamically create it. You’ll need to provide separate static images of each frame to create canned animations so they can appear quicker and smoother. The best way to do this is to import your animation file into After Effects or Photoshop and extract individual frames.

Here’s how to we did it in Photoshop:

  1. Open up your GIF or MOV file
  2. Adjust your animation’s frame rate if necessary
  3. Go to File — Export — Render Video…

4. Give your animation a name and make sure the image sequence starts at 1. Click the “Render” button and PhotoShop will generate your individual frames.

We’ll then optimize the images so the file sizes aren’t as large. Use a tool like TinyPNG or ImageOptim to compress your images.

Finally, make your developer’s life easier and append @2x to the end of the files. If there are a lot of files, you can use a tool like Automator.

  1. Open up Automator and choose “Service”

2. Drag the files that need to be renamed into the app

3. Select “Files & Folders” and double click “Rename Finder Items”. You’ll get a prompt to see if you want to preserve the original files — click “Don’t Add”

4. In the dropdown, select “Add Text” and add “@2x” after the name.

5. Finally, click the “Run” button on the top right corner.


Designing for the Apple Watch was an interesting experience. It’s pretty limited in what it can do at the moment so you’ll need to focus on your core experience and keep it simple while designing for contextual notifications, complex tasks and adding tiny moments of delight through animation.


What do you think? Share your thoughts with me on Twitter (@kennycheny) and check out Wallaby for Apple Watch.