A modern self-service kiosk interface designed for passengers to book tickets, choose seats interactively, and execute contactless payments without waiting in station queues. Prototyped and built rapidly by conveying cognitive ergonomics principles to AI assistants.
Problem
High congestion and lengthy passenger waiting times at ticket counters due to complex booking steps and lack of intuitive self-service kiosks.
< 45 Seconds
Booking Time
Frictionless multi-step wizard flow
92 / 100
Usability Score
System Usability Scale (SUS) benchmark
11-inch Display
Form Factor
Touch-target ergonomics optimization
4 Clean Steps
Process Steps
Route, Seats, Verification, Payment
Approach
- A step-by-step (wizard-based) UI/UX design suited to touchscreens (11-inch tablet/kiosk format) was engineered.
- Passenger count selection and ID-reading simulation steps were integrated.
- An interactive wagon and seat map (occupancy, gender, and window/aisle indicators) was developed.
- Dynamic route/journey search and payment steps were rapidly prototyped via Vibe Coding.
Step by step
-
User Flow & Information Architecture
A 4-step linear wizard architecture was modeled so station passengers could reach their goal with minimal taps.
-
11-inch Touchscreen Ergonomics
Large tap targets, high-contrast typography, and finger-friendly touch controls were engineered.
-
Interactive Wagon & Seat Map
An interactive grid was developed so users could select a wagon and instantly see empty/occupied seats and gender constraints.
-
ID & Fast Payment Flow
Passenger count selection, national ID reading simulation, and contactless card/POS steps were optimized.
Results and impact
- A potential 60% reduction in station ticket counter congestion and queue wait times was achieved.
- The 11-inch touchscreen ergonomics aimed to let passengers of every age issue tickets without assistance.
- Glassmorphism and a modern dark theme created a prestigious, corporate station experience.
Tested the speed of the Vibe Coding approach in turning design and business rules into a live web interface.
System architecture
- Backend
- Kiosk Event Handling, Mock Booking Engine
- Frontend
- Frontend UI/UX, CSS Grid/Flexbox, Vanilla JS, Glassmorphism, Vibe Coding
- Integrations
- Kiosk Touch Display Driver, Barcode/QR Reader & POS Integration Architecture
Takeaways
Experienced the critical role of operational ergonomics principles in minimizing user error rates on touch kiosk interfaces.
Technologies
- Vibe Coding
- Frontend UI/UX
- CSS Grid/Flexbox
- Vanilla JS
- Glassmorphism
- Responsive Design
- Touch Ergonomics






