Interact Landmark Monitor
This project's purpose was to redesign and rebrand the current application Philips Activesite. This web application monitors the health and status of large outdoor lighting installations ( used on Empire State Building, Bay Bridge, and One World Trade Center). The user of the application ranges from internal Philips Employees who are application engineers and maintain the installations to building managers who oversee the buildings these lighting installations belong to. Meanwhile, Philips Lighting underwent a restructure and cloud-based applications such as Activesite would be under the brand umbrella Interact.
The Process and My Role
My role on this was project was Creative and UI lead. This project was developed in an aigle team with Product Owner, Project Manager, Software Architects and myself. I started with user interviews along side an internal People Researcher and the Product Owner. Once we had an idea what worked and didn't on the current site we started to sketch the user journey and jobs to be done.
This project is still in development and this is just showing how we redesigned the way the user can access advanced information on a site, controller, and individual fixtures. The way a lighting installation is composed is called a device tree and each branch on the tree has different properties that need to be surfaced. Along with a redesign a lot of new and more advanced fixtures have been released with a lot of sensor data that needed to be shown.
Open Site Alerts
This page would be where a user can see all open alerts on a site.
Old Site Experience
The old site experience was created by engineers for end users. They pulled any and all information available to them and surfaced it all to the user. After conducting interviews with end users their biggest pain point was too much irrelevant data. We determined that the info that is most important should be easy to find but all data should be available, just not at first glance. The other major issue was the device tree took up a majority of the screen.
Customer Journey Map
Maping business needs v user needs
Device tree level 1
This page shows how the user would land on the site and navigate to a particular asset. The design of the device tree was the largest undertaking because the current application requires this to be on the page at all times which took up page real estate. However once a user navigates to the problematic device they don't need this again. So I designed a device tree that could be collapsed and pinned to the top left corner.
Device tree expanded
This is the device tree at its most expanded level where the user can see the list of fixtures as well. It also gives the user a quick visual que if the device is online or offline and if the last scan is current for that device.
Device tree collapsed
This page is the state of the page after the user has navigated to the fixture that is problematic. I felt it was important to keep the search box there because that was how users most commonly wanted to navigate to a fixture.
Because of the dense information on the main page we felt that the user might want to get more infomation about a chart and see them larger. For this we took the approach of having each card be clickable and expandable.