melissa stocco

melissa stocco

melissa stocco

nanoleaf - routines feature

nanoleaf -
routines feature

UX Design, Graphic design

the problem

Nanoleaf is a smart home technology company that primarily sells LED lighting products. The Nanoleaf app is used to control their smart light products. The app offered a scheduling feature to control the lights automatically but the functionality was too simplistic, did not give users enough flexibility, and was not competitive in the marketplace. The user experience of setting up a schedule was difficult and did not guide the user through the process.

Nanoleaf is a smart home technology company that primarily sells LED lighting products. The Nanoleaf app is used to control their smart light products. The app offered a scheduling feature to control the lights automatically but the functionality was too simplistic, did not give users enough flexibility, and was not competitive in the marketplace. The user experience of setting up a schedule was difficult and did not guide the user through the process.

ux audit

ux audit

To begin the redesign of schedules, as the sole UX designer on this project, I began by auditing the current schedules feature to identify the pain points and strengths of the user flow. There were many roadblocks in the design that needed to be improved upon in the next iteration.

To begin the redesign of schedules, as the sole UX designer on this project, I began by auditing the current schedules feature to identify the pain points and strengths of the user flow. There were many roadblocks in the design that needed to be improved upon in the next iteration.

To begin the redesign of schedules, as the sole UX designer on this project, I began by auditing the current schedules feature to identify the pain points and strengths of the user flow. There were many roadblocks in the design that needed to be improved upon in the next iteration.

Pain Points

  • The user flow does not guide the user through the process to help them be successful in creating their schedule. The user must figure out the flow themselves.

  • The user flow does not make it clear how to add an action to the schedule

  • The user has limited options for scheduling their device. For example, they can only choose a colour palette (scene) for their devices

  • Information is unnecessarily hidden in the "choose action" part of the flow

  • Deleting a schedule is not intuitive and is not using common behavior in the Nanoleaf app

  • User cannot see what color they have selected in the schedule list

  • Circadian rhythm and sunrise/sunset features are separated from the scheduling feature

  • The user must create two separate schedules to turn a device on and off

  • The hidden main menu text makes it difficult to find schedules in the app - the icons alone are not intuitive

  • The main menu behaviour is disorienting for the user since it shifts the icons changing their location and making wayfinding more difficult.

competitor analysis

competitor analysis

Features that competitors offered:
Features that competitors offered:
  • Zones

    The user can set a schedule for the entire room or zones

  • Templates

    Competitors had templated schedules for users to choose from

  • Intuitive

    Competitor app menus were more intuitive, most including an icon and text

  • Starter & Actions

    Users had more options for what starts their schedule (for example when another device completes an action)

  • On/Off

    Some competitors allowed for turning on and off the lights within the same schedule

  • Zones

    The user can set a schedule for the entire room or zones

  • Templates

    Competitors had templated schedules for users to choose from

  • Intuitive

    Competitor app menus were more intuitive, most including an icon and text

  • Starter & Actions

    Users had more options for what starts their schedule (for example when another device completes an action)

  • On/Off

    Some competitors allowed for turning on and off the lights within the same schedule

Zones

The user can set a schedule for an entire room or zones

Templates

Competitors had templated schedules for users to choose from

Intuitive

Competitor app menus were more intuitive with most including an icon and text

Starter & Actions

Users had more options for what starters (i.e. what starts the schedule) and their actions (i.e. what happens when the schedule starts).

On/Off

Some competitors allowed for turning on and off the lights within the same schedule

proposed user flow

custom routines

custom routines

The first iteration of the proposed redesign uses folder cards to contain each routine which includes a start and end to the routine. The start and end to a routine each have a starter which begins the schedule and an action which is what the device does when the schedule begins. For example, the starter can be "8:30am" and the action would be "turn on the living room lights and set them to the colour green".

The first iteration of the proposed redesign uses folder cards to contain each routine which includes a start and end to the routine. The start and end to a routine each have a starter which begins the schedule and an action which is what the device does when the schedule begins. For example, the starter can be "8:30am" and the action would be "turn on the living room lights and set them to the colour green".

templated routines

Instead of creating a custom routine, users also have the option to use a templated routine. 15 different template ideas were ideated in this phase of the design process, including more simplistic generic templates that could be created by the user and more customized templates that would need custom development.

Instead of creating a custom routine, users also have the option to use a templated routine. 15 different template ideas were ideated in this phase of the design process, including more simplistic generic templates that could be created by the user and more customized templates that would need custom development.

Instead of creating a custom routine, users also have the option to use a templated routine. 15 different template ideas were ideated in this phase of the design process, including more simplistic generic templates that could be created by the user and more customized templates that would need custom development.

starters

The user is given many options of how they want to start their routine based on current features of Nanoleaf devices. Once the user selects how they want their routine to start they are able to input the settings they choose for the device, including which days they want the routine to repeat

The user is given many options of how they want to start their routine based on current features of Nanoleaf devices. Once the user selects how they want their routine to start they are able to input the settings they choose for the device, including which days they want the routine to repeat

The user is given many options of how they want to start their routine based on current features of Nanoleaf devices. Once the user selects how they want their routine to start they are able to input the settings they choose for the device, including which days they want the routine to repeat

actions

When the user first adds an action the app will prompt them to select the devices they want to control. Then the user will choose the action for the devices. They are given brightness controls as well as the option to set the lights to a solid color, scene (palette), or playlist.

