Imagine a world where you can set your lighting to Netflix and Chill mode, hands-free.
—
Toronto-based lighting startup Nanoleaf came to TWG to create a minimum viable product for their connected home lighting application. In three weeks, we designed and prototyped an iOS application based on Apple's Homekit framework.
HomeKit is Apple’s framework for home automation.
It’s what manufacturers use to integrate their products (lights, speakers, thermostats, plugs, sensors, locks, and more) with iOS devices. With Homekit, these accessories are more secure, easier to use, and triggered by voice recognition using Siri.
Partnering with Nanoleaf promised to be a "feather in our cap;" our foray into the wonderful world of iOT (Internet of things) and the connected home craze.
The challenge: design a HomeKit app in three weeks
We were tasked with designing an app in a sliver of time, using a framework we had never touched prior to this project. As the sole designer on the project, I chose to ride closely alongside Apple's existing Human Interface Guidelines. I made this decision early on, after becoming intimately aware of the project's time constraints. This way, I could focus more on nailing down functionality and features, rather than finessing and fussing over a custom design system.
I set my ego on the shelf, and rolled up my sleeves. Here's how our team got started...
First order of business...
Understand the structure of a basic HomeKit app, and study its' implementation in other apps.
We set up a test application and recorded the process of pairing Nanoleaf's bulbs with their wireless hub using the test app. We also looked at current competitors in the space, from Philips Hue to Lutron as well as other connected home products like the Nest thermostat and Ecobee.
From these explorations, we were able to ask ourselves tough questions about which features were truly essential for our MVP. Once we knew what we were up against, we prioritized two sections of the app: onboarding and single bulb controls.
A focus on pairing hardware with software.
We knew that the user's first time using the product (hereby referred to as "onboarding") would be important, but we didn't know how important.
Although we focused heavily on this user flow in the design process, it was re-prioritized in the engineering phase. Many aspects of it never saw the light of day in the first release due to time restraints. Nanoleaf has since injected this thinking into their current app, to much success.
“Adding lights is one of the small points where the app lacks polish. Regardless, Nanoleaf gets the important stuff right.”
Ry Crist, CNET
Sliding it to the limit
One of the app's core screens was the bulb adjustment screen. This screen allowed the user to adjust granular elements of a bulb's properties such as brightness and colour temperature. An additional affordance was created for colour properties in hopes of alluding to future features.
In addition to the basic interaction patterns of the horizontal slider, we prototyped a more experimental UI concept in which the app's background colour would adapt to the user's input in a visual way. It ended up on the cutting room floor, but was later incorporated into a future build.
Shipping to learn
By piggy backing heavily on both Apple's Human Interface Guidelines and their connected home framework, Homekit, we designed an MVP in under three weeks with the intention of creating a springboard for further iteration.
The app has since undergone a refresh after Nanoleaf shifted to a different product line, but its' underlying structure is still the same. They've since released an Android version as well.
Learn more about Nanoleaf