Skip to content

( By / Astreya / Product UI/UX Designer / 2025 / 6 min read )

Field Service Management (FSM) Mobile App

FSM Mobile replaced a fragmented, manual field workflow with a single role-aware application, and the design delivered clear operational gains.

The result and the decision behind it

( What it did )

Consolidated 3+ disconnected tools into one mobile interface, eliminating the context-switching technicians did to find, start, and close tasks.

( The decision behind it )

Two-portal architecture instead of one shared interface

The two roles have opposite needs. Technicians need speed and minimal cognitive load while moving through a building, and managers need density and analytical depth to oversee a whole team. Optimizing each portal separately let both do their job well instead of compromising on a shared layout.

Generated schematic standing in for imagery of Field Service Management (FSM) Mobile App. It depicts nothing.
Generated schematic, not a screenshot of Field Service Management (FSM) Mobile App.

Generated schematic, not a screenshot. Real imagery to follow.

( The account )

Context

FSM Mobile is the field-facing companion to Astreya's managed-services operation, the same operation the AES web platform coordinates from the back office. Astreya deploys hundreds of field technicians across enterprise buildings, often on large-scale client campuses, to handle hardware deployments, printer maintenance, AV inspections, network troubleshooting, and facility upkeep. Those technicians work against tight Service Level Agreements and rotate between multiple buildings in a single day, while managers need to know who is where, what is being worked on, and whether response times are on track.

The project set out to give the field workforce a single mobile application that unifies shift management, task execution, and performance tracking, and to give team leads a real-time command center over attendance, task pipelines, and technician performance. It spanned two distinct role-based portals, a technician experience built for speed in the field and a manager experience built for density and oversight, delivered across 50+ unique screens with a custom component library and fully interactive prototypes.

The problem

Managing Astreya's field technicians was fragmented, manual, and low on visibility, and the same gaps showed up across every part of the day.

There was no centralized shift tracking, so manual time logging led to payroll discrepancies and inaccurate labor reporting. Work orders from ticketing systems like GUTS and BRONCO were not surfaced in a mobile-friendly form, so technicians toggled between tools to find, start, and close tasks and risked missed assignments. Neither technicians nor managers had real-time SLA visibility, and every breach carried a direct contract and client-trust cost. There was no performance feedback loop, so technicians could not see their own quality scores or work-hour breakdowns and had no way to self-correct. Managers had no single view of who was clocked in, on PTO, or near breach, which made decisions reactive, and multi-building work with geo-validated check-ins was all handled ad hoc.

What I did

I designed a single, role-aware mobile application that gives each user only what their context demands, built on the MUI (Material UI) system adapted with Astreya's brand identity so it felt like an AES product while keeping Material's proven mobile usability patterns.

The technician portal is organized around the workday: Google SSO and permissions setup, geo-validated building check-in, a task dashboard with at-a-glance SLA and urgency metrics and a three-tab structure (Assigned, Unassigned, Pending), and rich task cards carrying ticket ID, source system, deployment type, estimated level of effort, and a live SLA countdown. A persistent bottom bar keeps the active building and running task timer visible at all times. From there the technician can start and stop work with ticket-sync-aware confirmations, create manual tasks, self-assign work, move tasks to Pending or Leave with reasons, take breaks, switch buildings, and end the shift, then review a personal profile with a quality score, attendance analytics, and a work-hour breakdown by ticketing system.

The manager portal is a command center. Its dashboard surfaces attendance at a glance (technicians in and available, on PTO, tasks in progress, tasks unassigned) alongside a team view that splits into technicians and tasks, each with assignment actions and near-SLA and pending states. Managers can drill into any technician's shift for timings, closed-versus-assigned ratios, break and overtime status, and standard-versus-manual task progress, and can scan a chronological activity feed with clock-in, clock-out, and task events, filtered across region, SCA, supervisor, manager, building, and event type. Team-level analytics close the loop with SLA completion, on-time starts, and total hours logged.

