Designing Wallaby for Apple Watch

Kenny Chen
Apr 21, 2015 · 5 min read

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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…
Image for post
Image for post

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.

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

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.

Image for post
Image for post

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”
Image for post
Image for post

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

Image for post
Image for post

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”

Image for post
Image for post

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

Image for post
Image for post

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


Image for post
Image for post

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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