nocnoc.com 02/06 : the revamp of installer chat





product designresearch

User Research
User Flow
Wire-framing
Visual Design

PROJECT UNDER

NocNoc.com

DURATION

3 + 2 weeks



BACKGROUND OBJECTIVE
With the discovery of chat function usage on NocNoc system, we had found that chat feature becomes the first touchpoint where installer meets customers. However, it is a significant part to aggravate installer's work life because of the complexity of chat system and manual operation of the internal admin team. This made an order process more difficult and intensely. Moreover, it is unscalable.

The first objective to revamp the chat system was to make active-installer on NocNoc platform could manage their orders since they got the new lead's enquiry until the job was submitted,

in order to help them shorten work process and well organize their job by themselves as intended, cut off waiting process which intervened by admin and customer service team.



UNDERSTANDING THE PROBLEM
As a researcher who gathered pains and chat issues directly from phone called interviews, I understand how the overwhelmed process of the chat system, though, we also had found that the complex chat system is the first important issue that could increase the percentage of churn rate.

I conducted a brainstorming workshop with the team to uncover pains felt by individuals. 



Then created a current chat user flow in order to visualize issues that cover every step in the midst of chatting experience.






PRODUCT VISION
From these findings, we decided as a product to identify key business goals:

👉🏿 We want users to have a better order conversion experience and also less confusing steps.
👉🏿 We want to reduce the order assistant process from operation team.
👉🏿 We want to reduce survey-to-conversion time from 7 days on average to 1 day.



DEFINDING THE MVP
Based on the revealed problems, the product visions, and limitations of the Talk JS Chat system. We identified the following key user stories for MVP1:

👉🏿 Easier access to chat.
👉🏿 Easier manage order by using the short cut button.
👉🏿 Reduce working process of installer, connect the survey date booking system to payment page.
👉🏿 Get reminded by auto message and notification.


CHAT FLOW + WIREFRAME
I created the as-is and to-be chat flows with the intention to discover the simplest and fastest solution to fix the critical issues.






VISUAL DESIGN
This substantial problem occurred, Talk JS chat system has customization limitations that impossible to change UI or add-on functions. Therefore, I worked closely with developer to understand this issue and find out the design limitation together. Eventually, we successfully modified the foundation features to MVP1 chat design.




DESIGN 2.0 DECISION
I and my team had the same point of view that the current chat API system called Talk JS is not suitable for the installer's work management usability. There are numerous limitations of features and UI customization. This makes installers unable to manage the incoming order efficiently. Therefore, we agreed to discontinue Talk JS development and we planned to create a new chat system for our new service design 2.0.

Design 2.0 began with a new ideal flow and lofi-wireframe of the entire service portal based on the useability pain in order to illustrate teams member the same picture and to communicate with stakeholders before designing. After that, we make a user story mapping and list of all features of the wireframe we did, using MoSCoW prioritization to cut the scope of the new MVP1.


MVP1 FLOW + SCOPE
We decided to use Sendbird, an in-app chat third party, to create a new chat. Then re-started with bringing all listed must have featured to create a new user flow of the chat system.






VISUAL DESIGN
I researched the user interface case study and analyzed all the findings alongside the chat wireframing. Eventually, I came up with the new design of installer chat.