Outcomes

  • Replaced manual, error-prone timekeeping with automated shift, break, and task time logging, addressing the payroll discrepancies and inaccurate labor reporting the old workflow produced.
  • Enabled proactive task prioritization through real-time SLA countdown timers and at-a-glance urgency indicators, directly reducing the risk of SLA breaches and the contract penalties they carry.
  • Gave managers a single real-time view of attendance, task pipelines, and workload, replacing fragmented check-ins by call and spreadsheet and enabling faster reassignment and better coverage planning.
  • Created a transparent performance feedback loop through quality scores with actionable recommendations, giving technicians ownership of metrics they previously could not see.
  • Formalized multi-building work through building-switch flows and geo-validated check-ins, ensuring accurate location-based reporting for enterprise clients.
  • Established a scalable custom component library on MUI that accelerates future mobile modules across Asset Mapping, Audit Tool, AV Inspections, Cycle Count, and Flex Desk.

What I learned

Designing two portals from one research base was the decision that paid off most. Splitting the technician and manager experiences let each interface serve its user's real context instead of forcing one layout to do two opposite jobs, and the shared component library kept them consistent without making them identical.

Getting the interaction friction right mattered as much as the visuals. On a field app, an accidental tap on start, stop, or end shift is expensive, so the confirmation-heavy pattern was worth the small cost in speed. The wording of those confirmations, especially around what does and does not sync back to the ticket, turned out to be as important as the flows themselves.

Investing in wireframes and a custom component library before high-fidelity design kept a large surface, 50+ screens across two roles, coherent and made the eventual handoff and future roadmap modules far cheaper to build.

The full record / 4 decisions
My role
Product UI/UX Designer
Timeline
January 2025 – December 2025
Platform
Mobile (iOS / Android, Enterprise SaaS)
Category
Enterprise Product Design (Mobile)
Status
New design, delivered

Tools Figma, FigJam, Figma Prototyping, MUI (Material UI)

Team Solo designer, collaborating with engineering and product stakeholders

Decisions

Two-portal architecture instead of one shared interface

What
Separated the technician and manager experiences into two distinct portals, each optimized for its user's context.
Alternatives
A single shared interface with role-based toggles or permissions layered over the same screens.
Why
The two roles have opposite needs. Technicians need speed and minimal cognitive load while moving through a building, and managers need density and analytical depth to oversee a whole team. Optimizing each portal separately let both do their job well instead of compromising on a shared layout.

Make the SLA countdown the anchor of every task card

What
Gave every task card a prominent live SLA countdown timer, alongside ticket ID, source system, deployment type, and estimated level of effort.
Alternatives
Showing SLA as a secondary attribute or a status badge, with cards ordered by creation time or building.
Why
Missed SLAs directly impact contract performance and client relationships. Making the countdown the anchor of the card lets a technician prioritize the right task before the clock runs out rather than discovering a breach after the fact.

Confirmation-heavy interaction pattern for state changes

What
Required explicit confirmation with contextual warnings for actions like starting work, stopping work, and ending a shift, including notes that clarify ticket-sync behavior.
Alternatives
Single-tap state changes optimized for speed, without interstitial confirmation.
Why
These actions affect billing, SLA calculations, and manager visibility, so an accidental tap carries a real operational cost. Deliberate confirmation trades a small amount of speed for protection against expensive mistakes, and the warnings set correct expectations about what the app does and does not sync back to the ticket.

Persistent bottom-bar mini-player for shift and task context

What
Designed a persistent bottom bar, modeled on music-app mini-players, that always shows the active building, running shift timer, active task, and a quick Add Task action.
Alternatives
Surfacing the running timer only on the task detail screen, requiring navigation to check status.
Why
A technician moving through a building should never have to navigate away to know what is running or how long it has been going. Borrowing the familiar mini-player pattern keeps critical shift context glanceable from anywhere in the app.

( Tags )

  • Product Design
  • UX Research
  • Interaction Design
  • Design Systems
  • Prototyping
  • iOS
  • Android
  • Mobile
  • Enterprise SaaS
  • Component Library
  • Field Service Management