Sharlene Parra
Project Details
My Role:
Timeline:
Tools:
Company
Platform:
UX/UI Designer (End-to-End)
6 months
Figma, Optimal Workshop, Miro
Xplor Technologies
FieldEdge Mobile (B2B SaaS)
Team
Virginia Morgan
Senior UX Designer - Design direction & review
Nelson Ventura
Product Manager
Charles Cubbage
Software Architect
Engineering Team
Development collaboration
A ground-up redesign of the three screens technicians rely on most:
Homepage, Navigation, and Work Order Details, to reduce friction in the field.
BACKGROUND
What FieldEdge is, and where technicians spend their day
FieldEdge by Xplor is a B2B SaaS platform that helps field-service businesses (HVAC, plumbing, electrical) manage scheduling, dispatching, invoicing, and payments all in one system.
Technicians rely on the FieldEdge mobile app to manage their daily jobs while on-site. The Work Order Details screen is the most frequently accessed view, containing customer info, job descriptions, parts, and payments.
PROBLEM
Friction across the three screens technicians use most
Technicians rely on the FieldEdge mobile app to manage their entire day on-site, but the existing app wasn't built around how they actually work, creating friction across the three screens they use most.
Homepage
Homepage
Timesheet
Homepage
01
Clock in/out was hidden,
causing missed clock-ins and payroll overhead
Navigation
01
Key features were buried,
behind a hamburger menu, adding a tap to reach anything
02
Timesheet status was unclear,
hard to read at a glance
03
Work orders took two extra taps,
to reach from the homepage
04
Job info wasn't visible,
until a full work order was opened
Work Order Details
01
Sub-tasks were locked in a carousel, forcing swipes past sections not needed
02
Unclear hierarchy, made the screen hard to scan under time pressure
03
A forced status change, was required just to view details
04
Too many taps/steps (cited 8x)
the single most common open-ended complaint
Goal:
Redesign Homepage, Navigation, and Work Order Details to reduce friction, surface critical information faster, and cut taps.
RESEARCH & DISCOVERY
Two studies and pain point discoveries
This redesign was informed by two research studies conducted with FieldEdge users:
December 2022:
An Optimal Workshop survey of 152 participants (owners, dispatchers, techs, sales reps, and office admins; 40% technicians), focused specifically on how Work Order Details was being used and what information mattered most within it
July 2024:
A follow-up Optimal Workshop survey of 242 participants across three groups, evaluating a broader set of mobile workflows including Work Order actions, customer management, and navigation-adjacent tasks
Both studies combined self-reported usefulness ratings (which WO sections and fields technicians rated "Extremely" or "Very Useful"), usage-frequency questions, and open-ended comment theming to surface recurring pain points.
Key Insights:
1. Information hierarchy
Not all information in Work Order Details carries equal weight. Fields like Property Address, Pinned Notes, and Primary Contact Info were rated most useful, while WO#, Business Unit, and Customer PO# ranked lowest, indicating an opportunity to reprioritize what's shown by default
2. Workflow flexibility
Technicians want to view and act on a work order without being forced into a specific assignment status first
3. Navigation
The carousel format for navigating WO sections was a direct source of frustration — technicians wanted to jump straight to the section they needed
4. Visibility
Clock in/out needs to be front-and-center on the homepage, not hidden
5. Information architecture
Navigation should reflect how technicians actually think about their tasks, not be organized around a generic hamburger-menu structure"
6. Access and permissions
Members repeatedly requested that secondary techs and crew members be able to access and edit a work order on their own devices (cited 7 times)
7. Efficiency
Too many clicks/steps" was the most frequently cited complaint across all open-ended feedback
RESEARCH & DISCOVERY
Single Tech Customer Journey Map
Documented the technician workflow from job assignment → on-site service → completion.
THIS TECHNICIAN
-
Sells and installs
-
Works on only single assignments
-
Is not a supervisor
-
Puts together the Invoice/Quote before completing the work
-
Has permission to: view assignments for the day, create new assignments, create invoices/quotes, and take payments
-
Slowness/crashing/reinstalling the app is a complaint seen throughout the whole journey, and is being solved in the new app.
DESIGN OBJECTIVES
What we changed in response to the research
Surface key actions on the homepage
Clocking in/out, viewing assignments directly on the homepage instead of burying them in sub-pages
Remove the carousel in Work Order Details
Remove the carousel format in Work Order Details, replacing it with cards displayed directly on the page for faster access
Reduce mandatory status-change requirements
Reduce mandatory status-change requirements that blocked technicians from simply viewing information
Replace the hamburger menu with a tab bar
Replace the hamburger menu, which hid every feature behind an extra tap, with a persistent tab bar organized around how technicians actually think about their tasks
Reprioritize Work Order Details content
Reprioritize Work Order Details content based on research surfacing high-value fields, deprioritizing low-value ones like WO#
Grant secondary techs full work order access
Grant secondary techs and crew members full access to work order information; directly addressing a recurring, frequently cited research finding
SOLUTION
Three screens, rebuilt around how technicians actually work
Chapter 01
Homepage
Fewer taps, clearer day at a glance
Clock in/out now sits front and center, removing the two extra taps it used to take to find it. Today's assigned work orders are displayed directly on the homepage, each card showing customer name, job address, scheduled time, and status, so no extra navigation is needed to see the day ahead.
Long-pressing any assignment opens a preview drawer with quick access to essential details (job info, customer contact, service history, agreements, equipment) without opening the full work order.
A redesigned timesheet section also gives technicians a clearer, more visual breakdown of hours worked.
Homepage
Work Order Preview Drawer
Timesheet
Chapter 02
Navigation
A tab bar that matches how the day actually flows
The side panel was replaced with a persistent tab bar, giving technicians one-tap access to the Screens they use most: Work Orders, Customers, Settings, and more. Icons paired with labels support quick recognition, and reduced menu depth increases discoverability for high-frequency tasks. A "More" tab currently houses Pricebook, with room to fold in additional features as they're introduced.
Chapter 02
Work Order Details
Fewer gates, faster access, shared editing
The swipe-through carousel was removed in favor of cards displayed directly on the page. Content was reprioritized based on research, surfacing what technicians said mattered most and deprioritizing rarely-used fields. Mandatory status changes are no longer required just to view details, and excessive pop-ups were reduced. Secondary techs and crew members now have full access to work order information and can add their own work summary.
OUTCOME
Fewer taps, higher confidence, a foundation to build on
TAPS TO COMPLETE
80%
reduction - Work Order Details
90%
reduction - Homepage
RATED MORE INTUITIVE
94%
of technicians - Work Order Details
98%
of technicians - Homepage
Survey of 242 participants
PREVIEW DRAWER
87%
found the new preview drawer a valuable feature
"
Stakeholders gave positive usability feedback on the redesigned navigation, noting it laid a stronger foundation for scaling future features.
REFLECTION
The hardest part of this redesign wasn't the design
This project went through countless revisions and delays. As timelines slipped, leadership pushed to rush the release to control cost, with a plan that left little room for real research or testing, and user needs were getting pushed out the door. The senior designer and I pushed back. We knew that shipping without truly understanding what technicians needed would defeat the entire point of the redesign. We asked for a meeting with managers and leadership to make that case directly: that without the time to do this right, the app was going to fail its users instead of improving their day. It worked. We got the room to do real research, test with actual technicians, and understand their frustrations firsthand. Now technicians have told us how excited they are for this release.