Johnny Chan logo

Fieldwork Inspection App — Mobile UI/UX

Mobile UI/UX for an enterprise field inspection app—digitize contractor maintenance checks with a scannable dashboard, unified schedule, geofenced site maps, and structured audit records.

Industry
Enterprise field inspection / Infrastructure
Role
UI/UX Designer
Tools
Figma
Duration
2 weeks
OVERVIEW

Fieldwork Inspection App is a specialized enterprise mobile application designed to digitize and streamline the field inspection process for maintenance jobs completed by external contractors.

The product replaces a fragmented, paper-heavy workflow with a centralized digital ecosystem—accelerating job verification and reducing administrative overhead for field inspectors working across regulated inspection types in Hong Kong.

OBJECTIVE

Transition from paper to a digital ecosystem

Transition a fragmented, paper-heavy workflow into a centralized digital ecosystem, accelerating job verification and reducing administrative overhead for field inspectors.

PAIN POINTS & PROBLEMS

Critical gaps in the legacy workflow

Through contextual inquiries with field inspectors, we identified critical gaps in how maintenance checks were planned, located, and documented on site:

Fragmented information & high cognitive load

Inspectors juggled printed engineering specifications, physical maps, and separate cameras while on-site. This disconnected setup made it difficult to access historical checking reports or precise job descriptions instantly.

Unstructured schedule management

Field staff handle multiple, distinctly regulated types of checks every day—routine inspections, ad-hoc site checks, and surprise audits. Without a unified schedule, logistics became inefficient and inspection windows were missed.

Inaccurate site localization

Finding the exact boundary of a road maintenance patch—specific lane markings or drainage grates—on standard commercial maps was highly error-prone, leading to inspectors auditing the wrong sections of the highway.

SOLUTIONS & PROCESS

Reducing cognitive load outdoors

The design system was built around two core principles: reducing field-testing cognitive load and optimizing for rugged, single-handed outdoor mobile usage.

High-scannability dashboard architecture

The home screen grounds the inspector with a high-contrast, large-typography daily overview. Tasks split into Upcoming Inspections and Upcoming Checking; cards show real-world reference imagery and prominent metadata tags to minimize identification errors before leaving the vehicle.

Color-coded task scheduling system

The calendar uses subtle multi-status dot indicators so inspectors see the mix of audits, site checks, and inspections booked for any day. Tapping a date pulls up an expandable sheet with the day's timeline—rapid switching between planning and execution.

Structured detail view & geospatial integration

Individual inspection profiles use segmented tab navigation and collapsible accordions to cut vertical scroll on active roads. A custom mini-map highlights the exact polygon boundary of contract work—eliminating spatial ambiguity on site.

IMPACT

Measurable outcomes for inspectors and admin

Operational efficiency

The structured, tab-based layout and automated data pre-population minimized field data entry time by an estimated 35%, keeping eyes on the environment rather than the screen.

Elimination of audit mismatches

Localized shapefile polygon maps directly resolved the issue of inspectors auditing incorrect maintenance coordinates.

Improved compliance tracking

Consolidating standard checks, surprise checks, and audit trails into a single digital node ensured full compliance visibility for administrative review.

OUTCOME

Production-ready inspection blueprint

The final high-fidelity interactive prototype delivered a production-ready design blueprint. The solution successfully consolidated multiple legacy tools—standalone digital cameras, paper clipboards, and separate mapping units—into a single cohesive digital workflow optimized for unpredictable outdoor field conditions.

Final UI — full mobile system: home dashboard, calendar scheduling, inspection detail, audit check, and geospatial map.
REFLECTION & CHALLENGE

Designing for diverse field demographics

A prominent challenge was ensuring the app remained accessible to senior field inspectors who are less accustomed to complex smartphone interfaces. This constraint directly drove the decision to use high-contrast color tags, large font scaling, and ultra-simplified tap targets.

Government inspection documentation naturally carries deep, complex datasets. Navigating the balance between legal, rigorous data completeness and a clean, highly functional mobile UI required iterative testing—eventually solved through the accordion UI architecture and segmented tab navigation.