katgolek Site Global Texture - Noise Background
katgolek Site Global Texture - Noise Background
    Ecommerce banner site mockup
    Ecommerce banner site mockup

Project Details

Design for FSM/CRM Home Services SaaS Application

Dispatch is field service management (FSM) and customer relationship management (CRM) software targeted towards business owners in the home services sector (junk removal, moving companies, power washers, house cleaners, hvac, plumbers etc...). It allows to manage home service business by scheduling jobs, dispatching field technicians (employees) to jobs, invoicing customers, sending estimates, collecting payments, managing inventory, running reports, messaging team and customers, etc…The existing FSMs / CRMs pose usability challenges, especially for individuals attempting to launch a home services business, who may not be tech-savvy. Moreover, the cost of these FSMs solutions is prohibitive for many in this demographic. Dispatch should be their number one solution with easy to follow interface (comparable to this of apple products) and low cost budgeting.

Navbar and sidebar icons have been sourced from Flaticon https://www.flaticon.com/

Client

Dispatch

Scope

Field service management (FSM) / customer relationship management (CRM) software design targeted towards business owners in the home services sector

Tools

Figma
User on Dispatch dasboard screen -  checking daily statistics and updates on job progress and business KPIs
Design style: colors and typography
Design system: navbar, sidebar, cards
Design system: cards, modals, charts, buttons
Dispatch dasboard design showing stats/widgets: sales, jobs, top sources, open invoices, average job size, ROAS (return on ad spend)  with last 7 days/last 30 days/last year filters.
User on dispatch calendar screen - scheduling jobs for a week
Calendar view on weekly filter which is the most commonly used. The calendar must be easy to understand and follow. It enable the user to drag jobs around and resize them.
Calendar view showing modal with job details (it displays client name, phone number, job schedule, job address, crew name, job description or notes and job status ) - it should be accessed upon click on calendar job card.
View Job or Add New Job Screen - initial view upon scheduling the job and assignining the employee. In this screen there is no data available for the client - it can be searched in the database or set up from scratch. All job steps, apart from Scheduling have "pending update" state. Scheduling has been marked as completed. Most of the widgets have inactive state: client history, activity feed, chceklists, private notes, attachments, job fields, job tags.
Entrepreneur (User) on dispatch view job screen - scheduling job and updating job details
View Job or Add New Job Screen showing client details ( client name, property address and value, house street view, client contact details), job steps completed, scheduling time, assigned employee, service details with service value, job invoice details (if generated), payment history (if paid), client history, job activity feed (if available), checklist details widget (active widget), attachments widget with files details (active widget), private notes, job fields (inactive widget), job tags (active widget). Apart from that there is google map showing house location.
View Job screen with active finish job modal (job step modal) for entering details and marking job as finished
View Job screen with active payment job modal (job step modal) for entering details and marking job as paid
User on messages (inbox) screen
Messages Screen for messaging the client with & new booking details
Alternative messages screen for messaging the employees and the client
Calendar screen with team map filter. It displays 3 teams, each team has assigned color for better visualisation and differentation,  one team (DE) has active status and its route is displays on the map.The user can navigate to other teams via next or previous buttons. There is a AI Route button for finding best route.
Calendar screen with team map filter. It displays 3 teams, each team has assigned color for better visualisation and differentation,  the map shows all routes for visible teams.The user can navigate to other teams via next or previous buttons. There is a AI Route button for finding best route.