Johnny Chan logo

Photo Taking App 2.0 — Field Force Mobile UI/UX

Offline-capable mobile UI/UX for field crews—log daily workflows, capture structured photo evidence, and sync into enterprise systems without manual back-office sorting.

Photo Taking App 2.0 — Field Force Mobile UI/UX
Industry
Enterprise operations & field automation
Role
UI/UX Designer
Tools
Figma
Duration
1 week
OVERVIEW

Photo Taking App 2.0 is a high-utility, offline-capable mobile app for distributed field workers who need to log daily workflows and capture structured visual evidence on site—not back at a desk.

I designed the experience for three audiences: field operations crews doing the work, site supervisors verifying teams and tasks, and centralized compliance auditors who need clean, traceable records. The product replaces manual logs and scattered phone galleries with an automated upload path into a rigid enterprise ecosystem—fewer gaps, fewer delays, less rework for management.

CONTEXT & GOALS

The problem

Large-scale operations depend on regulatory compliance, clear audit trails, and accurate operational data. Proof-of-work used to mean handwritten notes and photos dumped into camera rolls—then someone in the office had to sort, match, and re-key everything. That created bottlenecks, missing data, and reporting that arrived too late to act on.

STRATEGIC GOALS

Under 60 seconds to start

Shrink shift setup, crew verification, and task selection so crews can begin work in under a minute—not after a long menu hunt.

Context baked into every photo

Bind each capture to task, location, and team at the moment of shooting so nothing arrives at HQ as an anonymous file.

Field-to-database integrity

Bridge unpredictable outdoor conditions and a strict central database with secure capture, local queueing, and reliable sync when signal returns.

DESIGN FOCUS

Built for frontline conditions

Field personnel work in sun, rain, and gloves—not in a quiet office. The interface favors high contrast, muscle-memory navigation, and utility over decoration. Three design pillars carry that through the whole system.

High-utility selection funnel

A progressive, zero-typing path: sign in → macro category (e.g. environmental maintenance) → micro task (e.g. infrastructure cleansing) → action. Large touch targets (48dp minimum) support accurate taps on the move.

Dynamic crew management

Daily crew changes are normal. Supervisors adjust rosters with single-tap add/remove and capture a mandatory, timestamped team photo so attendance is verified before work starts.

Smart evidence capture

A purpose-built camera overlays task ID, geo-coordinates, and local time on the viewfinder. Offline-first queueing stores media on device and auto-syncs when connectivity returns.

KEY SCREENS

Home dashboard and upload history

Home puts today’s work first: upcoming tasks with location, shift, and team context, plus a running upload record so crews see what has synced, what is still in progress, and what failed—with a clear path to retry.

Field force mobile app home screen with upcoming tasks and upload record list
Home—schedule at a glance and upload status in one place.
CLEANSING WORKFLOW

Micro task selection in the field

Cleansing sits under the environmental maintenance path as a defined micro task—so crews follow the right procedure and capture the right evidence without mixing workflows or free-text labels.

Infrastructure cleansing workflow in enterprise field operations mobile app
Cleansing—structured micro task inside the selection funnel.
UPLOAD & STATUS

Transparent sync states

Each upload row shows reference ID, timestamp, and status: complete, in process, or fail. Failures stay visible with retry—so crews and auditors share the same truth at end of shift.

Upload record list showing complete, in process, and failed photo sync states
Upload record—sync state crews and auditors can trust.
ACCESS

Authentication and enterprise entry

Login anchors the app in the management system brand before crews enter the funnel—credentials, primary sign-in, and layouts sized for standard mobile widths so the first screen feels official, not like a side tool.

Enterprise management system login screen for field operations mobile app
Login—secure entry into the field workflow.
OUTCOME

Impact for operations and compliance

Photos are categorized at capture, so back-office teams no longer sort galleries by hand. Every asset ties to location, crew roster, and task category—giving management an audit trail they can defend without reconstruction.

The interface is deliberately mistake-proof: less training time, faster compliance on the ground, and alignment between what crews do in the field and what leadership sees in the system. Full flows and components are documented in Figma for engineering handoff.