Project overview
Company
FMX
Timeline
April 2023 - January 2025 (21 months)
My role
Lead product designer
Team
1 product manager, 2 engineers, 1 supporting designer (early phase)
Tools
Figma/FigJam, Miro, Condens, TestFlight, Google Play Console, Google Suite, Pendo
The challenge
Field technicians needed to document work, upload photos, and resolve issues on the go, but FMX's mobile web experience wasn't optimized for mobile use. The interface prioritized parity with the desktop web app rather than mobile-specific workflows, forcing technicians to either struggle through a clunky interface or wait until the end of the day to enter documentation on desktop.
This presented both a user experience problem as well as a business-critical issue. Competitors like MaintainX already had native mobile apps, and FMX was losing ground. In 2023 alone, the lack of a mobile app resulted in $440K in lost opportunity ARR and $81K in churned ARR. Prospects simply wouldn't consider FMX without a native mobile solution.
Understanding the problem
To understand the scope of the problem and inform our design direction, I conducted multi-phase research combining user interviews, data analysis, and stakeholder input.
Research & discovery
User interviews
I recruited 20 technicians and administrators through previous research participants and beta testing volunteers. The mobile web experience was creating significant friction: buttons were too small, screens were cluttered, making it difficult to read or navigate efficiently.
Technicians needed to complete critical tasks on the go:
View assigned work
Log work orders
Upload photos
Document responses
Resolve work orders
Instead, they were either waiting until the end of the day to enter documentation on desktop or struggling through the clunky mobile web interface.
Data analysis
The analytics confirmed what users told us: only 14.75% of usage was on mobile, compared to 84.5% on desktop. We took these findings as validation that the mobile experience was so poor that users were actively avoiding it.
Support tickets revealed another pain point: users were opening "100's of tabs in their mobile browsers" using Safari shortcuts, getting confused and losing their place in FMX. Users also complained about the lack of offline access and push notifications.
Stakeholder input
The business impact was substantial. In 2023 alone, the lack of a mobile app resulted in $440K in lost opportunity ARR and $81K in churned ARR—over half a million dollars in revenue at risk.
Customer feedback through our product team consistently requested:
Push notifications to stay signed in and receive alerts
Ability to submit and update tickets in real-time with photos
Mobile-optimized interface (not desktop shrunk down)
Better mobile access without the browser tab workaround
One prospect summed it up:
Key insights
From our 20 user interviews with field technicians, three critical patterns emerged that pointed to why the mobile web experience was failing users:
Speed and accessibility matter in the field
Technicians work in contexts where they need to document and resolve issues immediately, not hours later when they return to a desk. The mobile web's poor experience was forcing them to delay work or create workarounds.
Mobile web design patterns don't translate
The interface prioritized parity with desktop rather than mobile-specific needs. Small buttons, cluttered screens, and desktop-optimized layouts made the experience unusable on small screens.
Documentation delays created operational inefficiencies
When technicians couldn't log work in real-time, it created a ripple effect: delayed documentation meant slower response times, incomplete records, and reduced visibility for facility managers. The lack of a mobile solution impacted both individual productivity and operational efficiency.
We were losing to competitors
Competitors like MaintainX already had native mobile apps. Prospects expected mobile functionality as table stakes, and without it, we couldn't compete for deals.
Problem statement
Field technicians need a fast, mobile-optimized way to manage work orders on the go—viewing assignments, documenting work, and uploading photos in real-time—because the current mobile web experience creates friction that delays their work, causes information to be lost, and forces them to wait until they're back at a desk to complete critical tasks.
Constraints & considerations
This project came with significant challenges that shaped our approach:
Technical constraints
Our small engineering team was new to mobile development, learning iOS and Android simultaneously
Existing APIs were built for the desktop web app and not optimized for mobile, requiring significant backend work
We needed to ship for both iOS and Android at the same time to avoid alienating users
Offline functionality—a critical user need—was technically complex and would need to be addressed in future phases
Business constraints
High visibility and pressure to ship quickly due to the $521K revenue impact
Need to balance feature parity with mobile-specific optimization
Limited resources for a 0→1 project
User constraints
Wide range of technical literacy among users
Different workflows across customer types (schools, hospitals, commercial buildings)
Need to work in various field conditions (poor connectivity, wearing gloves, bright sunlight)
Design process
Ideation & exploration
As a first step in ideating, a supporting designer and I facilitated ideation workshops using rapid sketching exercises like Crazy 8's to explore navigation patterns, quick actions, and information hierarchy.
Early sketches exploring navigation patterns and quick action placement
Several navigation patterns emerged:bottom tabs, hamburger menus, and various quick action placements. We chose a bottom tab bar for global navigation combined with a hamburger menu for secondary actions, ensuring primary navigation was always accessible. For work order display, we moved away from the desktop's list and calendar views, designing a card-based layout optimized for mobile screens that surfaced critical information at a glance.
Defining user flows
Working closely with the product manager, I mapped out the information architecture and key task flows. We prioritized two must-have workflows:
Viewing assigned work orders
Completing work orders (logging responses, uploading photos, resolving)
Creating new work requests was identified for a future iteration, allowing us to focus on the core workflows technicians needed most.
Wireframing & concept testing
With flows defined, I created low-fidelity wireframes to explore two critical questions: what widgets should technicians have immediate access to, and how should we organize content across tabs?
User testing revealed clear feedback: technicians wanted quick access to high-priority and overdue work. This insight shaped our home screen design, ensuring the most urgent tasks were always front and center.
High-fidelity design & usability testing
Once the wireframes were validated, I built high-fidelity prototypes for usability testing. I tested four key scenarios:
Finding a specific work request using shortcuts and filters
Adding a response to a work request
Resolving a completed work request
Looking up equipment details
The testing revealed that users could complete core tasks successfully, but the floating action button (FAB) was causing confusion. The FMX logo wasn't recognizable as a menu button, and the unlabeled icons in the action menu left users guessing what each button did.
Design iterations
Based on usability testing feedback, I made critical improvements to the floating action menu:
Initial design challenges
During usability testing, users struggled to understand that the FMX logo was a tappable menu. Once opened, icon-only buttons left users guessing what each action did.
Changes made:
Replaced the FMX logo with a universally recognized hamburger icon
Added clear text labels to every menu action
Transitioned from floating buttons to a bottom sheet as the action list grew
Impact:
These changes eliminated confusion and made critical actions—like adding responses and uploading photos—immediately accessible, even for users working in challenging field conditions.
Before usability testing
After usability testing
Iteration based on usability testing: added recognizable menu icon (top row) and labeled actions (bottom row)
The solution
The FMX mobile app transformed how field technicians access and complete work on the go. Designed specifically for mobile screens rather than shrinking the desktop experience, the app prioritized essential workflows: viewing assigned work and completing tasks in the field.
Note: The designs shown reflect improvements made after the initial launch based on real-world usage and feedback.
Home screen: Quick access to priority work
The home screen surfaces urgent tasks through two widgets: Recently Viewed and My Shortcuts. Recently Viewed allows technicians to quickly return to in-progress work, while My Shortcuts provides one-tap access to filtered lists based on urgency and proximity—Recent, Nearby, Overdue, and On Hold.
Home screen with Recently Viewed work orders and My Shortcuts widgets
To-Do List: Scannable cards optimized for mobile
I designed a card-based layout specifically for mobile screens, moving away from the desktop's list and calendar views. Each card displays essential information: request name, ID, priority, building, location, due date, and status. The distance indicator was added post-launch to help technicians prioritize work by proximity.
A swipe-left interaction reveals quick actions—Respond and Resolve—allowing technicians to act on work orders directly from the list without opening the full detail view.
Work order details: Tabbed organization and quick actions
The detail screen uses tabs—Request, Attachments, and Updates—to organize information without endless scrolling. The floating action button (FAB) provides access to four core actions: Execute, Respond, Add photo, and Create new. Based on usability testing, I replaced the FMX logo with a recognizable menu icon and added labels to each action, significantly improving discoverability.
Work order detail screen with labeled FAB menu for quick actions
Updates cards: Activity timeline with expandable details
The Updates tab presents a chronological timeline of work order activity. Each update is a card that can be tapped to reveal additional details—like the full list of assigned users. This progressive disclosure keeps the view clean while ensuring all information is accessible.
Updates timeline showing collapsed cards (left) and expanded card revealing assignment details (right)
Validation & testing
Alpha testing (April 2024)
To validate the MVP before launching to customers, we conducted internal alpha testing with 30 FMX team members, including 5 participants in an intensive diary study. We used multiple research methods—Pendo analytics, diary studies, interviews, and surveys—to gather comprehensive feedback on usability and functionality.
Key findings
Alpha testing revealed both critical bugs and valuable usability insights. The most urgent issues were permission errors preventing users from saving responses and resolving requests, image upload failures, and incorrect worker time calculations—all blocking core technician workflows.
Beyond bugs, we discovered important usability problems:
Users couldn't exit action screens (response, resolve) without closing the entire app
The hamburger icon for the floating action menu wasn't intuitive—users expected a "+" icon
Dark mode had readability issues with black text on dark backgrounds
"Nearby" shortcut label was unclear to users
What users loved
Despite the issues, alpha testers were enthusiastic about the core experience. Home screen shortcuts were described as "convenient" and "efficient," the To Do List became their "one-stop shop" for work, and many appreciated that the card layout was actually clearer than the desktop web version.
Actions taken before beta
We prioritized fixes in this order:
Critical bugs - Resolved permission errors, fixed image uploads, corrected worker time calculations, fixed PM execution failures
Usability improvements - Added back navigation from action screens, improved dark mode contrast, refined "Nearby" labeling, enhanced markdown rendering
High-priority features - Added ability to edit responses/requests, enabled atta
Features like Start/Stop work tracking would be addressed during beta based on usage patterns.
Beta testing (July 2024-January 2025)
We expanded testing to 208 real customers recruited through a Pendo guide on their organization websites. This shift from internal testers to actual customers provided critical insights into real-world usage patterns and needs we hadn't anticipated.
Key findings
Beta testing revealed a clear divide in user satisfaction. Technicians loved the app—one customer reported that "our engineers loved it, it was easier than using the website to them." However, administrators and managers were frustrated. The app was optimized for technicians completing assigned work, but admins needed to create, assign, and view all tickets—not just those assigned to them.
The most requested feature by far was the ability to create new work orders. As one user explained, "This would be a great tool to have when getting stopped in the hall and being made aware of a problem." Other frequent requests included push notifications for assignments, calendar views for scheduling, and more robust filtering options.
We also discovered usability issues that didn't surface with internal testing:
Four users didn't understand what "hostname" meant during login, requiring additional explanation
The keyboard blocked text fields when users typed responses, preventing them from seeing what they wrote
Resolve and respond screens were missing clear save/cancel buttons
Users with multiple modules (maintenance and technology) couldn't switch between them
What users loved
Despite the feature gaps, users were enthusiastic about the core experience. The UI was described as "intuitive and easy to read" and "so much better than trying to view the web page on my phone." The Nearby feature was praised as "a neat feature distinct from the web browser experience."
Actions taken before beta
Based on this feedback, we made significant additions:
Created new request functionality - Addressed the #1 most-requested feature
Start/stop work tracking- Enabled time tracking for technicians
Distance feature on cards - Added to help technicians prioritize nearby work
Fixed keyboard blocking issue - Improved text field scrolling
Added save/cancel buttons - Clarified action completion
Refined QR code scanner- Now handles full URLs, not just equipment IDs
Features like Start/Stop work tracking would be addressed during beta based on usage patterns.
Deferred for post-launch