The Big Idea
Already fans of Nest, the launch of the new Apple Watch further enthused the Y Media design and development teams with their new platform, and we were excited at the prospect of merging the two systems.
For those who might not know, Nest Learning Thermostat is a device with sensors Wi-Fi enabled connectivity. It learns how you manage the heating and cooling in your premises and then works out a schedule to keep the temperature at your personal ideal. It also figures out how long your space takes to heat up, and so makes sure the temperature is just right when you need it to be. And since you’re only going to need the temperature just right when you’re actually around, it watches you, too, and turns the heating down if you leave.
Of course, this clever system can be remotely controlled by an app… and this is where Apple Watch comes in.
Apple Watch, released earlier this year, is a device designed to get us off our phones and interacting with the world once more. With a few apps running independently on the smart watch, and others linking to iPhone apps, you’re able to leave your mobile in your pocket and still keep in touch with important updates by simply glancing at your wrist.
We wanted this app to be one of our finest, both in terms of design and development, and so we started with the iPhone app and worked forward to the Apple Watch collaboration. Our developers already know how to build killer iPhone apps, but since the Apple Watch hasn’t yet been released in the wild, we needed to do some research to create an amazing experience on the Apple Watch. We also brought a Nest thermostat into the office for some practical playtime.
After a little fiddling and meddling, inspiration hit, and we decided sci-fi was our new vision!
Of course, the creatives never settle with just one try. They’re better than that. We all liked this far-out design but quickly decided it was too new age and even a little intimidating. And so, after reworking the design, tweaking, and then tweaking some more, we finally settled on this clean, user-friendly, elegant design:
Next, it was time for the watch… None of us had much understanding of the Apple Watch and its capabilities, so our design and development teams holed up in a conference room together, and we gave ourselves a thorough Apple Watch masterclass. It was, to say the least, illuminating. For starters, backgrounds and animation don’t work the same on the watch as they do on the iPhone; our designers had to create traditional, sequencing imagery for any animation effects they wanted to include; and, just to add an extra layer of complexity, overlaying controls is a whole new ballgame with the watch.
Once our design department convinced our development gurus that they were smart enough to make their vision a reality (and development similarly persuaded design to abide by a few limitations) it was time to arrange the interactions between the iPhone and the Apple Watch. The design team began the process by strapping iPhones to their wrists to get a feel for the interface, and then created a watch design similar to the iPhone app design. As they worked, they simplified the design, removed all unnecessary controls, and went through the tedious process of old school animation.
Our developers also had their hands full with the new WatchKit, and perfecting the functionality for our desired design took some serious work.
The six main issues our developers had to work through were:
- The inability to overlay controls.
- The animations require rendered images-which in turn require more render time.
- Two sizes of watch available – 38mm and 42mm.
- Apple’s proprietary Taptic Engine (which taps the wearer on the wrist whenever they receive an alert or notification, or press down on the display.).
- San Francisco is the only accepted font on the Watch platform (perhaps apt given the Y Media Head Office is located here too.)
- The Watch app is wholly dependent on iPhone app.
The Apple Watch also has limited data storage, and so we had to create app Groups – an onerous task. Because provisioning profiles and certificates is essential when building iOS applications, we had to enable the app Group feature in iOS Developer Provisioning Portal (developer.apple.com) to provide the necessary support. If the app Group and profiles aren’t correctly configured, data can’t be accessed in the Watch app, and you’ll spend hours trying to figure out why zero data is being returned. In an app group, you’ve got to follow a set of steps before compiling code. Here are a few lessons that should at least make all of our wasted hours valuable to you:
- Make sure that a certificate is created with the app group bundle identifier. You need one certificate for the iPhone app, and one certificate for the WatchKit extension.
- Now open the iPhone application, launch Capabilities, and select App Groups. Toggle the App Groups switch.
- You’ll be presented with a list of app group identifiers. Select the necessary identifier from the list, and give it a few seconds to authenticate.
- Toggle and select the correct app group bundle identifier for the WatchKit extension.
- Ensure the correct certificate for the WatchKit extension is selected. Note that the bundle identifier will be different, and needs a different certificate.
Another hurdle with a relatively simple solution is the bundle identifier. Our initial project skeletons will generally have a default bundle identifier, and once we generate a certificate for app groups or distribution, we may need to change it in the XCode settings. However, if we changed it in the iPhone’s plist, the app wouldn’t run. The simple solution is the link between the iPhone app and the Watch app. Whenever updating the iPhone’s bundle identifier, we had to update the associated Apple Watch app’s info.plist field – in the Apple Watch app’s info.plist field called “WKCompanionAppBundleIdentifier”.
This has always been a significant feature of iOS app development, but the Apple Watch provides very limited scope for creativity. When the development team told the design team they’d have to produce the traditional series of sequential images to achieve the animated effects they’d set their heart on, we could practically hear the sharply panicked inhalations from the team.
We wanted the look of the iPhone app’s extended semi-circle view for the watch and used 41 sequential images to achieve this – these images plotted in top group. Two classes are then available for animation: Groups (WKInterfaceGroup) and Images (WKInterfaceImage). Finally, in order to support both the 38mm and 42mm Apple Watch face, we switched the layout content mode to ‘scale to fit’. Another key point for the watch development is that you need to manage or maintain images under image assets only. Images added outside won’t be accessible through the code. Also, be sure to use only @2x PNG or JPG images for retina support.
The controls layout was the last major task. Apple has redesigned the controls layout for their Apple Watch, proposing a new concept called Groups. Groups have to be used as containers for other UI controls – similar to fragments in Android. The two layout types that can be implemented are hybrid and pagination. Design initially proposed pagination, but because of usability issues, development convinced them that hybrid was the correct choice. Now all thermostats are displayed in a list, making user choice uncomplicated. Something to keep in mind when implementing layout in your own storyboards is the selection of layout type. If you choose ‘Apple Watch 38mm’, your app will only work on the 38mm screen, and vice versa. ‘Any Screen Size’ is the selection to make, and this can be configured in the installed field under storyboard.
When Apple announced it was accepting Apple Watch applications, our US team visited the Apple headquarters to test the app for the first time. And with valuable feedback in tow, we headed back to the drawing board.
Following this humbling review was the next, and most trying step in the process: creating the Apple App Store build. Because there was no proper documentation, it took a lot of time to understand the certification, but eventually we realized that we needed three different certificates for each target. We finally uploaded our app… and it was rejected. In the review process, we found the rejection was due to the use of the Apple Watch image in our tutorial screen, and so were forced to remove the tutorial screen and resubmit the app to the Apple App store.
Of major concern in the days and weeks leading up to the launch was the fact that the Apple Watch wasn’t actually available for us to test out, and so we couldn’t see our design as it would be represented on the watch. We risked it. We uploaded the build with the simulated design, and then immediately got to work on the website.
As soon as the Apple Watch was available, we got hold of one and tested the design, and were pleasantly surprised to find that it worked even better than we’d hoped. Due to lack of testing, though, we did receive some negative comments for the app, and we also had some issues with Nest, though their fantastic developer relations team helped us resolve these quickly. We fixed communication issues using a core foundation notification center to publish data between the app and app extensions, and found this solved all our data sync issues between the Apple Watch and iPhone.
Unfortunately background issues were a serious difficultly in the development lifecycle, and currently our app works on both the iPhone and Apple Watch in foreground mode only. Background execution of API should have been handled in the iPhone – another learning curve that still haunts our developers.
Our experience has taught us some valuable lessons for both design and development of Apple Watch apps, something we’d like to share with you in the aims of establishing some ‘Best Practices’ for app development for this exciting new device:
The Apple Watch is always right there, a glance away. No more scrounging in bags for your iPhone, no wandering around the house trying to figure out where you left your device. Apple Watch apps need to provide this same convenient experience with a stripped-down interface to match the small screen, and easy maneuverability that takes advantage of this natural user behaviour.
The Apple Watch SDK is embedded in the iPhone app SDK, and designers and developers should be aware that functionality will evolve with time, and so must keep their strategies fresh and seamless. The possible variations and extensions are numerous, and updates must be carefully devised.
The Apple Watch has been designed for short glances, and optimal apps will be used for no more than ten seconds at a time. Interaction should be quick and casual, just as a glance at a clock would be. Don’t try and make an iPhone app for the Apple Watch, be selective and minimize your features to the bare essentials. Aim to fulfil one single, powerful use case at a time.
Conclusion: Totally Worth It
As with all of our app development projects, the Y Media team leveraged years of experience and days of research to create an app that would merge one of our most admired pieces of home-control software with Apple’s latest innovation, a device that promises to become the fast favourite in wearables across the globe. Although our perseverance for the final app never waned, we were certainly met with myriad challenges on their development field.
Thanks to Nest and the Apple Developer team for all of their assistance, feedback and support over the course of this collaboration.
Despite all of the setbacks, up-hills and false starts, the learnings we took away from this experience were absolutely invaluable, and we look forward to applying these to building Apple Watch apps in the future.