nocnoc order creation & mangement
PROJECT UNDER
NocNoc.com
DURATION
6 weeks
BACKGROUND
The product team plans to launch an installer product in Q4. We currently have a registration system and a chat system for client communication.
key challenges during orders include creating quotations, tracking orders, and setting up manual notifications by the operations team. automating these processes is essential for seamless access to information and independent task management by installers.
In the marketplace concept, installers manage their work, reducing the admin's role from creator to supporter.
key challenges during orders include creating quotations, tracking orders, and setting up manual notifications by the operations team. automating these processes is essential for seamless access to information and independent task management by installers.
In the marketplace concept, installers manage their work, reducing the admin's role from creator to supporter.
SYSTEM CONCEPTUAL MODELS
Began by gathering researched information and insights related to installer work scope determination and price-setting conditions, including prerequisites reflecting customer preferences. Unfolded this to outline the order structure and define the user story.
![]()
![]()
ORDER CREATION USERS’ MENTAL MODELS
Initially, the installer's primary objective is to create a survey order they they will receive payment upon job completion. The system's ability to remind about appointments becomes evident only after the first order is created.
The primary activity during the survey process is to schedule appointments with clients, which may or may not incur additional costs. Conversely, for quotation purposes, the main activity is to provide pricing, with or without an appointment date.
Hence, using installers' familiar terms like "Create an appointment" and "Create quotation" aligns with their main activities and ensures clarity.
![]()
The primary activity during the survey process is to schedule appointments with clients, which may or may not incur additional costs. Conversely, for quotation purposes, the main activity is to provide pricing, with or without an appointment date.
Hence, using installers' familiar terms like "Create an appointment" and "Create quotation" aligns with their main activities and ensures clarity.
USER FLOW
Together with another UX researcher, I drafted user flows for both surveys and service order creation based on contextual scenarios. We then established a list of order stages and statuses to confirm and communicate with the service buyer team and backend developers.
![]()
INFORMATION ARCHITECTURE + WIREFRAME
This method focuses on organizing form information to match users' mental models.
![]()
![]()
VISUAL DESIGN
During the design process for order creation, we considered how the necessary information would be reflected in the chat system to ensure comprehensive coverage of all possible cases and error states throughout the journey. Here is our initial version of the order creation feature...
![]()
![]()
![]()
CUT SCOPE OF THE FIRST MVP
After designing the initial version of the order creation feature, we faced constraints in time and team resources, requiring us to prioritize essential features for a successful first launch.
to align with business objectives and team consensus, we decided to focus solely on developing the quotation creation feature for the first MVP
We temporarily paused the survey appointment creation feature under the assumption that installers can manage both types of orders using only the quotation creation system.
to align with business objectives and team consensus, we decided to focus solely on developing the quotation creation feature for the first MVP
We temporarily paused the survey appointment creation feature under the assumption that installers can manage both types of orders using only the quotation creation system.
USABILITY TESTING
Background & Research Objectives:
To ensure our product meets user needs, conducting Usability Testing (UT) pre-launch is essential. As the installer Web App is being developed for the first time, the team aims to:
![]()
![]()
Conceptual research planning was divided into two sessions:
![]()
To ensure our product meets user needs, conducting Usability Testing (UT) pre-launch is essential. As the installer Web App is being developed for the first time, the team aims to:
- Gather feedback and questions from installers on our new marketplace concept and pricing system
- Identify effective methods for onboarding installers
- Test the usability of our Web App for creating quotations and managing orders efficiently
Conceptual research planning was divided into two sessions:
- Onboarding Product with Q&A:
Ensuring clear understanding of our product concept before testing. - Testing our prepared prototype:
Gathering feedback and understanding their problems and needs.
UT RESULT + INSIGHT
Understanding of marketplace concept results:
UT result:
Improvement plans:
![]()
- Following the onboarding video, installers demonstrated clear understanding of the NocNoc marketplace concept and answered all questions accurately, highlighting the necessity for direct communication during onboarding sessions.
- Many installers lacked understanding of how customers find them on the NocNoc website and the selection process by customers.
- Installers typically only engaged with customers through Line OA chats, without visiting the NocNoc website. They lacked a sense of ownership over their profile page and did not prioritize improving it to stand out
UT result:
- Installers struggle to grasp the quotation concept based on NocNoc order structure, as they're unfamiliar with pricing by room or divided information.
- Certain wording in the quotation adds to their confusion.
- Inconsistent information architecture doesn't align with their workflow.
- UI solutions for complex details are unclear and add to confusion.
Improvement plans:
REVISE USER INTERFACE
ORSER MANAGEMETN CONCEPTUAL DESIGN
Once order creation is established, the challenge is optimizing installer job management efficiency.
When installers access the Web App, we aim for them to:
When navigating to all job pages, we want them to:
When viewing detailed customer information, we want them to:
When installers access the Web App, we aim for them to:
- Quickly understand their tasks
- Easily prioritize and complete tasks
- Stay informed of updates through notifications
- Access guidance if no tasks are available
When navigating to all job pages, we want them to:
- View projects by status
- Easily find and access project details
- Check the latest order status for each project
When viewing detailed customer information, we want them to:
- Access pertinent details for the current work stage
- Focus on relevant information
- Create quotations and survey appointments
- Easily access the chat feature
- Review project history with a timeline
INFORMATION ARCHITECTURE + WIREFRAME
This wireframe is our initial draft in Miro, serving as a communication tool with stakeholders prior to design.
![]()
![]()
UT RESULT + INSIGHT
After usability testing and interviews, we discovered:
- Installers prefer viewing all their jobs, sorted by start date or status, for easy access.
- Each installer wants to preview upcoming jobs differently based on site size and duration, as they need to prepare crews and products accordingly.
- Installers don't expect to see job details when pressing the start job button, as they typically review job descriptions beforehand.
VISUAL DESIGN
Here is the updated UI flow for the job listing page after user testing.
![]()
![]()
CUT OFF SCOPE FOR SERVICE 2.0
After designing all main and critical features, our internal team agreed to omit some minor features from the initial launch of the new service 2.0 due to time and team constraints.
Design blueprint:
We also needed to communicate the scope of this new system to the admin and operation teams, key players in the home service system. To ensure everyone was aligned, we created a service blueprint for internal and external teams.
Additionally, this blueprint helped the PM decide which features to prioritize for future development.
![]()
Design blueprint:
We also needed to communicate the scope of this new system to the admin and operation teams, key players in the home service system. To ensure everyone was aligned, we created a service blueprint for internal and external teams.
Additionally, this blueprint helped the PM decide which features to prioritize for future development.
