Designing The Economist for Apple Watch

By: Conrad Stoll

Designers have been preparing for the Apple Watch even before it was announced last September, but the challenge with any new platform is learning what makes a good app on a device you haven’t used before. Designers are faced with all sorts of decisions while creating a good app, which forces them to really think about the experience they want users to have once the watch is finally available.

When Mutual Mobile set out to extend The Economist app to the Apple Watch, we wanted to design something that fit the device’s form factor and still reflected the full experience of The Economist. A key feature of The Economist for iPhone is the audio edition, which includes readings of every article in the weekly edition recorded by professional voice talent. It’s an excellent way to get the full experience of reading The Economist while out and about. Given the popularity of that feature, we decided to extend it to the Watch and give the user full control over the audio edition from their wrist.

Apple Watch is designed to provide instant access to information without having to pull out your phone. We wanted to incorporate that philosophy into the Economist app by giving users quick access to the articles they’re interested in, and the effortless ability to control the playback from their wrist.

Glances in Detail

You get the gist of what we’re trying to accomplish, but let’s dive a bit deeper into the glance. When you’re listening to an article and want to check your progress or see what’s next, you can swipe up from the watch face to reveal the glance. The glance includes all of the relevant information about what is currently playing.

The biggest challenge when designing the glance was making it compliment the default Now Playing audio control glance provided by Apple, which shows the currently playing track similar to the iPhone’s control center. That’s why our glance shows what article is up next, as well as your progress percentage through the article. It also shows you how far into a section you are so you can decide whether to continue listening or skip ahead. You can also tap on the glance to open the Economist app on to access every article in the edition and a full set of playback controls.

Audio Player on your Wrist

The first screen of the app on Apple Watch is the audio player. It includes a full set of controls to start playback, pause, skip forward or backward, or change the volume. We spent a lot of time thinking about how to build a great audio player, considering the smallest nuances to build the best experience possible. With limited space on the watch, we decided to wrap the article title to two lines to give the user more information about what they are listening to. Ideally, we would have followed the example set by Apple’s music player, which includes Marqueed text labels, but we don’t have that ability with WatchKit yet. As a result, we had less space for controls and remaining playback information, so we had to prioritize the most important controls to keep on the player screen.

We moved the remaining playback time up to the title spot in the top left corner, which both balances out the interface and leaves more space for controls. We incorporated the elapsed time bar into the circle around the play/pause control, borrowing from the design of the iPhone’s player to create an easily tappable and familiar control. Flanking the larger play/pause control are a smaller rewind button and skip to next track button. We decided to include rewind instead of previous track, because it’s more common to skip back a few seconds to listen to something again than it is to move to a previous track you may have already listened to.

Including volume controls on the player was an interesting exercise. At first, we included them at the bottom of the player screen along with the rest of the information and controls, but that made the interface too crowded. It also didn’t provide enough space to show you the current volume rather than just change it. Instead, we moved the controls further down, but still available if you swipe up. It made sense to de-prioritize them in the interface because volume buttons are available on many types of headphones and the iPhone itself.

Force Touch Gesture

We’re using the force touch gesture on the player screen to disclose a variety of menu options. Previous track and skip forward buttons are there. Controlling playback speed is also important because different people may want to listen to articles quicker, or take more time to listen to them. On the iPhone, we achieve this through a single button that toggles between playback rates, but this presents issues on the force touch menu due to the necessary delay between tapping on the button. On Apple Watch we present a new modal screen with four rate options. That way, you can try out a selected rate and move to another if necessary.

Paginated Navigation

In the paginated interface, there are two screens beyond the player. The first is the tracklist. The tracklist is an in-order list of every section and article that is part of the weekly edition of the newspaper. You can tell which edition you’re currently listening to from the header at the top. Tapping on any of the articles in the list starts playback from that article. The last screen is the playlist, which is a customizable list of articles from any section in any order. This playlist is a recent edition to The Economist for iPhone and has been very popular with users.

The other option included with the force touch menu on each screen is the ability to change the selected edition. This presents a modal screen with a table that includes a row for each edition with available audio content. In addition to the title and date, we are also including the cover image for each edition, which is a great way for readers to quickly recognize an issue they want to listen to.

Conclusion

What’s great about Apple Watch is how personal it is. It makes your favorite programs available at the times when it’s inconvenient to pull out your phone, like when you’re listening to The Economist during your morning commute. Once you’re at the office, you can look at the remaining time on a section or article and decide if you want to finish or not. These are important use cases where The Economist for Apple Watch creates an exceptional experience, and we’re excited to provide that to Apple Watch users.

Originally published at www.mutualmobile.com on April 24, 2015.