Müşteri ve sektör

Ekranlarda İstanbul Büyükşehir Belediyesi Raylı Sistem Daire Başkanlığı adı ve "Raylı Sistem Bilgi Portalı" başlığı geçiyor. Alan, kent içi raylı sistem yatırımlarının yönetimi. Portala kullanıcı adı ve şifreyle giriliyor.

İhtiyaç

Portal, raylı sistem projelerini dört aşamada izlemek için kurgulanmış: tasarım, ihale, yapım ve tamamlanan. İBB'nin ve AYGM'nin yürüttüğü projeler ayrı gösteriliyor. Projeler Anadolu ve Avrupa yakasına göre de süzülebiliyor. Bütçe, süre, tünel uzunluğu, istasyon sayısı ve riskler aynı ekranda özetleniyor.

Rolüm ve kapsam

IBB Train Software projesinde portalın arayüzünü tasarladım. Portfolyoda dört ekran var: giriş, genel durum, aşama ekranı ve ana menü.

Süreç ve tasarım kararları

• Lacivert zemin kullandım. Arka plana raylı sistem haritasını andıran ince çizgiler koydum. Öne yeşil ve sarı ok motifleri yerleştirdim.
• Giriş formunu beyaz bir dairenin içine aldım. Sağ tarafta kurum ve portal adı yer alıyor.
• Genel ekranda iki grafik var. Yatay çubuk grafik yıl hedefinin tamamlanma oranını gösteriyor. Halka grafik planlanan hat uzunluğunu gösteriyor.
• İBB'yi yeşille, AYGM'yi sarı-turuncuyla işaretledim. Bu renk ayrımı ekranlar boyunca aynı kalıyor.
• Sol sütunda aşama menüsü sabit duruyor. Seçili aşama turuncu renk ve okla vurgulanıyor.
• Aşama ekranının üstünde yedi özet kartı var: Projeler, Bütçe, Süre, Tünel, İstasyonlar, Riskler ve Gelecek 6 Ayda. Altında proje listesi yer alıyor. Her satırda ilerleme halkası, bütçe, süre ve hat uzunluğu var.
• Proje listesinin yanındaki alan Tanımlama ve Hat Bilgisi sekmeleriyle değişiyor.
• Ana menüyü tam ekran açılan bir katman olarak tasarladım. Menüde on iki yönetim başlığı var. Kapsam, tasarım, inşaat, program, maliyet ve kalite bunlardan bazıları. Malzeme, İSG ve çevre, insan kaynakları, risk, arayüz ve doküman yönetimi de menüde.
• Alt başlıklarda pafta, sondaj, tünel imalatı, hakediş ve rapor sayfaları listeleniyor. Aconex ve M-Files gibi dış sistemlere bağlantılar da menüde yer alıyor.

Ekranlar yatay tablet ve masaüstü oranında hazırlandı. Tipografide kalın başlıklar ve büyük yüzde değerleri kullandım. Ana rakamlar uzaktan da okunuyor.

Teslimler

• Giriş ekranı
• Genel durum ekranı
• Aşama ekranı (Tasarım, Hat Bilgisi sekmesi)
• Tam ekran ana menü

Kapak görselinde araç olarak Figma ve Zeplin geçiyor.

Sonuç

Portfolyoda portal için tasarladığım dört ekran yer alıyor.

Bu çalışma SaaS ve dashboard tasarımı hizmetimden bir örnek.