Deco Mesh

Spearheading the design and functionality of the app and associated device that allows to easily and intuitively commission a lighting network.

beauty.png

My Role

Product Designer

Team

Myself

Engineering

Customer Service

Management

Key Contribution

User Research

Concept Ideation

Prototyping

Interaction Design

Animation Design

Tools

Adobe XD

Adobe Illustrator

Adobe Premiere

Timeline

3 months

problem.png
The Problem

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.

 
understand.png
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.

 
Persona-1.png
Persona-2.png
solution.png
The Solution

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. 

 
User-Journey.png
wireflow.png
Wireflow

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.

 
new-userflow.png
phone.png
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.

 
lofi-1.png
lofi-2.png
beta.png
Beta Testing

Initial in-house testing was done by the engineer and management team to determine the overall look and feel of the app. 

 
old version.gif
iterations.png
Iterations

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.

 
Old Login.png
right-arrow.png
New Login.png

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.

Old Devices.png
right-arrow.png
New Devices.png

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.

Old Fixture Configure.png
right-arrow.png
New Fixture Configure.png

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.

walkthrough.gif

An app walkthrough was added to improve the user experience and understanding of the app's capabilities.

hi-fide.png
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.

 
hifi.png
comm.gif
style.png
Style Guide

Prior to the High Fidelity Prototyping, a style guide was created following Deco Lighting's branding for consistency.

 
logo.png

Logos

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.

colors.png

Colors

For the app's primary colors, I used Deco Lighting's orange, black and white. Secondary colors functioned as buttons and icons. 

Font.png

Typeface

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. 

iconography.png

Iconography

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.

button.png

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.

feedback.png
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.

 
quote.png
star-rating.png
20projects.png