harita.istanbul
10.000 kullanıcıdan 1 milyona.
İBB Şehir Haritası · Akıllı Şehir Platformu · UX Redesign · 2024
Genel Bakış
İstanbul'un resmi şehir haritası yenilenmesi görevi bana verildiğinde, karmaşık ve kullanılması zor bir harita uygulamasıyla karşılaştım. İstanbul'a dair her şey bu haritada ama gerçek kullanıcı kitlesine ulaşamıyordu. UX Lead olarak süreci uçtan uca yönettim. Yeni işe başlamış 3 junior UXD'ye iş dağılımı yaptım, gelişimlerini gözlemledim, yönlendirdim. Yeni özellik kararlarını ben aldım. Mühendislik ekipleri ve yöneticileri, teknik kullanıcı odaklı yapıdan tüm son kullanıcıları kapsayan bir uygulamaya geçiş konusunda ikna ettim.
1M+
Tekil kullanıcı
56M+
Görüntüleme
5dk
Ort. etkileşim
IDC ★
2025 Ödülü
Hedef:
Mühendislik ekiplerinin görevlerini tamamlayabildiği ve son kullanıcıların keşif ile gezinme ihtiyaçlarını karşılayan, mobil uyumlu bir harita deneyimi tasarlamak. Bu hedefi ben tanımladım ve süreci uçtan uca yönettim.
Rolüm:
UX deneyimi olmayan 3 kişilik junior ekibi kurdum ve yönettim. Araştırma metodolojisini ben tasarladım, wireframe kararlarını ben aldım, paydaşları ben ikna ettim. Lansmanına kadar tüm süreci uçtan uca yürüttüm.
Sorumluluklarım:
Kullanıcı araştırması · App store analizi · Benchmark · Heuristic evaluation · Bilgi mimarisi · Wireframe & Prototip · Usability testi · Paydaş yönetimi · Design system kurulumu.
Arka Plan
sehirharitasi.ibb.gov.tr, yıllardır yalnızca İBB bünyesindeki müdürlükler ve ilçe belediyelerinin teknik birimleri tarafından kullanılıyordu. Platform bu kitleye göre şekillenmişti. Projeye başladığımda kurumda sistematik bir UX süreci yoktu. Bu ekibi kurmak için ben talepte bulundum. Kuruma ilk UX sürecini getiren bendim. Brief netti: "mevcut platformu iyileştirin." Yöneticiler teknik kullanıcıya yönelik yeni bir arayüz istiyordu. Mühendislik ekipleri köklü bir değişim istemiyordu, zaten yoğunlardı, yeni iş yükü almak istemediler.
Süreç
UX Lead olarak süreci yönettim. Ekipte daha önce hiç UX deneyimi olmamış, yeni işe başlamış 3 junior UXD vardı. İş dağılımını ben yaptım. Neleri araştıracaklarını, hangi metodolojilerle çalışacaklarını ben belirledim. Her adımda çıktılarını gözlemledim, yönlendirmeleri verdim. Zaman zaman zorlandılar. Ama her birinin bir şeyi öğrenip uyguladığını görmek farklı bir şeydi. Yeni özellik kararlarını ben aldım. Paydaş ikna süreçlerini ben yürüttüm.
Keşif Süreci
Ekibe netnografi için sosyal medya kanallarını ve app store'ları paylaştırdım. Nasıl araştırma yapacaklarını anlattım. Topladıkları verileri birlikte analiz ettik. Benchmark için uygulamaları paylaştırdım, çıkan sonuçları affinity map ile nasıl analiz edeceklerini öğrettim.
Kullanıcı görüşmelerini ben yaptım. Heuristic evaluation ile mevcut platformun sorunlarını ben belgeledim.
Her bulgu bir tasarım kararını besledi.
Kategori Keşif Zorluğu
Netnografi ve affinity map analizinden öne çıkan en yoğun şikayet buydu: haritadaki kategorilere ulaşmak zordu. Eczane, trafik yoğunluğu, otopark gibi günlük hayatta kritik katmanlara erişim, teknik terimler yüzünden zorlaşıyordu.
Karar: Haritadaki kategori isimleri kullanıcı diline çevrildi.
Akıllı Arama Eksikliği
Mobil kullanılabilirlik
Problem Tanımı
Tüm İstanbul'a hizmet eden şehir haritası, kullanıcılarının büyük çoğunluğuna ulaşamıyordu. İki farklı kullanıcı tipi, iki farklı problem yaşıyordu.
Genel vatandaş haritadaki kategorilere ulaşamıyordu. Teknik kullanıcılar da mevcut katman yapısından memnun değildi.
Netnografi çıktısını ve kullanıcı yolculuk haritasını iki farklı formatta sundum. Teknik ekibe bulgu üzerinden, üst yönetime etki üzerinden konuştum.
Karar yöneticilerle yapılan toplantıda netleşti: hibrit mimari. Haritadaki katmanlar teknik kullanıcılar için gelişmiş görünümde, genel kullanıcılar için sade yapıda sunuluyor.
Wireframe
Araştırma bulguları üç çekirdek problemi netleştirdi. Bu noktadan itibaren soru şuydu: hangi çözüm, mühendislik ekiplerinin iş akışlarını ve vatandaşların keşif ihtiyaçlarını aynı anda karşılayabilir?
Junior ekibe modülleri paylaştırdım. Nasıl wireframe yapmaları gerektiğini birkaç örnek çizerek ben gösterdim. Agile süreçleri içinde ürün ve mühendislik ekiplerinden geri bildirim topladık. Bu aşamanın amacı doğru kararı bulmak değil, yanlış kararları erken elemekti.
Kullanılabilirlik Testi Bulguları
Test senaryolarını ben yazdım. Harita katmanları ağırlıklı olmak üzere tüm akışları dahil ettim. Testleri ekibe yaptırdım, ben dış gözlemci olarak bulundum. Katılımcılar genel vatandaş ve teknik kullanıcıdan oluşan karışık bir gruptu. Test çıktılarını ekiple birlikte analiz ettik.
Dört oturumdan üç bulgu öne çıktı.
Katman kategorisi yeniden yapılandırıldı
Teknik kategori isimleri kullanıcılar için anlamsızdı. Test sonucunda tüm isimler kullanıcı diline çevirdim, anlamlı gruplama mantığıyla yeniden kurguladım.
Navigasyonlar arası geçiş sadeleştirildi
Mobil navigasyonda aktif ve seçili durumlar birbirine karışıyordu. Kullanıcılar hangi katmanın açık olduğunu anlayamıyordu. Durum göstergelerini yeniden kurguladım.
Kullanılabilirlik testinde fark ettik. İki kullanıcı "bunu kaydedebilir miyim?" dedi. Brief'te bu yoktu. Kişisel gezi listesi ve paylaşma özelliği eklendi.
Bu bulgular tasarım kararlarının temelini oluşturdu.
Tasarım Kararları
Her tasarım kararı, araştırmanın işaret ettiği bir kullanıcı davranışına yanıt verdi. Hiçbir şey sezgiyle değil, veriyle seçildi.
Arama Deneyimi
Otomatik tamamlama, kategori ipuçları, yazım hatasına tolerans. Kullanıcı ne aradığını bilmiyorsa önerilerle yönlendiriliyor. Haritaya geri dönüş daima tek adım.
Katman Mimarisi
Teknik terimler kullanıcı diline çevrildi. Yeniden gruplandırma yaptım. Mühendislik ekiplerine tek tek anlattım, ne elde etmek istediğimi aktardım. Teknik kullanıcı için gelişmiş görünüm seçeneği korundu.
Mobil Kontroller
Kontrol yoğunluğu azaltıldı, önceliklendirildi. Aktif ve seçili durumlar görünür kılındı. Büyük dokunma alanları, net hiyerarşi.
Keşfet Yüzeyi
Bu özelliğe ben karar verdim. Kullanıcının konumuna ve zamanına göre ilgili içerikleri gösteren dinamik yüzey. Kullanıcı ne arayacağını bilmeden de ilgili içeriğe ulaşabiliyor.
Final UI
Tasarım kararları ekrana dönüştü. Haritadaki katman paneli sıfırdan kurgulandı, arama akışına tolerans eklendi, mobil navigasyon sadeleştirildi, keşfet yüzeyi eklendi. Her ekran o kararın ürünü.
Gelişmiş katman görünümü
Hibrit mimarinin teknik kullanıcı katmanı
Teknik kullanıcı için gelişmiş katman görünümü. Hibrit mimarinin bu yüzü, mühendislik ekiplerinin tam katman kontrolünü koruyor.
Design System
Ekip büyüktü ve karma bir yapıya sahipti. 20 yazılımcı, 4 tasarımcı. Handoff sürecinde en büyük zorluk, tasarım kararlarının geliştirme aşamasına taşınırken dönüşüme uğramasıydı. Bileşenler farklı yorumlanıyor, UI tutarsızlıkları sprint'ten sprint'e birikiyordu.
Tasarım farklı kişilerin elinden çıkması nedeniyle uyumsuzluklar ve aktarım sorunları çıkmıştı. Design System'i ben
kurdum. Mühendislik ekiplerinin teknik kısıtlarını dinleyerek inşa ettim.
Figma kütüphanesindeki component yapısını ve token mimarisini bu sorunu çözmek için kurguladım. Tasarımcının kastettiğiyle yazılımcının uyguladığı arasındaki mesafeyi kapatmak hedefti. Ekip auditine göre UI tutarsızlıkları yüzde otuz beş azaldı.
Hem tasarımcılar hem de mühendislik ekipleri aynı dili konuşmaya başladı.
✓ 24 kişilik ekip benimsedi (20 yazılımcı + 4 tasarımcı)
✓ WCAG 2.2 uyumluluğu araç çıktısıyla doğrulandı
✓ UI tutarsızlıkları %35 azaldı. (ekip geri bildirimi)
✓ Handoff süreçleri belirgin biçimde hızlandı
Design System v1.0
Tasarım kararları netleştikçe, tutarlı bir dil oluşturma ihtiyacı da netleşti. Mobil uyumlu versiyonu temel alarak harita.istanbul'a özel bir design system kurdum. Renk tokenları, tipografi skalası ve component kütüphanesi.
İBB Kurumsal
#00347A
Ana Renk
#383D46
İkincil Renk
#8D99AE
Sınır Renk
#E6EBF2
Arka Plan
blue-alpha-10
Tipografi
ABCÇDEFGĞHİJKLMNOÖPRSŞTUÜVYZ
0123456789
Sonuç
sehirharitasi.ibb.gov.tr, harita.istanbul olarak yeniden doğdu. Proje 1 milyon tekil kullanıcıya ulaştı, 56 milyon görüntülenme ve ortalama 5 dakika etkileşim süresiyle İstanbul'un en çok kullanılan dijital hizmetlerinden biri oldu.
IDC CIO Excellence Awards 2025 - Change Management ödülünü aldı.
Kurumsal etki bunlarla sınırlı kalmadı. Kurumda UX takımı olarak ilk kez uygulanan UX süreci bu projeden sonra da devam etti. Sıfırdan kurduğum 3 kişilik junior ekip bağımsız çalışabilir seviyeye ulaştı. Design System 20 yazılımcı ve 4 tasarımcı tarafından benimsendi. UI tutarsızlıkları yüzde otuz beş azaldı.
İstanbul'a dair her şeyin bu haritada olabileceğini düşündüm. Bu proje bunu mümkün kıldı.
Ne Öğrendim
Kamu kurumlarında tasarım kararları teknik değil, iş birimi öncelikleriyle şekilleniyor. Üst yönetime görsel veri kanıtı ve kullanıcı davranışlarını sunduğumda, teknik dil sunumundan çok daha etkili oldu. Verinin kendisi değil, nasıl sunulduğu kararı belirledi.
Projeye "mevcut arayüzü revize edin" talebiyle başlandı. Araştırma, hedef kitlenin yanlış tanımlandığını gösterdi. Sadece teknik kullanıcı değil, tüm son kullanıcıları kapsayan bir uygulama gerekiyordu. Doğru hedef kitleyi tanımlamak, projenin yönünü değiştirdi.
Yöneticileri ve mühendislik ekibi takım liderini ikna etmek en zorlu süreçti. Veriye dayalı sunum, kullanıcı yolculuk haritası ve netnografi çıktıları bu süreçte en güçlü araçlarım oldu.