Skip to content
Logistics & Process ~1 min read UI/UX & Vibe Coder

TCDD Ticketing Kiosk Interface

Wizard-based UI/UX design for an 11-inch touchscreen kiosk, built with vibe coding for fast station ticketing and seat selection.

Ticket sales kiosk screen (cropped)

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

  1. User Flow & Information Architecture

    A 4-step linear wizard architecture was modeled so station passengers could reach their goal with minimal taps.

  2. 11-inch Touchscreen Ergonomics

    Large tap targets, high-contrast typography, and finger-friendly touch controls were engineered.

  3. Interactive Wagon & Seat Map

    An interactive grid was developed so users could select a wagon and instantly see empty/occupied seats and gender constraints.

  4. ID & Fast Payment Flow

    Passenger count selection, national ID reading simulation, and contactless card/POS steps were optimized.

  • Ticket kiosk route and date selection screen
  • Ticket kiosk journey and wagon type selection
  • Ticket kiosk passenger count and discount selection
  • Ticket kiosk wagon and seat map
  • Ticket kiosk passenger details screen
  • Ticket kiosk summary, payment and ticket screen
Screenshots

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
Back to all projects

Share this project

Leave a Reply

Your comment is published after review. No email needed.

How your personal data is processed is explained in the privacy notice.