When the user first adds an action the app will prompt them to select the devices they want to control. Then the user will choose the action for the devices. They are given brightness controls as well as the option to set the lights to a solid color, scene (palette), or playlist.

When the user first adds an action the app will prompt them to select the devices they want to control. Then the user will choose the action for the devices. They are given brightness controls as well as the option to set the lights to a solid color, scene (palette), or playlist.

refinement

After completing the first flow for the new schedules it was reviewed by the team at Nanoleaf, including the creative director and developers. To save development resources it was decided to only create generic templates and to not include custom developed templates (e.g. the sleep cycle template in the previous section). In addition, we could not include so many starters as the architecture in the backend could not support it at this time and developing these features was out of scope for the project.

After completing the first flow for the new schedules it was reviewed by the team at Nanoleaf, including the creative director and developers. To save development resources it was decided to only create generic templates and to not include custom developed templates (e.g. the sleep cycle template in the previous section). In addition, we could not include so many starters as the architecture in the backend could not support it at this time and developing these features was out of scope for the project.

events were created

The main point of feedback from the team was to make the routines more flexible - so the user could add more than just a start routine and end routine. To address the feedback in the next iterations I brainstormed how I could give users more flexibility when building their routines. Instead of only allowing users to have one start and end for their routines, they are able to create events within each routine that each have a starter and action. This allows the user to create one routine with different events that occur throughout the day.


The next iterations also explored all of the events being set to the same devices versus allowing users to select devices for each event.

The main point of feedback from the team was to make the routines more flexible - so the user could add more than just a start routine and end routine. To address the feedback in the next iterations I brainstormed how I could give users more flexibility when building their routines. Instead of only allowing users to have one start and end for their routines, they are able to create events within each routine that each have a starter and action. This allows the user to create one routine with different events that occur throughout the day.


The next iterations also explored all of the events being set to the same devices versus allowing users to select devices for each event.

The main point of feedback from the team was to make the routines more flexible - so the user could add more than just a start routine and end routine. To address the feedback in the next iterations I brainstormed how I could give users more flexibility when building their routines. Instead of only allowing users to have one start and end for their routines, they are able to create events within each routine that each have a starter and action. This allows the user to create one routine with different events that occur throughout the day.


The next iterations also explored all of the events being set to the same devices versus allowing users to select devices for each event.

final user flow

The final flow begins with the user choosing to create a new custom routine or a templated routine from the routine library. From there they can create events that occur within their routine, each with their own starter and actions. For example, if the user has a night time routine where they want the lights to change from a bright white light when they are awake in the evening— then wind down to a dull orange light— to off, they are able to do so. The routines act as a folder storing all the events that are a part of their routine.

The final flow begins with the user choosing to create a new custom routine or a templated routine from the routine library. From there they can create events that occur within their routine, each with their own starter and actions. For example, if the user has a night time routine where they want the lights to change from a bright white light when they are awake in the evening— then wind down to a dull orange light— to off, they are able to do so. The routines act as a folder storing all the events that are a part of their routine.

custom routines

Custom routines allow the user to create their own customized schedules for their lights. Within each routine the user can add events, each with their own starter and actions. In the final flow a graphic was added when the user has not yet created a routine. This graphic was used as an opportunity to educate the user on how routines work, by adding events with starters and actions.

starters

The number of starters was simplified to three options: time, sunrise, and sunset. These options were the only ones within scope of this project, but the exploration of the other starters is available in the future. In the previous iteration these options were a multi-screen flow, but in the final iteration these options were condensed to one screen with tab options. This simplifies the flow for the user and provides all the options on one screen. All of the alternative options are provided in the action part of the flow or were removed (e.g. device selection).

actions

An improvement that was made from the previous iteration was that users must add their devices for each action. We tested out having the device at the routine level, so each event would automatically have the same devices assigned. This became difficult to understand from a user experience perspective, especially if we gave the users the ability to remove devices at the event level. The goal was to give the user flexibility to change which lights are on/off or the colours they illuminate, so even though it was more effort to add a device for each action, it was simpler to understand while also giving the users flexibility. It was also more challenging to successfully implement adding devices at the routine level from the developer's perspective.

save event and routine

When the user has completed all of their actions they save and name their event. Then they are able to add more events or save and name their routine. The routine will appear in their routine list where they can easily turn it on or off with a toggle.

templated routines

For the final flow ten templates from the explored options were selected. All of these templates use the same functionality as a custom routine. The templated routines are available in the routine library and can also help educate the user as to how they can create their own custom routines. Some of the templates have multiple events within them. Some templates have only one event that includes multiple actions. This shows users the capabilities of routines so they are able to create their own if they choose. In addition, the templates also give users a simple way to create a routine for common use cases.

takeaways

I really enjoyed problem solving on this project, working with the team, and taking the responsibility as the sole UX designer to complete this project. I learned a lot from working with the developers and their limitations based on time constraints and the current coding foundation they were building off of.

takeaways

I really enjoyed problem solving on this project, working with the team, and taking the responsibility as the sole UX designer to complete this project. I learned a lot from working with the developers and their limitations based on time constraints and the current coding foundation they were building off of.

takeaways

I really enjoyed problem solving on this project, working with the team, and taking the responsibility as the sole UX designer to complete this project. I learned a lot from working with the developers and their limitations based on time constraints and the current coding foundation they were building off of.

more to explore

more to explore.

more to explore