WORK ORDER #4471 · INSTALLATION IN PROGRESS

Same mobile browser. A completely different tool.

A purpose-built mobile browser app that replaced a slow, third-party browser tool for ISP field technicians, turning multi-step installations into a guided flow, from the doorstep to a verified connection.

Role
Product Designer & Business Analyst
Timeline
2023 – Ongoing
Platform
Mobile browser app (responsive web)
Users
Field Technicians & Managers
Business Context

One order, three systems, and a technician stuck in a browser tab.

This project was built for a large US Internet Service Provider. When a customer places a residential or small-business order, it has to travel through several systems before a technician ever knocks on a door.

01 · Order

Customer app

Customer places a residential or small business internet order.

→
02 · Routing

Microsoft Dynamics

Order lands in Dynamics, the system of record for bookings.

→
03 · Assignment

Technician Manager

Manager assigns the job by service area and technician availability.

→
04 · This project

Field Technician App

Technician receives, completes, and closes the job, on site.

The old version of that last step was a third-party web app, opened inside a mobile browser. It worked, technically. In practice, it was slow, hard to tap through in the field, and quietly created rework for everyone downstream.

The new technician tool is still a mobile browser app: no app-store install, no device provisioning overhead for IT. What changed is everything about how it's built: purpose-designed for the job instead of adapted from a desktop tool, and optimized for one-handed use in the field.

The Problem

Ten small frictions add up to one bad day in the field.

Pulled from requirement-gathering sessions with technicians and managers: the recurring complaints behind the redesign.

01

Browser performance was slow, especially on weaker in-field signal.

02

Serial numbers and MAC addresses were entered manually and often wrong.

03

No fast way to see the day's upcoming appointments at a glance.

04

Jobs couldn't be transferred to a nearby tech with open capacity.

05

Installations required too many manual, repeatable steps.

06

Customer info was hard to pull up while standing on-site.

07

Manager notes on a booking were easy to miss or never seen.

08

No real-time help: a hard issue meant calling around, not chatting in-app.

09

Install time and customer experience varied tech to tech.

Who We Designed For

Two roles, one shared job: closing the ticket right.

Every screen had to work for the person standing at a customer's router, and the person managing thirty of them at once.

Field Technician
Technician Manager
FT
Primary user · mobile-first

Handles installs and repairs, one appointment at a time.

On the road most of the day, moving between jobs against an SLA clock. Needs information fast, hands mostly full, sometimes on a ladder or in a crawl space.

Responsible for
  • New installations & repair appointments
  • Device activation and provisioning
  • Network health validation
  • Completing jobs within SLA
Needs from the app
  • Today's bookings at a glance
  • Reliable device scanning, not manual entry
  • Customer & job context without digging
  • A way to get unstuck without leaving the flow
TM
Super Admin · oversight

Owns a service area and the team assigned to it.

Works primarily in Microsoft Dynamics, but needs visibility into the Technician App to keep bookings moving and unblock technicians in real time.

Responsible for
  • Managing technician teams by geography
  • Assigning and reassigning bookings
  • Monitoring technician progress
  • Leaving notes for technicians on a job
Needs from the app
  • Confidence notes actually get seen
  • Clear status per booking, no guessing
  • A record that stays in sync with Dynamics
  • An easy way to move a job between technicians
Information Architecture

Structured around the shape of a job, not a feature list.

The real app menu: six top-level areas, each covering a distinct part of a technician's day, from the actual job in hand to the tools and recognition around it.

Activate
Manage booking
Manage connection point
Activate device
My Work
Facility actionsAudit & maintenance work on installed equipment
Subscriber actionsChange port, swap device, update ports/switches, reboot & restart
My Tools
Address & location info
Facility maps
External appsForms & training materials
Latest CXP News
What's new in the app
Feature enhancements
Maintenance notices
Support Chat
Live chat with network specialistsFor when a technician is stuck on-site
Ziply Rewards
Points from completed bookingsAwarded by the manager once the day's jobs are closed out
Key Interaction

The installation flow, step by step.

This is the core of the app: the sequence a technician runs on every install. Click a step to walk through it the way a technician would.

BOOKING #A-2291 · 118 Marlowe Ave
IN PROGRESS
1Scan ONT device
2Scan Residential Gateway
3Capture serial & MAC
4Activate service
5Verify provisioning
6Network health check
High-Fidelity Screens

The actual high-fidelity screens behind the flow.

The finished UI for the home menu, booking management, device activation, and facility lookup: the real screens technicians use in the field.

Home & App Menu

Home · app menu
Home · App menu
App menu · role view
App menu · Role view
App menu · job list entry
App menu · Job list entry

Manage Booking

Booking list
Booking list
Booking detail
Booking detail
Customer & product info
Customer & product info
Manager notes
Manager notes
Navigate to site
Navigate to site

Device Activation

Scan target · ONT label
Scan target · ONT label
Scan device
Scan device
Serial & MAC capture
Serial & MAC capture
Activate service
Activate service
Provisioning status
Provisioning status
Network health check
Network health check
Speed & connectivity
Speed & connectivity
Health · issue detected
Health · Issue detected
Contextual fix suggestion
Contextual fix suggestion
Specialist chat
Specialist chat
Job notes log
Job notes log
Close job
Close job
Job complete
Job complete

Facility Maps

Nearby facility map · search
Nearby facility map · Search
Facility map · central office coverage
Facility map · Central office coverage
Design System

Built for gloves, glare, and glances.

High contrast, large touch targets, and a status language that reads clearly whether a technician is checking their phone in a dim basement or bright sun.

