Mobile Application
For Field Technicians
Designed for field technicians who are responsible for maintaining equipment such as Fire Protection Systems and Air-conditioner Systems in buildings. The client’s base is in Singapore.
About The Client
This is a company that equips millions of field service workers in Southeast Asia with advanced technology and insights to enhance their efficiency, service quality, and profitability.
The Requirement
Build a mobile application designed for field technicians who are responsible for maintaining equipment such as Fire Protection Systems and Air-conditioner Systems in buildings. The app will improve task management, navigation, documentation, communication, and access to information, enhancing the technician's overall productivity and customer satisfaction.
My Approach
Map out the primary persona's user journey.
Build a flow diagram or flowchart to illustrate the user journey.
Create a wire-flow that encompasses user flows with both low-fidelity and high-fidelity wireframes.
Develop the UI design for the main pages of the application.
UX DESIGN TECHNIQUES
User journey map
Wireframes
Prototyping
Usability testing
TOOLS
Figma
Excel
Adobe Illustrator
Pen & Paper
DELIVERABLES
User Journey Map
Wireframes + Component Library
Low-fidelity and high-fidelity wireframes
UI design for the main pages
My Design Process
I use the Double Diamond design process for my work. This method emphasizes both divergent and convergent thinking. In the Discover and Develop stages, we explore and generate a wide range of ideas. In the Define and Deliver stages, we narrow down and execute the best solutions. The process encourages iteration between these stages, ensuring a user-centered approach and increasing the likelihood of successful outcomes.
1
Discover
In the first diamond, the focus is on gaining a deep understanding of the problem or opportunity.
Conduct research, interviews, and observations to gather insights about user needs, market trends, and challenges.
Analyze data, identify patterns, and define the problem statement.
Explore different perspectives, consider constraints, and define the project goals and objectives.
2
Define
Once the problem is understood, the focus shifts to defining the specific challenges and opportunities to be addressed.
Reframe the problem statement based on the insights gathered in the Discover phase.
Identify the target audience or user groups and create user personas to represent their characteristics, behaviors, and needs.
Define clear design criteria and establish the project's scope, objectives, and constraints.
3
Develop
In the second diamond, the focus is on generating and exploring a wide range of possible solutions.
Brainstorm ideas, encourage creative thinking, and explore different design concepts.
Prototype and test different solutions to gather feedback and refine ideas.
Collaborate with stakeholders, experts, and users to iterate and refine the concepts based on feedback and insights.
4
Deliver
The final diamond represents the delivery phase, where the refined solution is brought to life.
Create detailed designs, develop functional prototypes, or prepare production-ready assets.
Collaborate with developers, engineers, or production teams to implement the design.
Conduct user testing, collect feedback, and make necessary adjustments before finalizing the solution.
Discover Phase
Research Objectives
Understanding the current processes and workflows of field technicians, identifying pain points and areas for improvement, and gathering insights to enhance efficiency and effectiveness.
Participants
A diverse group of field technicians who represent different roles, experience levels, and specializations within the organization.
Data Collection
Conduct interviews: Schedule one-on-one interviews with selected field technicians. Use a semi-structured interview approach to allow for flexibility while ensuring coverage of key topics and questions.
Observation: If feasible, observe field technicians in action to gain firsthand understanding of their processes and workflows. Note their actions, decision-making processes, challenges faced, and interactions with customers and colleagues.
Document Review: Review existing documentation, such as standard operating procedures, task assignments, or work order management systems, to gather additional insights into the processes and workflows.
Interview Questions
Background Questions
Can you briefly describe your role as a field technician?
How long have you been working as a field technician?
In which industry or sector do you primarily operate as a field technician?
Process And Workflow Questions
Can you walk me through a typical day or task as a field technician? What are the key steps involved?
How are tasks assigned to you? Is it through a work order management system or other means?
What tools, equipment, or materials do you typically need to gather or prepare before starting a task?
How do you prioritize and schedule tasks to ensure efficient execution and meet service level agreements?
During task execution, how do you document your progress, record relevant information, and capture any issues or findings?
How do you communicate and collaborate with the central operations team or supervisors during and after task completion?
Are there any specific safety protocols or compliance requirements that you need to follow during your tasks?
What mechanisms are in place for quality control and assurance in the work performed by field technicians?
How do you receive feedback and support from the central operations team or supervisors after task completion?
Can you share any pain points, challenges, or bottlenecks you encounter in your day-to-day processes and workflows?
What are the opportunities for process improvement and optimization that you've identified in your role as a field technician?
Synthesis and Reporting
Summarize the findings, highlighting key themes, pain points, and improvement opportunities.
Include actionable recommendations to address identified pain points and improve the processes and workflows of field technicians.
Present the research findings in a clear and concise manner, using visual aids such as charts, diagrams, or user journey maps to enhance understanding.
Define Phase
Deliveries
User Persona, User Journey Map, Pain point and solution mapping,
User Persona
Sarah Anderson
34 / Female
Sarah is a highly skilled and experienced HVAC (Heating, Ventilation, and Air Conditioning) field technician with a strong background in the industry. She has been working as a field technician for over 8 years, specializing in HVAC system installation, maintenance, and repairs.
Details
Age:
34 y.o.
Occupation:
8 years in HVAC field technician
Location:
California, United States
Goals
Ensure efficient and effective maintenance, repairs, and installations of HVAC systems
Meet service level agreements and customer expectations
Enhance customer satisfaction and loyalty
Pain Points:
Difficulty accessing up-to-date task information and customer details
Limited ability to track and update task progress in real-time
Time-consuming paperwork and documentation processes
Lack of centralized platform for communication and collaboration
Challenges
Delays in obtaining materials and equipment
Unclear task instructions
Inconsistent communication channels
Coordinating with other technicians and managing changing priorities
Opportunities for Improvement:
Streamlining communication channels between technicians, supervisors, and central operations team
Implementing a digital system for task management, progress tracking, and documentation
Enhancing task scheduling and prioritization mechanisms
Sarah's Journey map
Scenario: Sarah, an experienced HVAC field technician, manages her work through emails, phone calls, and printed materials, manually handling tasks such as navigation, documentation, and communication with the central operations team and clients.
Pain point and solution mapping
Pain Points
Task Management
Manually creating checklists is time-consuming and prone to human error. Task details and requirements might be scattered across different sources (emails, notes), making it hard to stay organized.
Navigation and Directions
Manually calling clients for directions or updates can be time-consuming and may result in missed connections.
Communication and Collaboration
Waiting for input or decisions from the central operations team can slow down task execution.
Access to Information
Manually searching through paper files and notes for customer details or equipment documentation
Reporting and Feedback
Without standardized templates or automated workflows, creating and submitting reports involves repetitive and inefficient tasks
Task History and Analytics
Without a comprehensive task history, it is challenging to consistently follow up with customers based on previous interactions or feedback
Solutions
Task Management
With a mobile app, Sarah can receive task assignments directly on her device, eliminating the need for manual communication or paperwork. The app can provide real-time updates on task details, priorities, and any changes, ensuring she stays informed and organized.
Navigation and Directions
The app can integrate GPS functionality, allowing Sarah to easily navigate to customer locations without relying on separate GPS devices or printed directions. This saves time and reduces the chances of getting lost, improving overall efficiency.
Communication and Collaboration
The mobile app can facilitate seamless communication between Sarah and the central operations team, supervisors, or other technicians. It can provide instant messaging or chat features, allowing for quick exchanges of information, updates, and clarifications.
Access to Information
The app can serve as a centralized repository of customer details, task information, and equipment documentation. Sarah can quickly access relevant information on her mobile device, eliminating the need to carry physical files or rely on memory.
Reporting and Feedback
With a mobile app, Sarah can easily generate and submit digital service reports, invoices, or other documentation. The app can provide templates and automated workflows, streamlining the reporting process. Additionally, Sarah can receive feedback and support from supervisors or customers directly through the app.
Task History and Analytics
The mobile app can maintain a comprehensive task history, allowing her to review past assignments, track performance metrics, and identify areas for improvement. Analytics features can provide insights into task completion times, customer satisfaction ratings, and productivity levels.
Develop Phase
Main Function Wireframe Screens
Task Management and Access to Information
This function provides comprehensive task management capabilities, allowing Sarah to view customer information, task overviews, and checklists. She can also access relevant documents, see team member assignments, and stay organized with all necessary information at her fingertips.
Communication and Collaboration
This function facilitates seamless interaction between Sarah, her team, and supervisors, enabling instant messaging, sharing updates, and coordinating tasks directly through the app.
Navigation and Directions
This function offers real-time navigation and directions, helping Sarah efficiently travel to job sites with integrated GPS, traffic updates, and route optimization.
Reporting and Feedback
This function streamlines the reporting process by allowing Sarah to generate and submit digital service reports and invoices easily. It also enables her to receive real-time feedback from supervisors and customers directly through the app.
General user flow
Main UI screens
Deliver Phase
Color Styles
Brand Color
Primary Colors - The foundational color representing brand identity
Blue Gradient
#0048B2
Light Blue
#ECF3FD
Semantic Color
This concept uses color to convey specific meanings or functions within an interface, enhancing user understanding and experience by visually representing status, actions, or categories consistently.
Red
#FFDADA
Yellow
#FFF0D2
Green
#CCFED7
Absolute Colors
This is a absolute white and black.
White
#FFFFFF
Black
#000000
Grey Shades
Grey Colors - Employed for creating inviting and readable text elements throughout the template
Gray 1
#F5F5F5
Gray 2
#BDBDBD
Gray 3
#FCFCFD
Gray 4
#1A1A1A
Design Anatomy
Let's talk!
Got a project in mind? Fill out the form to let me help you.
Email: updesigninvn@gmail.com
