UI design of Signify Service tag app v1.0

This project was finished at the end of July, 2019. I played the role as a UI designer.

Introduction

Signify Service tag is a mobile app with both iOS and Android version, mainly used in the fields for the operators to check the basic information of the lights and do the daily basis operations.

There are 4 main parts in the app, product, cart, log and more. There is a QR code on the label of the light physically. Then the operators scan the QR code in the field and get the basic information of the light on the “product” page, including the service tag numbers, the registration status, the grouping info, its location, its photos, the dimming behavior, its accessories and all the properties that has been filled in the factories. They can also edit or add more information for the lights. Then on the “cart” page, operators can order all kinds of service parts if they think it is needed for the light. After that, they can check the log activities on the “log” page, which helps them to judge the health status and all the previous light behaviors. At last, all the basic settings and introduction information of the app is in the “more” page.

My role & responsibilities

As a visual designer in this project, I delivered the hi-fi mockups of the app, both iOS and Android version. Therefore, I spent some time on getting familiar with both the iOS Human Interface Guidelines and material design guidelines.
It needs to be fully Signify branded, following Signify style guide, which is not as mature as the Interact one. And it is the first relatively complex Signify branded app in the company. Therefore, I reported the problems in the guidance in the meantime and helped the central team to update the guide.
I delivered the assets and very detailed redlines, and did a lot of communication work with the Indian development team, filing bugs to control the quality in the implementation.

Signify style guide for software-applications v2.0

UI design

iOS

Product list view

Scan the code & set the location of the light

Activity logs & service parts

Accessories, grouping info & notes under product tab

Dongles – near field communication

Android

Product list view

Configuration of the dimming behavior under product tab

Scan the code & set the location of the light

Activity logs & service parts

About, grouping info & notes

Dongles – near field communication

There is a small tweak here for the “NFC” icon. I used the standard “UFC” icon in the design of iOS, while using the “NFC” icon that material design recommended in their documentation in Android.

Notification letters

After the operators order the service parts in the app, they will receive a notification letter, recording all the service parts information they ordered.

Detailed activity log information

Web

As follow-up, I also created a simple web beta version of Signify Service tag. It is with limited features. And I played the role as a UX designer, taking the interaction patterns of Signify branded web apps as a reference.

The latest Signify branded navigation template was applied.

Properties