Company
Metier (Thailand) Co,. Ltd.
Date
Jun – Jul 2026
Type
Application
Role
UX/UI Designer
Team
Product Manager, Developer, UX/UI Designer
Industry
Agency
Tools
Figma, Figjam, Discord, Claube, Google Workspace
Deliverables
Wireframes · Style Guide · User Flows
Overview
Driver Application is an internal mobile app for TTC Motor's driver fleet — designed to manage car pickup and delivery jobs end-to-end. The app covers authentication, job management, status updates, and photo-based job confirmation, with direct integration to TTC Motor's ERP system (K.James).
The project scope spans 3 modules: Authentication, Homepage, and User Profile — and was designed to work as a consistent part of the larger TTC ecosystem alongside TTC Application and CMS.
My Role
Received initial rough requirements from PO (gathered from client)
Translated requirements into full UI covering all states and edge cases
Produced flow documentation with annotations for dev handoff
Presented design to PO and dev team for feasibility review
Iterated through 2–3 rounds of feedback until all parties aligned
Design Strategy
Rather than designing from scratch, UI components were built by reusing and extending existing elements from TTC Application wherever possible. New components were created only when no existing pattern could serve the need.
This approach had two direct outcomes:
Reduced implementation risk — dev team worked with patterns already in the codebase
Visual consistency — Driver App and TTC App share the same design language, reducing onboarding friction for both dev and end users
Key Features Designed
1. Authentication — 3 Flows, 18+ States
Sign-in: Standard login with error states
Create password: First-time setup with real-time validation rules (length, uppercase, lowercase, number, special character)
Forgot password: Full reset flow including transactional email template with deep link back to the app
Design decision: Password reset uses deep linking — tapping the email link opens the app directly at the "Set New Password" screen. No browser redirect, no copy-paste. Critical for a driver using the app on mobile in the field.
2. Homepage — Job Management System
Drivers manage two job types: รับรถยนต์ (Car Pickup) and ส่งรถยนต์ (Car Delivery), assigned via ERP K.James.
4 tabs: Today / Upcoming / Completed / Cancelled
Job detail — 5 status states: ⚪️ Assigned → 🔵 En Route → 🟡 Picked Up → 🟢 Completed / 🔴 Cancelled
Design decision: Status is communicated visually via color indicators first, text second — designed for drivers who glance at the screen while on the move.
Upload image to confirm job: Before marking a job complete, drivers capture photo evidence. Flow includes: camera / gallery / preview / uploaded states, with an exit confirmation modal to prevent accidental dismissal.
Design decision: Photo evidence creates an accountability trail for the operations team and reduces post-job disputes — a business need translated into a UX requirement.
3. User Profile — Account & Settings
View profile information
Reset password — syncs to ERP K.James immediately upon save
Help center
Log out with confirmation modal
Design decision: Password change triggers an instant sync to K.James. Prevents credential mismatch between the app and the ERP system — a technical constraint that had direct UX implications on the confirmation flow.
Process
PO rough draft → UI Design (all states + edge cases) → PO + Dev review (flow & feasibility) → Iterate x2–3 → Final spec for development
The design was evaluated by both PO and dev before any task was assigned — serving as the source of truth for implementation.
Outcome
Design spec approved by PO and dev team after 2–3 iterations
Delivered as annotated, dev-ready screens across 3 modules
Component reuse from TTC Application reduced estimated dev effort and maintained visual consistency across the product ecosystem