Working within an existing system: the company already had brand and UI guidelines in place, so my job was adapting them for a field-technician context rather than inventing new patterns from scratch. I built the components on top of Ionic's component library to keep them implementation-ready, since engineering builds the final UI in Angular.

Color
Base / #0B0E14
Signal / #4CE0D2
In Progress / #FFB020
Complete / #6EE07C
Alert / #FF5C5C
Type
Display · Space Grotesk
Booking #A-2291
Body · Inter
Installation confirmed at 118 Marlowe Ave.
Data / Mono · JetBrains Mono
SN: 8827-QX41-NA02
Components
● Scheduled
● In Progress
● Complete
MAC · 00:1B:44:11:3A:B7
Edge Cases

The field doesn't run on the happy path.

Scan fails or device is unreadable

Fallback to manual entry with format validation, so a damaged label doesn't stall the whole job.

No signal at the install site

Steps queue locally and sync once connectivity returns, so nothing has to be redone.

Job needs to move to another technician

Transfer flow shows nearby technicians with open capacity, keeping the manager's notes attached.

Health check fails after activation

App surfaces a contextual next step instead of a raw error, before escalating to specialist chat.

Design Iterations & Engineering Collaboration

Simpler shipped faster, and held up better in the field.

Early concepts leaned on richer micro-interactions during the scan and activation steps. Working with engineering, we scaled that back.

Early concept
  • Animated device silhouette during scanning
  • Multi-stage transition between each activation step
  • Heavier visual feedback on every micro-state
Shipped
  • Simple scan-line and status text, lighter to render
  • One consistent transition pattern across all steps
  • Feedback reserved for states that need attention

"I traded a few polish points for a build that performed reliably on older field devices, shipped faster, and stayed easy to maintain."

Framing used with engineering during trade-off discussions
Challenges

What made this harder than it looks.

A few of the constraints I was actually designing against, not just the clean version that makes it into a final flow.

Requirements kept shifting

The client wasn't fully certain of requirements upfront, so the flow went through multiple rounds of iteration as expectations sharpened, not one clean pass from wireframe to final UI.

Two very different users, one app

Balancing a fast, one-handed field experience for technicians against the oversight managers needed, without splitting into two disconnected products.

Designing inside existing guidelines

The company's brand and component guidelines were already set. That meant less room for novel patterns and more focus on adapting them well for a field context.

A system of record I didn't control

Bookings lived in Microsoft Dynamics, so every flow had to respect data and status coming from a system outside the team's control.

Field conditions, not office conditions

Gloves, glare, patchy signal, and one free hand meant usability rules that never show up in a typical desk-based usability test.

Feasibility inside Angular's constraints

Some interactions had to be simplified once we checked what was realistically buildable in the engineering team's Angular implementation and timeline.

Project Timeline

A brand-new mobile browser UX in 2023, still growing today.

This wasn't a one-and-done redesign. It started as a from-scratch mobile browser experience and has stayed in active development ever since, adding device coverage as the ISP's product line grew.

2023 · Foundation

A brand-new mobile browser UX, built from scratch

Replaced the old third-party browser tool entirely: new information architecture, a guided booking-to-activation flow, and a UI actually designed for a technician's hands, not adapted from a desktop admin panel.

Booking management
ONT & RG activation
Network health checks
Specialist chat
2023 – 2024 · First expansion

Coverage beyond the core install

Once the core flow proved out in the field, the same patterns extended to more of the technician's day-to-day work.

Wi-Fi extenders
Voice services
Additional ports
2024 – 2025 · Advanced devices

Supporting more complex ISP hardware

New device types meant new edge cases: more branching activation flows, without losing the simplicity technicians relied on.

Network switches
Advanced activation flows
More complex ISP devices
Ongoing

Still shipping

The platform continues to grow: new device types, new workflows, and new features are still being designed and added as the ISP's product catalog evolves.

New device support
New feature areas
Continuous iteration
Business Impact

What replacing the browser tool changed.

Directional outcomes reported by technicians and managers after rollout. Drop in real numbers from the project if available.

↓ manual steps
Fewer taps and re-entries per installation, from device scan through activation.
PLACEHOLDER: insert measured %
↑ data accuracy
Serial numbers and MAC addresses captured by scan instead of manual entry.
PLACEHOLDER: insert measured %
↓ time to resolve
In-app specialist chat replaced off-app calls for hard issues.
PLACEHOLDER: insert measured %
Real-World Usage

Live production results, not a lab test.

Pulled directly from Microsoft Clarity, tracking the technician app in production: real sessions, real recordings, real friction points.

Note on the numbers below: these screenshots were captured while sitting in the IST timezone. The field technicians using this app work in PST and MST, hours behind IST, so at the moment of capture, most of their shift hadn't started yet. That's why "live users" reads low here; session totals and event counts for the full day are unaffected.

Clarity dashboard overview: sessions, pages per session, scroll depth, active time, insights
Dashboard overview · Sessions, engagement, rage & dead clicks
Smart events: checkout, order success, contact us, submit form, and more
Smart events across the booking & activation flow
Browser breakdown: MobileSafari, ChromeMobile, Chrome, Edge
Browser mix · Mobile-first usage confirmed
Session recording of a technician using the app, with AI-generated session summary
Session recording · Real technician walkthrough, entry to exit
Heatmap of taps on the manage-booking screen
Tap heatmap · Manage-booking screen, ranked by clicks
Learnings & Reflection

What this project taught me about designing for the field.

Talk to the people holding the phone in one hand

Requirement sessions with technicians surfaced constraints (gloves, glare, one free hand) that no stakeholder deck would have.

Constraint is a design tool, not a compromise

Cutting the micro-interactions with engineering didn't weaken the app. It made the core flow faster and more dependable, which mattered more in the field.