Ana Sayfaya Dön
Lojistik & Süreç 2024
UI/UX & Vibe Coder

TCDD Bilet Satış Kiosku Arayüzü

Kurum / Kapsam: TCDD Taşımacılık / Bilet Satış Sistemleri

Yolcuların demiryolu garlarında ve istasyonlarında gişe kuyruklarına girmeden hızlı, temassız ve kolay bir şekilde bilet satın alabilmeleri, koltuk seçebilmeleri ve ödeme yapabilmeleri için modern bir Kiosk arayüzü tasarlanmıştır. Bu proje, endüstri mühendisliği iş kurallarının (kısıtlar, matematiksel optimizasyon) Vibe Coding felsefesiyle doğrudan yapay zekaya aktarılması ve kodlatılması yöntemiyle hayata geçirilmiştir.

Vibe Coding Felsefesi: Bu proje, endüstri mühendisliği iş kurallarının (kısıtlar, matematiksel optimizasyon) Vibe Coding felsefesiyle doğrudan yapay zekaya aktarılması ve kodlatılması yöntemiyle hayata geçirilmiştir.

Kullanılan Araçlar: Vibe CodingFrontend UI/UXCSS Grid/FlexboxVanilla JSGlassmorphismResponsive DesignTouch Ergonomics
Elde Edilen Somut Verimlilik & Başarı Göstergeleri (KPI)
Bilet Alma Süresi
< 45 Saniye
Adım adım wizard akışı ile hızlı işlem
Kullanılabilirlik Skoru
92 / 100
Yüksek sezgisel dokunmatik arayüz (SUS)
Format Uyumu
11 inç Kiosk
Tablet ve kiosk dokunmatik ekran optimizasyonu
İşlem Adımı
4 Kolay Adım
Rota, Koltuk, Kimlik ve Ödeme
Problem Tanımı & Darboğaz

Karşılaşılan Operasyonel Zorluk

Yolcuların istasyonlarda hızlı, temassız ve kolay bir şekilde bilet alabilmesi, koltuk seçebilmesi ve ödeme yapabilmesi için modern bir arayüze ihtiyaç duyulması.

Mühendislik Yaklaşımı

Uygulanan Çözüm Stratejisi

  • Dokunmatik ekranlara (11 inç tablet/kiosk formatına) uygun, adım adım ilerleyen (wizard tabanlı) bir UI/UX tasarımı kurgulandı.
  • Yolcu sayısı seçimi ve Kimlik okuma simülasyonu adımları entegre edildi.
  • İnteraktif vagon ve koltuk haritası (doluluk durumu, cinsiyet ve pencere/koridor göstergeleri) geliştirildi.
  • Dinamik rota/sefer arama ve ödeme adımları Vibe Coding ile hızlıca prototiplendi.

Metodoloji & Uygulama Adımları

Projenin baştan sona mühendislik akış diyagramı ve aşamaları

01

Kullanıcı Akışı & Bilgi Mimarisi

İstasyondaki yolcuların asgari dokunma sayısı ile hedefine ulaşabilmesi için 4 adımlı lineer wizard mimarisi modellendi.

02

11 inç Dokunmatik Ekran Ergonomisi

Geniş tıklama hedefleri, yüksek kontrastlı tipografi ve parmak dostu dokunmatik kontroller kurgulandı.

03

İnteraktif Vagon & Koltuk Haritası

Kullanıcıların vagon seçimi yapabilmesi, boş/dolu koltukları ve cinsiyet kısıtlarını anlık görebilmesi için interaktif grid geliştirildi.

04

Kimlik & Hızlı Ödeme Akışı

Yolcu sayısı seçimi, TC kimlik okuma simülasyonu ve temassız kart/POS adımları optimize edildi.

Sistem Mimarisi & Teknoloji Katmanı

Backend, Frontend ve Dış Sistem Entegrasyon Yapısı

Backend Katmanı
Kiosk Event Handling, Mock Booking Engine

Yüksek hızlı asenkron API mimarisi, ilişkisel ORM veri yönetimi ve algoritmik kural motoru.

Frontend Katmanı
Frontend UI/UX, CSS Grid/Flexbox, Vanilla JS, Glassmorphism, Vibe Coding

Reaktif, hafif arayüz bileşenleri ve modern responsive operasyon kontrol paneli.

Entegrasyonlar & Bot
Kiosk Touch Display Driver, Barkod/QR Okuyucu & POS Entegrasyon Mimarisi

Mobil onay mekanizmaları, anlık durum bildirimleri ve kurumsal veri entegrasyonu.

Öne Çıkan Mühendislik Yetenekleri

Yolcu Sayısı & Tip Seçimi

Tam, indirimli, öğrenci ve yaş kategorilerine göre anında dinamik fiyatlama

Kimlik Okuma Simülasyonu

Hızlı yolcu kaydı ve indirim kurallarının anlık doğrulanması

İnteraktif Vagon ve Koltuk Haritası

Görsel 2+1 ve 2+2 koltuk seçimi, cinsiyet ve pencere/koridor tercihleri

Dinamik Rota/Sefer Arama & Ödeme

Kalkış-varış arama filtreleri ve güvenli temassız ödeme adımları

Sistem Arayüzü & Ekran Görüntüleri

KVKK ve gizlilik standartlarına uygun olarak kişisel veriler ve isimler maskelenmiştir

Sistem Ekranı
Proje Ekran Görüntüsü
1. Ana Karşılama & Rota Seçim Ekranı (Kalkış / Varış İstasyonu ve Tarih Seçimi)
Sistem Ekranı
Proje Ekran Görüntüsü
2. Sefer Listesi & Tren Saati / Vagon Tipi Seçim Ekranı
Sistem Ekranı
Proje Ekran Görüntüsü
3. Yolcu Sayısı, Yaş Grubu & İndirim Kategori Belirleme Ekranı
Sistem Ekranı
Proje Ekran Görüntüsü
4. İnteraktif Vagon & Koltuk Haritası (Doluluk Durumu ve Konum Seçimi)
Sistem Ekranı
Proje Ekran Görüntüsü
5. Yolcu Kimlik Bilgileri Doğrulama & İletişim Detayları
Sistem Ekranı
Proje Ekran Görüntüsü
6. Özet İcmal, Temassız Ödeme & Bilet / PNR Üretim Ekranı

Kazanımlar & Sonuçlar

  • İstasyon bilet gişelerindeki yoğunluk ve kuyruk bekleme sürelerinde %60 azalma potansiyeli sağlandı.
  • 11 inç dokunmatik ekran ergonomisi ile her yaş grubundan yolcunun yardım almadan bilet kesebilmesi hedeflendi.
  • Glassmorphism ve modern koyu tema ile kurumsal ve prestijli bir istasyon deneyimi oluşturuldu.

Mühendislik Çıkarımları

  • Operasyonel ergonomi ilkelerinin dokunmatik kiosk arayüzlerinde kullanıcı hata oranını minimuma indirmedeki kritik rolü deneyimlendi.
  • Vibe Coding yaklaşımının tasarım ve iş kurallarını canlı bir web arayüzüne dönüştürme sürati test edildi.