( By Munawar Khel / Teamfront / Lead UI/UX Designer / 2024–PRESENT / 7 min read )
Fieldster Mobile App
The redesign gives Fieldster a unified, modern mobile experience built on one design system, replacing an app that had grown inconsistent across its nine modules.
The result and the decision behind it
( What it did )
Consolidated 136 or more screens across nine modules onto the Align UI design system, giving the app a single consistent component and interaction vocabulary.
( The decision behind it )
Four navigation pillars instead of a flat module list
The old structure made frequency invisible. A technician's day is dominated by a handful of things, and promoting those to permanent, always-reachable positions removed most of the jumping between sections that routine tasks used to require.
Generated schematic, not a screenshot. Real imagery to follow.
( The account )
Context
A pest control technician runs an entire working day through a single device, and Fieldster is the app on it. Teamfront's field service management product for that industry, it is the tool technicians open to see what is scheduled, navigate to a property, document what they found and what they treated, capture a signature, take payment, and post the completed service record. Around that core it also carries office-facing work: appointment creation, lead capture, support ticket management, time logging, and team and customer messaging.
Pest control sits within the broader facilities and home services industry, and it runs on a mobile workforce performing on-site inspections, treatments, and compliance documentation. The phone, in other words, is the primary interface for the business. Technicians use it under time pressure and in awkward physical conditions, where a minute lost to a confusing screen is a minute not spent on the job. It also has to carry domain mechanics that general-purpose scheduling tools never encounter: pest identification, chemical treatment logs, barcode scanning for Sentricon station management, conducive condition assessments, weather tracking, and geolocation-based property mapping.
This was not a greenfield product. A version of the app already existed and was in daily use, and the project was an end to end UX and UI redesign of all of it: 136 or more screens across nine core modules, covering Authentication and Security, Calendar and Scheduling, Appointment Detail and Service Execution, Appointment Creation, Lead Management, Ticketing and Support, Time Logging, Chat and Messaging, and Floor Planning.
The problem
The existing app worked, but working is a low bar for a tool someone uses all day. Its shortcomings landed directly on technician productivity and on the operational efficiency of the businesses running it.
Together these issues increased service time per appointment, reduced first-visit resolution rates, and created friction between field and office operations.
- Outdated and inconsistent UI patterns. Unintuitive navigation, unpredictable interactions, and a fragmented information architecture forced technicians to jump between disconnected sections to finish routine tasks.
- Complex multi-step workflows without guidance. Appointment creation ran six steps across property search, agreement selection, scheduling, routing, and billing. Service execution demanded pest findings, chemical application logs, station inspections, condition assessments, signatures, and payment collection. Both were cumbersome and error-prone, which produced incomplete records and data entry mistakes.
- Poor information hierarchy. Technicians could not quickly scan and prioritise a daily schedule, tell appointment statuses apart, or reach critical customer and property information at a glance.
- No cohesive design system. Components behaved inconsistently across the app, which made the product unpredictable and gave new technicians a steep learning curve.
- Missing modern capability. Without two-factor authentication and with limited communication tools, technicians fell back on external apps for team coordination and customer messaging, fragmenting the workflow further.
What I did
The approach was to rebuild the experience as a task-oriented mobile app on a single design system, so that consistency stopped being something each screen had to earn and became a property of the whole product. All 136 or more screens across the nine modules were designed on Align UI, implemented as a custom system for Fieldster.
Structurally, the app was reorganised around four primary navigation pillars: Calendar, Tickets, Chat, and Menu. That put a technician's most critical daily tools within immediate reach rather than asking them to go looking. Within that frame, the two heaviest workflows were rethought rather than tidied. Scheduling was rebuilt around a horizontal date strip for rapid day switching, appointment cards showing customer name, service type, time window, and address at a glance, and dual list and map views for route work. Service execution became a guided, modular workflow: quick actions such as capture signature, get directions, print service ticket, and contact customer sit at the top of the appointment detail screen, with organised expandable sections for pests, chemicals, conditions, station lists, and fourteen or more further data modules underneath.
Holding it together is a consistent interaction language. Bottom sheets, confirmation dialogs, loading states, success confirmations, and contextual action menus behave the same way everywhere, so a technician who learns one flow has effectively learned the rest.
Outcomes
- Restructured the information architecture around four navigation pillars, putting the technician's most-used tools within immediate reach.
- Made service documentation completable without workflow interruption through a modular appointment detail view that keeps context on screen.
- Reduced the conditions for data entry error in the longest flows by adding progress indicators, auto-populated property search, cascading selections, and a pre-submission review to appointment creation.
- Removed dependency on external tools by bringing chat, payment processing, barcode-based station scanning, and two-factor authentication into the app.
- Established a scalable design foundation intended to reduce future design and development cost and keep the experience coherent as the platform grows.
What I learned
Redesigning an app that is already in use is a different problem from designing one from scratch. The temptation is to fix screens, because screens are where the complaints are. But most of what made Fieldster hard to use came from the absence of a system underneath it, so the fix was structural rather than visual.
The project also reinforced that step count is a poor proxy for friction. Appointment creation stayed six steps long and still got better, because what technicians needed was orientation and a chance to check their work, not a shorter path. Compressing it would only have made each screen denser and the mistakes more likely.
The full record / 4 decisions
- My role
- Lead UI/UX Designer
- Timeline
- January 2024 – Present
- Platform
- Mobile (iOS, 393x852pt, iPhone 14/15 class), field-facing app for pest control technicians
- Category
- Mobile Product Design
- Status
- Redesign, delivered
Tools Figma, Align UI Design System
Team Solo Designer
Decisions
Four navigation pillars instead of a flat module list
- What
- Reorganised the information architecture around four primary pillars, Calendar, Tickets, Chat, and Menu, with everything else reached through them.
- Alternatives
- Preserving the existing structure, where the app's modules sat at a comparable level and technicians navigated between disconnected sections to complete a single task.
- Why
- The old structure made frequency invisible. A technician's day is dominated by a handful of things, and promoting those to permanent, always-reachable positions removed most of the jumping between sections that routine tasks used to require.
Modular expandable sections for service execution
- What
- Built the appointment detail screen as quick actions over organised expandable sections covering pests, chemicals, conditions, station lists, and fourteen or more additional data modules.
- Alternatives
- A linear multi-step form that walks the technician through every documentation category in sequence, matching how appointment creation is handled.
- Why
- Service execution is not linear in practice. What a technician documents depends on what they find on the property, and a fixed sequence would force them through categories that do not apply. Expandable sections let them work in whatever order the job takes while keeping the appointment context on screen throughout.
A guided six-step wizard for appointment creation
- What
- Kept appointment creation as six steps but added clear progress indicators, intelligent property search with auto-populated results, cascading agreement and service event selection, colour-coded scheduling, and a review summary before submission.
- Alternatives
- Compressing the flow into fewer, denser screens to shorten it.
- Why
- The steps reflect genuinely distinct decisions, from property to agreement to schedule to route to billing, so collapsing them would have traded length for density on a phone screen. The problem was never the number of steps, it was that the flow gave no sense of position or progress. Adding orientation and a final review addressed the actual failure, which was incomplete and mistaken records.
A native chat module rather than relying on external apps
- What
- Built messaging into the app, with threaded conversations, read and unread indicators, and customer search.
- Alternatives
- Continuing to let technicians coordinate through the external messaging apps they were already using.
- Why
- Coordination happening outside the app meant the record of it lived outside the app too, split across tools and disconnected from the appointments and customers it referred to. Bringing it in kept the technician's workflow in one place and kept communication attached to the work it belongs to.
( Tags )
- Information Architecture
- Interaction Design
- Visual Design
- Design Systems
- iOS
- Mobile
- Enterprise SaaS
- Field Service Management
- Payments