Concept: Redesigning the Nanoleaf app

I’ve used Nanoleaf products for years – a proud owner of the Canvas, Essentials Light Strip and Bulb and Light Panels – they’re truly innovative pieces of technology and integrate well with my Alexa and HomeKit-enabled smart home.

Last year, the company redesigned its application with a new dashboard for quick access to all devices at once. It also introduced a new scheduling UI, updates to the Discover page and an overhauled colour picker.

The app needs to be easier to navigate and it currently doesn’t use the native iOS design guidelines that most apps are based on – it doesn’t look ‘native’ on an iPhone. I mocked up an updated user interface that is more intuitive but in line with Nanoleaf’s existing app design and features.

Navigation

From the ground up, new navigation will instantly feel familiar to users of built in iOS apps and uses the same tabs as the current application. Labels to tabs and updated icons using SFSymbols are cleaner and could also support additional functions at the force hold of a tab.

At the moment, Nanoleaf uses custom icons which could be unclear to users (although I understand it’s probably easier to develop for cross-platform – Android and iOS). The option to enable labels for tabs would also be welcome and an updated menu system could reduce confusion.

Managing Devices

I think the My Rooms user interface in the Nanoleaf app is helpful for managing multiple devices at once. It helps to distinguish between rooms and when you own an ever-growing set of devices, the ability to change options for an individual environment is much appreciated.

An All Devices tab in my mockup shows how it can be even easier to see all active devices registered to your Nanoleaf account. Similar functionality – holding on a tile for more control over a lighting product and quickly understanding the scene it’s on – has been implemented in an updated design. More detail, such as a device status, allows the user to check connectivity at a glance.

A new edit option supports hiding and removing devices from this view. For discovering and setting up a new product, the New Device button in the header is right at the front.

This is a concept and not affiliated with Nanoleaf. The application discussed in this article can be downloaded for free on iPhone and iPad from the App Store.

Avatar photo
Ben Ward

Senior Editor, discussing everything Apple and supporting other writers and members of Apple TLD's team of volunteers.

Articles: 625

Leave a Reply