Skip to content

( Astreya / January 2025 – December 2025 )

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.

My role
Product UI/UX Designer
Timeline
January 2025 – December 2025
Category
Enterprise Product Design (Mobile)
Status
New design, delivered

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

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

  • Consolidated 3+ disconnected tools into one mobile interface, eliminating the context-switching technicians did to find, start, and close tasks.
  • 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.

( Tags )

  • Enterprise SaaS
  • Mobile
  • iOS
  • Android
  • Product Design
  • UX Design
  • UX Research
  • FigJam
  • Design Systems
  • MUI
  • Material UI
  • Component Library
  • Field Service Management
  • FSM
  • SLA Tracking
  • Shift Management
  • Task Management
  • Workforce Operations
  • Geo-Fencing
  • Performance Analytics
  • Activity Feeds
  • Interaction Design
  • Prototyping
  • Enterprise Workflows
  • Managed IT Services
  • Astreya
  • AES