ERP · B2B · 2017–2018
Simplicity –– key: Enhancing vehicle inspection station ERP performance
Auto-filling 12 of 15 vehicle fields from the VIN cut a diagnostic card from ten minutes to two.
- Measured10 min → ~2 minto fill a diagnostic card, in 80% of cases
- Measured13 → 2erroneous card reissues a month
- Volume of work12 of 15vehicle fields filled automatically
- Role
- UI/UX Designer
- Company
- ERP for vehicle inspection stations, via Spiks LLC
- Timeline
- 2017–2018
- Team
- CTO, 3 front-end developers, back-end developer, me
- Platform
- Web, desktop
- Methods & tools
- Task Success Rate and Task Time metrics, UI kit, real-time validation, F-pattern layout analysis
Outcome
- Measured10 min → ~2 min to fill a diagnostic card, in 80% of cases
- Measured13 → 2 erroneous card reissues a month
- Volume of work12 of 15 vehicle fields filled automatically
Measured outcome in productionQualitative context: process, volume, lab or qualitativeUnder NDA under NDA
60-second brief
The problem
Filling a diagnostic card took an inspector about ten minutes per car. With one inspector the queue waits; with two, one of them idles while the other types. The legacy form mixed vehicle and owner fields in a matrix, looked different in every part of the system, and 13 cards a month were reissued because of errors.
What I did
- Audited the legacy UI, found the bottlenecks, built a UI kit close enough to the old look that existing users would not get lost.
- Chose Task Success Rate and Task Time as the metrics, since funnel metrics do not apply to an internal tool.
- Redesigned the form around what can be filled automatically before the inspector touches a key.
Decisions that mattered
- Four blocks instead of a matrix.
Vehicle, ownership document, presenter, inspection result, laid out in an F-pattern with per-field maximum widths.
The new form: four blocks in an F-pattern - Auto-fill from the VIN and two databases.
Brand, model, year and check digit from the VIN; category, weights, fuel and brakes from a proprietary base; plate and last year's data from the traffic police. 12 of 15 vehicle fields, 6 of 6 document fields, and the presenter in 71% of cases.
What a modern VIN encodes - Field states you can read at a glance.
Grey untouched, blue active, check for user-filled, marine mark for auto-filled with a note where the data came from, red with a message for errors; validation in real time, autosave on every change.
Field states: error, filled by the user, active - Keep the red asterisk.
Experienced users already knew it and the legacy form used it; the change went into explanatory notes instead.
Auto-filled fields say where the data came from
Working with engineering and product
- Three front-end developers ported the product to React so the form could react to input; the back-end moved to Node.js and got 85% faster.
- I specified the validation rules: the VIN alphabet without I, O and Q, the check digit, the law-based expiry logic behind the AUTO button.
Impact
- Measured10 min → ~2 min to fill a diagnostic card, in 80% of cases
- Measured13 → 2 erroneous card reissues a month
- Volume of work12 of 15 vehicle fields filled automatically
Two inspectors can now fill cards and inspect cars in parallel, doubling the station's throughput.
What I took awayThe best field is the one the user never has to type; design the data flow first, the form second.