nocnoc.com 05/06 : order creation
Context Scenario
User flow
Information Architecture
Wireframing
Visual Design
PROJECT UNDER
NocNoc.com
DURATION
4 weeks for designing
2 weeks for testing planning and UT + revise UI
BACKGROUND OBJECTIVE
The product team plans to launch an installer product within Q4 this year. Currently, we have a registration system (a channel for a system entering), a chat system (intermediary to communicate and discuss job detail with clients).
Under the marketplace concept, installers should be the one who has ownership of their job by creating and managing their own work. And the role of admin should be reduced from creator to supporter.
currently, the most painful steps when an order occurs are the difficulty of creating quotations, tracking the order, and setting up all the manual notifications by nocnoc’s operation team.
Under the marketplace concept, installers should be the one who has ownership of their job by creating and managing their own work. And the role of admin should be reduced from creator to supporter.
SYSTEM CONCEPTUAL MODELS
Started by gathering the information and insight that have been researched which related to the installer's work scope determination and price-setting condition. These include the prerequisites detail to reflect what the customer wants. Unfold it to outline the order structure and define the user story.
![]()
![]()
USER MENTAL MODELS
In the beginning, the Job To Be Done by the installer to create a survey order is compulsory to receive payment when the job is done. The installer will not know that system can help remind the appointment until one order has been created.
The main activity of the survey process consideration is ‘to create an appointment with clients which may or may not have an additional cost. On the other hand, to do the quotation, the installer thought the main activity is ‘to quote price' that can come with or without the appointment date. The system conceptual model (SCM) of both activities is to create an order ID. Therefore, the easiest way of thought based on primary and secondary personas is using the installer's accustomed words which are ‘Create appointment’ and ‘Create quotation’ based on the main activity they did.
![]()
The main activity of the survey process consideration is ‘to create an appointment with clients which may or may not have an additional cost. On the other hand, to do the quotation, the installer thought the main activity is ‘to quote price' that can come with or without the appointment date. The system conceptual model (SCM) of both activities is to create an order ID. Therefore, the easiest way of thought based on primary and secondary personas is using the installer's accustomed words which are ‘Create appointment’ and ‘Create quotation’ based on the main activity they did.
USER FLOW
I and another UX researcher drafted the user flows together for both survey and service order creation based on the context scenario we did. Then set up a list of order stages and status in order to confirm and communicate with the service buyer team and backend developer.
![]()
INFORMATION ARCHITECTURE + WIREFRAME
This method focuses on form’s information architecture in order to group all the needed datas and display them in a suitable way related to their mental model.
![]()
![]()
VISUAL DESIGN
On the designing process of order creation, we also thought about how the needed information will reflect into the chat system in order to make sure that we have designed cover all possible cases and error states of the whole journey. And here is our first version of the order creation feature...
![]()
![]()
![]()
CUT SCOPE OF THE FIRST MVP
After designing the first version of the order creation feature. According to a limited time and teams, we need to select solely must-have features that could help our installer manage their job successfully in the first launch. So to cut off scope is significant from the business point of view and the team’s agreement. We decided to continue develope only the quotation creation feature and pause the survey appointment creation feature in the first MVP according to the assumption that the installer can create both types of orders by using only the quotation creation system.
USABILITY TESTING
Background & Research Objectives is to make sure that our designed product meets the user's needs, so UT before launch is a must. Since installer Web App was going to develop for the first time, the team would like...
👉🏿 To get the opinion and question from the installer about our new concept of marketplace and pricing system
👉🏿 To find the way to onboard installer effectively
👉🏿 To test that the installer could use our Web App to create quotations and manage the order successfully
![]()
![]()
Conceptual research planning was separated into 2 sessions consisting of
👉🏿 Onboarding Product with Q&A: To make sure that the installer understands the concept of our product clearly before testing.
👉🏿 Testing our prepared prototype: To get feedback and understand their problem and need.
![]()
👉🏿 To get the opinion and question from the installer about our new concept of marketplace and pricing system
👉🏿 To find the way to onboard installer effectively
👉🏿 To test that the installer could use our Web App to create quotations and manage the order successfully
Conceptual research planning was separated into 2 sessions consisting of
👉🏿 Onboarding Product with Q&A: To make sure that the installer understands the concept of our product clearly before testing.
👉🏿 Testing our prepared prototype: To get feedback and understand their problem and need.
UT RESULT + INSIGHT
Understanding of marketplace concept results
👉🏿 After the installer watched the onboarding video, they all understand the NocNoc marketplace concept clearly and answer all the questions correctly. Therefore, straightforward communication while the onboarding session is necessary.
👉🏿 Most of the installers didn’t understand the mechanism of how a customer can find them on NocNoc website and how they were selected by the customer.
👉🏿 They had never entered NocNoc website, usually only respond the chats via Line OA. They had no sense of ownership in their profile page, didn’t think that they had to improve their own profile and make it outstanding.
UT result
👉🏿 Installer still can not get the idea of quotation concept based on NocNoc order structure and confused because normally they had never quoted the price according to the room or divided information into areas.
👉🏿 Some of the wording in the quotation makes them confusing.
👉🏿 Some of information architecture is not consistent with their actual workflow.
👉🏿 Confusing of some UI solutions in the complexity details.
Improvement
![]()
👉🏿 After the installer watched the onboarding video, they all understand the NocNoc marketplace concept clearly and answer all the questions correctly. Therefore, straightforward communication while the onboarding session is necessary.
👉🏿 Most of the installers didn’t understand the mechanism of how a customer can find them on NocNoc website and how they were selected by the customer.
👉🏿 They had never entered NocNoc website, usually only respond the chats via Line OA. They had no sense of ownership in their profile page, didn’t think that they had to improve their own profile and make it outstanding.
UT result
👉🏿 Installer still can not get the idea of quotation concept based on NocNoc order structure and confused because normally they had never quoted the price according to the room or divided information into areas.
👉🏿 Some of the wording in the quotation makes them confusing.
👉🏿 Some of information architecture is not consistent with their actual workflow.
👉🏿 Confusing of some UI solutions in the complexity details.
Improvement
REVISE USER INTERFACE
