It was around November 2019 that I was working on this project.

Though the main task was to fully rebrand it into Interact and make sure about the implementation. I also improved the UX details in the meantime. I played a role as a UX designer in this project.

Introduction

Interact Pro is the office lighting control system for small/medium businesses. It could be separated into 2 parts, the mobile app, and the web portal. The mobile app is with more features. Almost all the features in the web portal can be also operated in the mobile app. I only worked on the web portal in this project.

The main users of the mobile app and the web portal are different. The user scenario is also distinct. It is the reason that we need both the mobile app and the web portal.

Main users & user scenarios

There are 4 main types of users in Interact Pro, service providers, installers, business owners and users.

• Service provider is the most powerful user in Interact Pro, equivalent to the site admin. He/She builds up the initial projects, communicates with the business owners, and invites other roles. He/She asks the installers to set up the lighting system in the office buildings. Normally, service provider is working in an office, sitting in front of a laptop, and doing all the actions on the web portal. From a business perspective, he/she can be the person who is from the same company as the installers but can be also different. They can be both from Signify or Signify invites a 3rd party partner as the installers’ company, to do all the lighting set-ups. It is very flexible.
• Installer is working on the fields, doing all the lighting installations for the customers. They can also provide technical support when customers have problems. It is easier for them to use the mobile app because of the working scenarios.
• Business owner is our customer who purchases the system. After all the set-up is done, he/she can manage all the users in his/her project, as well as control the lighting system in the company.
• User is the “smallest” role in Interact Pro, with very limited authorities. He/She can only do the light controls that have already been settled in the system, like switching the scenes in a certain room. He/She can only see the light groups that assign to him. Users are usually employees in the business owner’s company.

When we say the lighting system is settled, it not only means that the installers have installed all the lights but also have helped in grouping the lights into different areas in offices, have set the basic calendar for the lights. The lights are connected via gateways, which makes it possible to sense and react with all the actions, be controlled by the apps. One gateway can bind 200 lights at maximum. Though the installers have created simple schedules so that the lights are relatively intelligently on and off based on the calendar, the business owners can remotely modify or create more complex schedules based on their needs.

The biggest challenge

• Role based UI means that different roles can see the UI and features fully based on their roles, which makes the complexity of the UI. I have to consider how the UI looks like for all different roles, the simplest and the most complicated conditions.
  • For instances, even the basic user profile page and organization page can be different for different types of users. Service provider can manage their projects in the organization page while others roles can only edit the organization info or only view the info.
  • On the user profile page, user role can see the assigned groups regardless of the projects while no light groups and projects info displays for other roles. It is because user role can only control the light groups that assign to them. Other roles are with more authorities. There is no need to see the light group info for them in this approach. Hence, they just do the common actions, viewing and editing their profiles.
  • There is another example. Service provider is the only role that could invite installers on the user management page of a specific project while installer and business owner can only view the installer list. User can’t even see the user management tab.
• Technology limitation is another reason that makes the flow more complicated. For instance, user can’t create a schedule in an empty group. It is a purely technical issue. The schedule is actually bound on the gateway. The schedule can’t be “placed” if a group is without any lights and gateways. However, if users delete all the lights in a group, the schedule can be still bound on the gateway. This is not just technically valid. We don’t want to block this path because it is convenient for the installers when they set up the light system though it sounds a bit ambivalent.
• Physical vs. virtual buttons. It is always a topic for the UX design of all the IoT related products. There are always strong relationships between the physical devices, all the actions on the physical devices, and software. How to use the app to guide users use the real devices, inform them the current conditions, trigger them to do the actions on both sides, allow them to switch between the buttons on the software and on the devices, to make the flow smooth and fluid to the users. We have to know the technologies, all the detailed steps, and experience the process on our own.
• Remote communication work, same as other projects. The PMs and researchers are based in the Netherlands while the mobile app development and the design team are in Bangalore, and the web portal teams is in Shanghai. But the good thing is we all know each other. I never hesitated to ask them questions and can always get valuable information in time. The development team in Shanghai also gave me great help in understanding all the user scenarios and current problems. I am also the bridge for them with other stakeholders to know the progress of the whole project and strategic plans.

UI design

Top navigation and its responsiveness

The user behavior and style definition of the side navigation panel

Project page – tile view and list view

User management page

Project details

Project updates

Light controls

Scheduling

Installation setup

User profile, organization, about & documentations

Interact Pro lab visit

It was our great pleasure to take a visit to Interact Pro test lab, which helped me a lot in learning the real user cases, how the physical devices work with the software, how the installation is set up and experiencing what the most pain points for our users now, etc.

We also built a strong relationship with the testers and developers during the tour to continuously collect user feedbacks and all kinds of problems. We prioritize and solve the problems in each sprint a bit by bit to improve the user experience.