( By Munawar Khel / Teamfront / Lead UI/UX Designer / 2024–PRESENT / 10 min read )
ServiceMonster Platform Redesign
The redesign took an aging, feature-heavy field service management platform and turned it into a modern, visually cohesive product on both web and mobile, while preserving the depth its established user base depends on.
The result and the decision behind it
( What it did )
Unified 15+ web modules and 55+ report types on the Align UI token-based design system, replacing inconsistent per-module styling with shared drawers, modals, form patterns, navigation, and status systems.
( The decision behind it )
Rebuild the web platform on one token-based design system
Inconsistency was not a cosmetic issue, it was the root cause of the cognitive load users carried when moving between Leads, Accounts, Scheduling, and Reports. A shared token-based foundation fixed it structurally: one pattern solved once applied everywhere, engineering built from a predictable component library instead of duplicating UI, and the platform gained a single coherent identity to compete with modern FSM tools. At 15+ modules and 55+ report types, per-module styling would have re-created the exact debt the project existed to pay down.
Generated schematic, not a screenshot. Real imagery to follow.
( The account )
Context
ServiceMonster is an all-in-one SaaS CRM and field service management platform for home service businesses in the United States: carpet cleaning, janitorial, restoration, HVAC, plumbing, pest control, and general contracting companies. It is the system those businesses run their day on. Leads, customer accounts and job sites, work orders, technician scheduling and dispatch, marketing campaigns, invoicing, payments, reporting across 55+ report types, and franchise management all live in one web application, with a companion mobile app that connects the office to the crews in the field.
The platform was well established and functionally deep. What had not kept pace was the interface carrying all of it. Years of incremental feature additions had accumulated on a dated UI, and the design debt compounded into something users felt daily: 15+ modules that each looked and behaved slightly differently, workflows that cost more clicks than they should, and data presented as flat tables when business owners needed insight. Meanwhile a newer generation of field service management tools was competing on exactly the experience ServiceMonster had stopped investing in.
The work covered both surfaces. On web, a full-platform redesign across the existing module set (Home Dashboard, Leads, Accounts, Orders, Scheduling, Marketing, FMS, Reports, Dashboards, Quick Add, Marketplace, Payments, and Settings) rebuilt on the Align UI design system, alongside a set of capabilities the platform did not have at all: a two-way texting and chat center, SMS marketing with a campaign flow builder, reviews and reputation management, an automation engine, an embeddable WebChat widget, and an AI Agent integration. The web work is documented across two environments, staging and production, with the full-platform module set in staging and the communication, marketing, reviews, and automation suite in production. On iOS, an end-to-end redesign of the mobile app across three role-based personas: Admin, Supervisor, and Technician.
The problem
The redesign had to solve problems on two fronts at once: the state of the interface, and the gaps in what the platform could do at all.
- Outdated and inconsistent visual language. Buttons, form fields, tables, modals, and navigation patterns varied in style, spacing, and behavior across modules. Users re-learned interaction patterns as they moved between Leads, Accounts, Scheduling, and Reports, which added cognitive load and made the platform feel less trustworthy than modern competitors.
- Bloated navigation and information architecture. With 15+ major modules and dozens of sub-features, the sidebar lacked clear hierarchy and the relationships between modules were hard to read. Users could not easily see how leads flow into accounts or how orders connect to scheduling.
- High interaction cost on daily tasks. Creating an order with an appointment, adding a lead, or setting up a campaign meant navigating to a specific module, opening a form, and moving across several page transitions. There was no unified quick-create path for the work people did most.
- Data without insight. Dashboards and reports presented flat, text-heavy tables with no comparative metrics and no visual KPIs, so owners had to mentally reconstruct their pipeline, utilization, campaign performance, and financial health from raw numbers.
- Fragmented customer communication. There was no centralized hub for SMS conversations, team chat, customer texting, or review responses. Users switched between tools and tabs to text a customer, send an e-signature request, or request a review, which meant missed messages and delayed responses.
- Missing capability areas. The platform had no SMS marketing or campaign flow tooling, no reviews module despite online reputation being a primary lead driver in home services, minimal workflow automation for repetitive tasks like appointment reminders and invoice follow-ups, and no AI-powered support for after-hours inquiries.
- Buried configuration and weak first-run guidance. Chat setup, notification preferences, auto-replies, keyword triggers, departments, scheduled texts, and signature templates were hard to locate or took too many clicks. Screens lacked meaningful empty states, so users opening a feature for the first time met a blank screen instead of a next step. Franchise management and the Settings module carried the same density problem in their own ways.
- One mobile interface serving three different jobs. Admins, Supervisors, and Technicians relied on the same underlying platform but needed very different workflows. The app forced Admins through technician-centric flows, buried lead management, and handed Technicians a complex interface when they needed field-ready tools, all inside a dated dark-blue and teal visual language with no onboarding.
What I did
The approach was to fix the foundation first and let the rest follow from it. On web, that meant rebuilding every module on Align UI, a token-based design system, so consistency, scalability, and design-to-development handoff efficiency came from the system itself rather than from module-by-module discipline. Shared drawers, modals, form patterns, data tables, navigation, and status systems meant a pattern solved once in Leads was already solved in Accounts and Orders. On mobile, where no such foundation existed, I built a custom component system from scratch for the redesign, including service item cards, address and contact detail modules, badge components, and site cards.
On that foundation, the web platform was organized around the operational lifecycle of a service business, from lead capture through account and site management, work orders, dispatch scheduling, invoicing and payments, and follow-up marketing, with dashboards and 55+ reports reading off that spine. Two structural moves cut across it: a global Quick Add drawer that collapses the most common daily workflow into one guided flow from anywhere in the app, and a centralized communication hub that pulls texting, team chat, e-signatures, review requests, and automated messaging into a single inbox instead of scattering them across external tools.
The mobile app took a different organizing principle. Rather than one interface stretched across three roles, I designed it as three role-based experiences on shared components: Admins get lead pipeline and client relationship tools, Supervisors get scheduling control and team oversight, and Technicians get a stripped-down field workflow built around the actual shape of their day, clock in, work the job, document it, clock out.
Outcomes
- Reduced interaction cost on the highest-frequency daily workflow through the global Quick Add drawer, collapsing account, order, and appointment creation into one guided flow with the dispatch calendar embedded.
- Surfaced business intelligence that was previously buried in raw tables, through widget-based dashboards with real-time KPIs, comparative period metrics, and visual charts across sales, repeat rate, accounts, orders, scheduling, and marketing.
- Eliminated the need for external communication tools by consolidating SMS, team chat, e-signatures, review requests, and automated messaging into a single inbox.
- Added capability the platform did not previously have: SMS marketing with a visual flow builder and keyword automation, reviews and reputation management with Google review request, monitoring, and response, an automation engine for appointment reminders and invoice follow-ups, an embeddable WebChat widget, and an AI Agent integration for 24/7 lead capture and scheduling.
- Delivered a role-optimized iOS experience where each persona's screens match their actual work, giving Admins a lead pipeline and streamlined order creation, Supervisors scheduling filters and a consolidated activity timeline, and Technicians a focused daily timeline, persistent in-job time tracking, a Finance tab for earnings visibility, and integrated on-site documentation.
- Established two scalable design foundations, Align UI on web and a custom component system on mobile, so engineering can ship new features with predictable UI behavior.
What I learned
At this scale, the design system is the project. With 15+ modules and 55+ report types, no amount of screen-level craft would have produced a coherent product, and every hour spent on Align UI tokens and shared patterns paid back across every module that came after. The most useful thing I did was resist the pull to make individual screens beautiful before the foundation could make all of them consistent.
Designing for three personas taught me that role-based access and role-based design are different problems. The legacy app had the first and not the second: everyone reached the same screens with different permissions. Once I wrote the problem set separately for Admin, Supervisor, and Technician, it was obvious that a Technician standing in a customer's hallway between jobs and an Admin reviewing the lead pipeline at a desk should not be looking at variations of the same interface. Sharing a component system while diverging on structure gave each role a screen shaped by their day without fragmenting the build.
Adding capability and repairing debt in the same project turned out to reinforce each other more than I expected. The new areas, the Chat Center, SMS marketing, reviews, and automation, were designed on the system from day one, which meant they set the standard the older modules were being rebuilt toward. Having a live example of what "done" looked like made the redesign of the legacy modules a clearer target than a spec would have been.
The full record / 4 decisions
- My role
- Lead UI/UX Designer
- Timeline
- January 2024 – Present
- Platform
- Web (Desktop SaaS, 1440px primary breakpoint) and Mobile (iOS), enterprise field service management
- Category
- Enterprise SaaS Product Design (Web and Mobile)
- Status
- Redesign, delivered
Tools Figma, Align UI Design System, Design Tokens, custom mobile component system
Team Cross-functional on web, working alongside product management, engineering, and business stakeholders; sole designer on the iOS mobile app
Decisions
Rebuild the web platform on one token-based design system
- What
- Every redesigned component across all 15+ web modules was built on Align UI, a token-based design system, rather than restyled module by module.
- Alternatives
- A visual refresh applied per module, which would have let individual sections ship faster and independently while each carried its own button styles, form patterns, and table layouts, as the legacy platform already did.
- Why
- Inconsistency was not a cosmetic issue, it was the root cause of the cognitive load users carried when moving between Leads, Accounts, Scheduling, and Reports. A shared token-based foundation fixed it structurally: one pattern solved once applied everywhere, engineering built from a predictable component library instead of duplicating UI, and the platform gained a single coherent identity to compete with modern FSM tools. At 15+ modules and 55+ report types, per-module styling would have re-created the exact debt the project existed to pay down.
A global Quick Add drawer for the most common daily workflow
- What
- Designed a Quick Add drawer accessible from anywhere in the application, walking the user through account selection or creation, order configuration with a running sub-total, appointment booking against an inline scheduling calendar, and confirmation, with persistent step progress and order summary in a left sidebar.
- Alternatives
- Keeping creation flows inside their own modules, so users navigate to Accounts, then Orders, then Scheduling, completing a separate form in each.
- Why
- The single most common daily action for a service business is turning a customer into a scheduled job, and it was costing the most clicks and page transitions. Collapsing that path into one drawer that keeps context throughout removed the navigation overhead entirely. Embedding the actual dispatch calendar inside the drawer, rather than a simplified date picker, meant the appointment could be booked with full awareness of technician availability without ever leaving the flow.
Bring customer communication inside the platform
- What
- Designed a Chat Center as the central communication hub, with two-way texting, team chat, channels, e-signature requests, message templates, SMS compliance handling, an embeddable WebChat widget that bridges into the same inbox, and review requests initiated from inside a text conversation.
- Alternatives
- Leaving communication to the external tools businesses were already using and integrating with them, rather than building a first-party hub.
- Why
- Customer communication was scattered across disconnected channels, and every switch between tools was a chance for a message to be missed and a job to be lost. Because online reviews are a primary lead driver in home services, and because SMS is how these businesses actually reach customers, pulling texting, reputation, and marketing into the operational workflow was not a convenience feature, it was moving revenue-generating activity into the system where the customer record already lived. It also closed the data silos created by running outreach on external platforms.
Design the mobile app as three role-based experiences
- What
- Structured the iOS redesign around Admin, Supervisor, and Technician personas, with distinct navigation, dashboards, and workflows per role built on one shared component system.
- Alternatives
- A single unified mobile interface with role-based permissions hiding or showing features, which is closer to what the legacy app did.
- Why
- The three roles do genuinely different jobs. An Admin needs an operational overview and a lead pipeline, a Supervisor needs scheduling control and team visibility, and a Technician needs the fewest possible taps between arriving on site and finishing the job. The legacy app's shared interface meant Admins were pushed through technician-centric flows and Technicians carried complexity they had no use for in the field. Building the roles separately on shared components kept the system coherent and the build maintainable while letting each persona's screens be shaped by their actual priorities.
( Tags )
- Information Architecture
- Interaction Design
- Visual Design
- Design Systems
- Design Tokens
- Web
- iOS
- Mobile
- Enterprise SaaS
- Dashboard
- Field Service Management
- Payments
- CRM
- AI Product Design
- Legacy Modernization
- Data Visualisation