Design Process: Chilight app

App created for HLC Inc. electrical company to help users get service as fast as possible

Project info

Introduction

HLC Inc. asked Designer & Gentleman design agency to make a difference in how people request for their service. My job was to design the initial release of the app. Crafted with both B2B and B2C customers in mind this app simplifies the process, and in just three steps customers are able to send a service request. Future releases are planned to have "get a quote" and a 2-way messaging feature to improve communication.

Step 1 | Identify the issue

The problem

Requesting for electrical service is currently not an easy process, both B2B and B2C end users have three options, the first one is to send an email - which is a complicated process for end users as they need to type all the required information, description of a problem, location, contact, and to eventually attach the image of a problem. The second one - to call, is an easier way but this is an issue for the electrical company as they need to type in all the mentioned info in order to provide it further to the electrician. The third one - to use the website request page is also not intuitive for end users as they need to type in all the information and attach the picture.

Step 2 | Market Analysis

Competitive analysis

First, we identified the client's main competitors in the same market segments and searched for their solutions. By analyzing the competition’s strengths and weaknesses we wanted to make sure that an app would be a good idea. We came to the conclusion that an app would make a difference in leadership as a powerful competitive advantage.



Step 3 | Product Evaluation

Heuristic evaluation of current solutions

The next step was to identify existing communication channels provided by competitors, and to analyze usage of similar channels within the internal system of our client. We also measured the time and effort needed to successfully send a service request to electricians which we used as a starting point to simplify our solution.

Usage comparison of communication channels:

Boris Jankovic - Web design / Apps / User experience | borisjankovic.com

Step 4 | Sorting features

Red routes

The next step was to create the red routes. Here we wanted to check what elements of a service request are the most important for users and for our client, and to put them on the same map, for an easier overview.

Red routes for the service request:

Boris Jankovic - Web design / Apps / User experience | borisjankovic.com

Step 5 | End-user analysis

User Journey map

We wanted to see how the end user journey affects their emotions, and to see which steps that are needed to complete the fully documented service report create most frustrations. My job was to create a user journey map to pinpoint the main issues for the MVP.

Boris Jankovic - Web design / Apps / User experience | borisjankovic.com

Step 6 | Target groups

Personas

Every user is different, so our approach was to analyze Google Analytics data and to talk with electrical company managers to understand the profiles of average users. We decided to create a personas overview to help us to be always on track and not to miss any detail that users might find important.

User persona comparison:

Boris Jankovic - Web design / Apps / User experience | borisjankovic.com

Step 7 | High-def wireframes

Usability testing on high-def wireframes

During wireframing, I decided to skip low-def and jump right into high-def mockups in order to get the closest feeling of end user experience. Quick iterations based on feedback from a couple of test users helped me to understand the desired flow. Although user feedback is very useful, the real value lies in the designer's ability to invent a new solution, especially if it contains advanced gestures or new ways of interaction that end users are not aware of, and thus not able to ask for.

Boris Jankovic - Web design / Apps / User experience | borisjankovic.com

Step 8 | Design Thinking

Analyzing user feedback and Ideate

Based on the feedback we received from users my next step was to re-evaluate each step in the process, after which I designed a solution that uses only tap gesture and dictation to submit a request for service in 3 easy steps. The crucial thing was to minimize the number of steps needed to submit a service request. My approach was that typing is not needed in main screens and to replace it with taking a picture, dictating and tapping to be geolocated.

Comparison of steps required for the request to be received by an electrician:

Boris Jankovic - Web design / Apps / User experience | borisjankovic.com

Step 9 | Design Thinking

Tap and speech instead of typing

One word: Simplicity. In this step, my approach was to simplify the process, to use standard methods, but also to innovate and use easier ways to collect data from users. Current solutions on the market use 6 or more steps to send information from end users to electricians, while Chilight uses just 3 steps to submit the same issue.

Boris Jankovic - Web design / Apps / User experience | borisjankovic.com

Step 10 | High-def user flow

User flow

User flow is based on several iterations on high-def mockups and is perfected to simplify the process of requesting a service in the most intuitive and convenient way. Detailed user flow for future releases is currently evaluated by the client and is planned after the initial release of MVP.

Boris Jankovic - Web design / Apps / User experience | borisjankovic.com

Step 11 | Prototype

Simplicity

Creating a high definition prototype that uses only tap gesture and dictation to submit a request for service was built in the final stage. An MVP (Minimum Viable Product) contains only the most important steps to deliver the most valuable feature for the client - a fully documented service request.

Step 12 | Ready for dev handoff

Design delivery

The design process for MVP is in its final stage at dev handoff. We used Scrum methodology to inform the client about the progress on a weekly basis. With valuable insights we got from user testing, the process took a minimum amount of time to be tailored to the client's specific needs. With this solution client is expected to make an impact in the market, to simplify the process for submitting service requests, and to provide users with trust in its vision and service.

Awwwards