Across The Board

Updates, inspiration, and musings from the folks behind Trello.

Just In Time: Developing Trello For Apple Watch

trello_watch

It’s here! Trello for Apple Watch is now available on a wrist near you. The ability to view notifications, create cards, and add comments are now possible with just a flick of the wrist. No magic necessary.

In designing Trello for the Apple Watch, we decided to focus on quick actions and notifications that give the wearer an overview of the cards that are relevant to them. The first release includes:

watch2

  • Add Card - Fluidly dictate your thoughts on the spot. Whether you need to get down your next big idea, or just remember your vacation packing list, all of that is possible on Trello for Apple Watch.
  • Notifications - Stay up-to-date with your Trello Notifications. You can respond to comments, reassign due dates, and jump to cards. If that's not enough, you can even Handoff to your iPhone right where you left off.
  • Due Soon - Trello for Watch organizes all of your due soon cards, so you never miss another due date. Additionally, the Trello Glance allows you to stay on top of what card is due next.
  • Recent Cards - Get quick access to your most recent cards with a tap of a finger.

So, how did we get here? How did we design for a device no one had ever seen before? How did we translate the Trello product and experience onto a tiny screen? Read on, time travelers, for more insights into the Apple Watch Twilight Zone.

Embarking On Uncharted Territory

Needless to say, working on an app for an entirely new platform was exciting. It gave us the ability to start fresh, without any established best practices, and we found many opportunities to be clever with our creation. It also presented challenges; we didn’t even have a watch for testing! But ultimately this led to opportunities for innovation for our design and development team.

We used the fact that we didn’t have a watch to our advantage, in order to explore initial ideas without limitations. Our team asked themselves questions such as, what would Trello look like on something only a fraction of the size of an iPhone? What kinds of things would a user want to do on a tiny watch? How big do we need to make text so it’s readable on the watch? How can we cram the most information on screen without turning it into a chaotic mess of tiny text?

Screen Shot 2015-04-23 at 4.31.08 PM

No, Derek, it's an Apple Watch app. Or as we like to call it, Trellolique.

All of these questions were speculative, as we realized we had about as much information as a clock with no hands. After the announcement, our team started creating mockups based solely on rewatching Apple’s Keynote and scouring Apple’s marketing pages.

Early mockups included the ability to navigate teams, boards, and lists. After the WatchKit and Apple Watch Human Interface Guidelines were released we stepped back, removed a lot of features, and focused on what worked best within the context of the Watch.

watch_pinata_demo_small

 

The apps on the Watch are an extension to the iPhone apps. Watch apps are lightweight, quick interactions that give the ability to perform simple tasks, or provide important information based on context. This eliminates the need to take your phone out of your pocket.

“We wanted to give the user high level actions that they can quickly access, so they can get in and out with the app,” explains Don Frehulfer, the lead developer of Trello’s Apple Watch app.

Meanwhile, the clock was ticking.

 

Visiting Apple Labs

Our team used the Apple Watch simulator to test code and tweak the interface designs, but there is no substitute for testing on the platform itself. It wasn’t until our app was nearly completed that we flew out to Apple Labs to view it on an actual Apple Watch, on an actual wrist.

Don and Adam Simms, our lead designer for the Apple Watch, worked for exactly one day, from 9:45am to 4:45pm, with an Apple Watch in their hands. They were given two watches, the 42mm and the 38mm on which to test their code. Apple also had engineers on hand (sorry, not sorry) to offer optimization advice and tweaks.

Overall, our team found the lab visit beneficial to improving our Apple Watch app before launch. Some of the most important tweaks included bug fixes, improving performance, and adjusting user interface issues. For Adam, it felt like all of their hard work came together once they saw Trello on an actual Apple Watch. They were able to confirm what were only assumptions once they were wearing the hardware and interacting with the software.

They also were able to check out the coveted Apple Watch well before it is released into the wild. Adam gave us an interesting tidbit when he told us, “I originally thought the 38mm was too small, but by the end of the day I actually preferred the 38mm over the 42mm.” The rest of us remain in suspense, anxiously awaiting the first shipments.

Trello-Watch-Checklists-Demo

Only Time Will Tell What’s Next

Trello’s Apple Watch app is now available for download in the Apple app store. More specifically, an app that we created on a completely new platform, with minimal testing, is now available for our users to download. We expect there to be tweaks down the road, but overall we are exceptionally proud of what we have come up with, and we are excited to hear our users’ feedback.

To get started, upgrade to the latest version of iOS and get Trello from the App Store.

If you’re a developer, be sure to check out Don’s in depth look at the specifics of coding for the Apple Watch.

Trello Business Class integrates with your team's favorite tools, like Salesforce and GitHub, to name a few.

Learn More