Spearheading the design and functionality of the app and associated device that allows to easily and intuitively commission a lighting network.
As it stands, installation of a lighting fixture is a physical task that is very time consuming. A contractor has to install and commission every fixture manually. The building manager then has to set parameters for each light fixture according to the space utilization. Other apps don’t allow for that kind of accessibility, hindering efficiency of the job. Because of this shortcoming, more money is spent wasting valuable time at the jobsite.
Understanding The Problem
In order to understand the problem, first I interviewed the customer service team to understand the possible users in charged of commissioning a project at a jobsite. With that information, I was able to create user personas.
Once the problem was established and the audience determined, I circled back to the engineering department to work on the user journey. This helped understand what the contractor's needs would be when commissioning a project. When that was established, we came up with the main features that would be needed to successfully and efficiently commission a jobsite.
Once we decided what the most important features that were needed to commission a jobsite, I created a wireflow to give a visual representation of how the app would work and where the features would be.
Low Fidelity Prototypes
With a better understanding of the wireflow, I drew out some rough sketches to get a better idea of the layout I wanted to create. I later cleaned up the sketches using Adobe Illustrator to help communicate layout ideas and guide the executive team to better understand the app's functionality and main features.
Initial in-house testing was done by the engineer and management team to determine the overall look and feel of the app.
Getting the design right the first time around is almost impossible. Once the testing was done and feedback was given, the overall design layout changed to feel more modern. Buttons and features were changed and updated to help users navigate through the app easier.
The login changed to a more modern look. The obvious change was fix the hierarchy of the design and instead of focusing on the logo, the user would focus on the sign in area. The first design felt divided by the 2 different colored boxes (black and gray), so by changing the background to a dark image, the whole screen felt unified.
The problem with the first version of this screen was that the tab bar was not really defined, so to fix that we moved it to the bottom and added icons to help with the visual representation. In this new version, we now had the title of the tab to make it clear to the user where they were in the app. The main screen included a section to connect/pair new devices and also a section that showed the devices that were already paired to the jobsite. The photos were replaced with easy to identify icons.
The most noticeable difference was the change of button style to a cleaner more organized one. The general information (name of the light and corresponding group) was not only made larger in font, but separated into a different section to edit it. By changing the size and style of the buttons and sliders, the information was more organized and easier to use.
An app walkthrough was added to improve the user experience and understanding of the app's capabilities.
High Fidelity Prototypes
After finalizing the layout, the next step was taking the sketches into Adobe Illustrator and Adobe XD to create the final UI designs. Interactive prototypes of certain features were sent for usability testing to find potential problems and pain points users might encounter. Additional images and videos were sent to better understand the user flow.
Prior to the High Fidelity Prototyping, a style guide was created following Deco Lighting's branding for consistency.
Deco Lighting's primary and secondary logo were used for different sections of the app. I also included a dimension guideline to ensure that the integrity was not altered in any way. This guaranteed that the logo would be represented correctly with the rest of the brand's voice.
For the app's primary colors, I used Deco Lighting's orange, black and white. Secondary colors functioned as buttons and icons.
Regarding the typeface, I wanted to use San Francisco because it helped with optimal legibility at every point size and gave breadth and depth needed for precision typesetting throughout the app.
A list of all the icons and their use were sent over to the developers to help with the development of the app. Icon sizes follow Apple's Human Interface Guidelines for familiarity when using the app.
Buttons, Sliders, and Dials
The buttons, sliders and dials use secondary colors to stand out in the app. The high contrast between the selections makes it easier to tell the difference between states.
Release & Feedback
The final app was released and in doing so, live-testing was done by customers. The app was widely accepted, receiving a 4.9 Rating on the App Store. Furthermore, a responsive iPad version was also created to help users that might have limitations using a smaller screen. Icons and interactions were adjusted to help accessibility.
Currently, the app is being used in over 20 new projects nationwide and as the number of projects continue to grow, more features and more iterations will be made to ensure the easiest and most effective way to commission a location.