Redesign Challenge (6/52):
Nest for iPhone
Let’s talk challenge format: To make sure these redesigns remain a fun learning experience for me, I’ve decided to update the challenge format again. I’ll now be allowing myself to design any time I have a chance, so long as I publish 52 redesigns by the end of the year. This means I’ll potentially be able to work on multiple redesigns simultaneously — allowing for some longer-term challenges — while also providing some buffer room if I have a busy week or vacation time.
Five months ago I installed a Nest thermostat in my condo. I love the scheduling aspect, and it did a decent job of learning most of my schedule on its own. This winter I’ve enjoyed my condo being warm when I get home, without wasting energy during the day. I had actually started working on another redesign, but mid-way through the week I happened to use the Nest iPhone app and felt compelled to take a stab at it.
Navigation Structure
The existing Nest iPhone app’s navigation structure was part of the reason I wanted to redesign it. The app progresses from a Location — which shows all of your Nest thermostats or Nest Protects for a home, and allows you to switch between locations — to the thermostat view, with a zoom animation to maintain context from the small thermostat thumbnail, to a larger interactive thermostat. Both views have drawers with extra information, settings, or actions.
I love the use of zoom animations for providing context and as a nice detail, and Apple uses them in its own Photos and Calendar apps to great effect. That being said, you have to be careful with animations. They can enhance a user experience when done right, but anything too quick can be jarring, too slow can feel tedious, and the animation curve needs to feel natural. With those things in mind, the animation duration in the current Nest app feels just a bit too slow, and the animation curve feels like it’s probably linear, which doesn’t feel natural when applied to motion or scaling.
I happened to check my Nest to make sure it was set to “Away” right before opening Apple’s Weather app, which adds personality and function by using motion graphics representing the current weather in the background.
The content can be scrolled to view additional information below the 7-day forecast (sunrise, sunset, wind speed, UV index, etc.) while the location and hourly forecast remain visible as a sticky header.
The Nest app isn’t a weather app, of course, but it is about your home, and it does show the current outside temperature. Knowing that your house is warm while it’s cold and blowing snow outside, and relating the UI to the home where the thermostat is located by putting a larger emphasis on the weather, could make it more usable and add some extra personality.
The combination of Nest’s existing navigation structure and zoom animations, and Apple’s Weather motion graphics and content display, left me inspired to see if those ideas could be combined into a Nest app with more personality and with compelling motion and interactions.
The solution I came up with is structured with the same location and thermostat screens that exist in the current Nest app. I’ve also implied (but not mocked up) a screen previous to the location which could be used to manage locations if you have multiple homes. The background of these screens is based off of the weather and time of day — displaying a dark interface at night, with the current weather reflected by video. The extra information and settings that were hidden in a drawer have been surfaced below the primary content, easily accessible through regular scrolling.
But I can only describe so much when it comes to interactions. Just as if I were communicating this design to a developer, words aren’t enough. Between the weather videos and interactions, this design is heavily reliant on motion, so I decided to create an interactive prototype to show off the interactions with video.
Prototyping
Communicating designs — not just the progression from screen to screen, but transitions and animations, too — is one of the most important parts of being a designer. A few years ago, without many great prototyping tools, static screen flows would be communicated through flow charts (still an easy and perfectly viable solution), while animations or transitions would be communicated through static videos made in Adobe After Effects. Apple’s Keynote also gained some traction as a prototyping tool, and still works reasonably well for simple interactions.
Recently, however, there has been an explosion in the number of tools specifically tailored to interactive prototyping. Some of these focus on static screen progression, such as InVision, Marvel, and Flinto. Others focus on high-fidelity animations and transitions, which is what I needed for this redesign. Quartz Composer — another tool that was never intended for prototyping — has been adopted and given some love from Facebook with Origami. Form works in a similar way, using patches to represent interactions and states without any programming. Framer Studio takes a different approach, enabling rich interactive prototypes but requiring some programming knowledge. Pixate has been my go-to prototyping tool for native mobile for a while now, offering probably the best combination of simplicity and the ability to create detailed transitions, with a result that can be virtually indistinguishable from a real app.
So which prototyping tool did I go with?
Xcode
I built an actual app. For most use cases and for many designers, using Xcode and writing some Objective-C is overkill for a prototype. But in this case, I wanted a prototype to run on my phone, I wanted to have a video to represent the current weather playing on loop in the background, and I wanted to have native-feeling interactions and animations.
Pixate feels native but doesn’t have video layers. Framer allows video, but doesn’t feel native. Quartz Composer/Origami doesn’t run on a phone, and the performance with video was pretty bad. And as far as I know, Form also doesn’t have a way of using video. Which left me with Xcode.
I have some programming experience and I’ve worked on iOS projects before, so I have an understanding of the Objective-C syntax and a general idea of where to find things in Xcode. I created a single view application and was able to assemble the majority of the first screen using the storyboard without touching any code. A couple visits to Stack Overflow, and a few lines of code later and I had my looping video of snow playing in the background by using AVPlayer. Everything you see is faked using images in UIImageViews, there are no text labels, no buttons, and no table cells. Even the back button and status bar are faked. Apple has a great WWDC session on the topic of using Xcode to prototype called Prototyping: Fake It Till You Make It. It focuses on low-fidelity prototyping to test out ideas, but also covers using Xcode to hack together functional prototypes that are faked with images rather than real content.
After getting the initial layout set up, the rest of the prototyping process mostly consisted of adding more images for the other screen, and adding touch events and animations to transition between the two. I ended up using Facebook’s POP framework to get natural-feeling spring animations, and my final product consisted mostly of copy-and-pasted code that would make an iOS developer weep.
Unfortunately video doesn’t quite do the prototype justice, for the same reason that AfterEffects doesn’t work so well for communicating interactions; you need to be able to interact with the prototype to really get a feel for the behaviour. Due to licensing restrictions on the video clip I used, I can’t distribute the Xcode project, either. Regardless, I’m very happy with how the final product turned out. The interactions feel quick and natural, the spring animations add a bit of personality, and the snow looping in the background gives the app the feel I was looking for.
Look and Feel
This week’s redesign was so focused on the interactivity and prototyping that the look at feel became almost an afterthought. Not something I would recommend for real projects, of course, but in this case it let me dabble in some Objective-C and focus more on the interactions than I would normally get to, and that’s part of the point of this challenge.
For the sake of completion, I put together a few screens showing off what the app would look like during the day. The weather is reflected in the background again, and the blue of the sky reflects the Nest branding. Most of the interface is reversed to be dark text on a light background, but the thermostat itself remains dark to mirror the physical Nest thermostat.
Conclusion
This week’s redesign was super fun. There’s no better feeling than producing something that you can interact with, even if it is just a prototype, and it’s nice to write some code occasionally. I’ll likely use Xcode for more prototyping in the future. I actually found it easier to work with than Quartz Composer, with more flexibility, and it has me wondering whether something similar could be done for Android apps.
If you’d like to follow along, or if you’d like to see what I’ve redesigned since the start of the year, I’ve been posting everything to my Weekly Redesign Challenge publication. Thanks to all those already following!
