Durak

İstanbul'da aktarmalı yolculuğu tek akışta planla, takip et ve öde. Kalabalık bir vagonda tek elle ve tek bakışta kullanılmak için tasarlandı.

RolAraştırma, UX, UI

PlatformiOS · Android

TürKişisel konsept

AraçlarFigma, Miro

Durak uygulamasının rota seçenekleri ve yolculuk modu ekranları

01 · Problem

Bilgi dağınık, dikkat yolcuda

Aktarmalı bir yolculukta rota bir uygulamada, kart bakiyesi başka bir yerde, hangi durakta inileceği ise tamamen yolcunun dikkatinde. Kalabalık bir vagonda telefonu açıp küçük bir haritada konumu aramak hem zor hem stresli.

Durak bu üç parçayı tek bir yolculuk akışında birleştiriyor: planla, takip et, bakiyeni kontrol et.

02 · Rakip incelemesi

Neyi aldık, neyi değiştirdik

Citymapper başta olmak üzere ulaşım uygulamalarının ekran akışları ve yayımlanmış tasarım eleştirileri incelendi.

Korunan kalıplar

Ana ekranın tek işi “nereye?” sorusu; Ev ve İş kayıtlı yerleri tek dokunuşta. Rota listesinde “az yürüme”, “engelsiz” gibi filtreler tüm seçenekleri bir kerede yeniden sıralıyor. Hat durumunu rota açmadan görmek; rotayı çevrimdışı kaydetmek.

Boşluklar

Rota sonuç ekranlarında görsel hiyerarşi zayıf; seçenekleri hızlı taramak zor. Kart bakiyesi ve ücret yolculuktan ayrı bir uygulamada; turnikede sürpriz. Yolculuk sırasında “ne zaman inmeliyim” bilgisi kilit ekranına taşınmıyor.

03 · Kimin için

Her sabah iki hat, bir aktarma

Elif, 29 Beylikdüzü'nden Levent'e giden ofis çalışanı. Metrobüs ile M2 arasında her gün aktarma yapıyor. Proto-persona · sahada doğrulanacak

Hedefleri Aktarmayı kaçırmadan, en az yürüyüşle ofise varmak. Yolculuk sırasında başka işle meşgulken inilecek durağı kaçırmamak.

Zorlukları Turnikede bakiyenin yetmediğini fark etmek. Kalabalıkta telefona bakamamak, anonsu duyamamak.

04 · Kullanıcı akışı

Kapıdan kapıya beş adım

1Nereye?

2Rota seç

3Bakiye kontrolü

4Yolculuk modu

5İnme uyarısı

Bakiye yetmiyorsa 3. adımda kart yükleme açılır ve yolculuk kaldığı yerden devam eder.

05 · Ekranlar

Planla, seç, takip et, öde

Ana ekran ekranı — Adım 1 Ana ekran Tek soru: nereye? İş rotasının süresi çipte hazır, hat durumu ve bakiye rota açmadan görünüyor.

Rota seçenekleri ekranı — Adım 2 Rota seçenekleri Süre en büyük öğe. Segment çubuğu yürüme ve araç payını tek bakışta gösteriyor; filtreler tüm listeyi yeniden sıralıyor.

Rota detayı ekranı — Adım 3 Rota detayı Adım adım zaman çizelgesi; aktarmaya en yakın kapı, peron ve asansör bilgisi aktarma noktasında.

Yolculuk modu ekranı — Adım 4 Yolculuk modu Koyu zemin üstünde sinyal sarısı kart: kalabalıkta kol mesafesinden okunacak kadar büyük bir sonraki adım.

Kilit ekranı ekranı — Adım 5 Kilit ekranı Canlı etkinlik ve titreşimli uyarı; telefonu açmadan inilecek durak ve sonraki aktarma.

Kart ve bakiye ekranı — Her an Kart ve bakiye Bakiye “kaç yolculuk yeter” diliyle; otomatik yükleme tek anahtar, günün hareketleri altında.

Süre, ücret, bakiye ve harita değerleri örnek veridir.

06 · Görsel dil

Açık arayüz, tek sinyal rengi

Mürekkep
#0F172A

Zemin
#F6F5F2

Sinyal
#FFC93C

Canlı
#16A34A

Hat etiketleri ve ikonlar

34M2T176

Hat renkleri yalnızca hat kimliği için. Durum her zaman metinle de veriliyor; 1,9 px çizgi kalınlığında tek tip ikon seti ve 48 px minimum dokunma alanı.

07 · Sonraki adımlar

Konseptten kanıta

Gerçek yolcularla kullanılabilirlik testiHer gün aktarma yapan beş kişiyle, sabah yoğunluğunda yolculuk modunu test etmek.

Ekran okuyucu anonsları“2 durak sonra in” bilgisinin VoiceOver ve TalkBack ile sesli okunması.

Yeraltında çevrimdışı modMetroda bağlantı kopsa da durak sayımının sefer saatine göre sürmesi.

Sonraki vakaNöbet