Year
2024
My Role
UI/UX Designer
Responsibility
Backend UI Design / Form UX + UI
Background
From Paper to Digital
Shin-Nan Gas handles meter installation, removal, periodic pipeline inspections, and on-site service work. Operations were previously managed through paper-based workflows, making it difficult to track case status and causing field technicians' on-site documents to be frequently lost or delayed. The goal of this project was to design a case management backend and convert paper forms used by technicians and customers into online forms.
System Overview
Backend + forms, serving different users
Backend Management System (Internal Staff)
A unified interface to manage cases across all three business lines — from intake and review to dispatch and closure.
Online Forms (Technicians & Customers)
Technicians scan a QR code on-site to fill in work reports; customers submit meter installation or removal requests via an online form.
Three Business Lines
The system manages three business lines with different triggers and workflows simultaneously.
Meter Installation / Removal
Customers apply online. After review and MIS filing, an order is issued and a technician dispatched.
Service Work Order & Pre-Supply Inspection
Entered after Line A order issued. After staff review and dispatch, the technician brings a printed QR code to the customer's home to scan and fill in the work report on-site.
Periodic Inspection
Company-initiated. Technicians batch-assigned, scan QR on-site, two-stage review to close.
Operations per Case Stage
10–11 stages across each business line
Available actions differ entirely depending on the current stage, and some actions are irreversible once taken.
The system only surfaces actions permitted at the current stage. The most critical next step is highlighted in a distinct color, secondary actions are tucked into a dropdown.
Irreversible actions require a confirmation dialog with copy that clearly explains the consequence — not just "Are you sure?"
Filter Interface
Consolidated into a filter button, clean and hierarchical
Category, status, application type, and date range are consolidated into a right-side Filter Panel. It stays hidden until needed, keeping the list view uncluttered. When opened, filters are presented as vertical selects in a clear top-down hierarchy.
Selecting a category automatically updates the status options to only show relevant stages, so the two filters are dependent but stay intuitive.
Online Form Design
Converting paper forms into mobile interactive forms
On the surface it looks like a format conversion. In practice, it meant solving interaction problems that simply don't exist on paper.