Energy+
Çok adımlı bir "bul → filtrele → rezerve et → öde" akışı, tek bir sezgisel yola nasıl sığar?
Elektrikli araç sürücülerinin kendine uygun şarj istasyonunu bulup rezerve etmesini ve ödemesini tek akışta toplayan bir mobil uygulama konsepti. Bir iş görüşmesi için verilen bir tasarım göreviydi; çıkan sonucu beğendiğim için buraya aldım.
Ekran çizmeden önce durdum
Bu projeyi bir iş görüşmesinde, masaya konan bir konu olarak aldım: elektrikli araç sürücüleri için bir şarj istasyonu bulma uygulaması tasarla. Konu bana verilmişti ama nasıl yaklaşacağım bana kalmıştı.
İlk içgüdüm Figma'yı açıp ekran çizmek olabilirdi. Onun yerine durup sordum: bu uygulamayı kim kullanacak, neye ihtiyacı var ve şu an aynı işi yapan uygulamalar nerede yetersiz kalıyor? Güzel görünen bir arayüz değil, doğru kararların üzerine oturan bir arayüz istiyordum.
Bu yüzden tasarıma geçmeden önce iki şey yaptım: mevcut şarj uygulamalarını yan yana koyup karşılaştırdım ve sürücünün uygulamayı baştan sona nasıl kullanacağını bir senaryo olarak yazdım. Ekranlar ancak bunlardan sonra geldi.
Önce baktım, sonra tasarladım
Tasarıma başlamadan önce piyasadaki dört şarj uygulamasını — ESARJ, Trugo, ZES, Plugshare — ve tasarlayacağım Energy+'ı yan yana koydum; hepsini beş soruda karşılaştırdım ve güçlü-zayıf yönlerini bir SWOT tablosunda topladım. Amacım "neyi farklı yapabilirim"i tahminle değil, bakarak bulmaktı.
İki net boşluk gördüm:
Sürücü çoğu zaman fiyatı ancak istasyona gidince öğreniyordu. → Fiyatı (₺/kW) istasyon kartının üstüne taşıdım; kullanıcı daha listedeyken görsün istedim.
Uygulamaların çoğu yalnızca kendi markasının istasyonlarını gösteriyordu. → Tüm markaları tek bir listede toplamayı tasarımın temeline koydum.
SWOT'ta en çok dikkatimi çeken zayıflık ise veri doğruluğuydu: bu tür uygulamalarda istasyon bilgisi çabuk eskiyebiliyor. → Bu yüzden istasyonun anlık durumunu ve doluluğunu kart üzerinde net göstermeyi önemsedim — kullanıcı yola çıkmadan gerçeği görsün diye.
Karmaşığı tek bir yola oturttum
Senaryoyu tek cümlede özetleyebilirim: sürücü uygulamayı açar, ihtiyacına uygun istasyonu arar, filtreyle daraltır, sonuçlardan birini seçer, uygun gün ve saate rezervasyon yapar, sonra bu rezervasyonu istediği an yönetir. Kulağa basit geliyor ama içine bakınca adım çoktu — giriş, arama, filtreleme, karşılaştırma, karar, rezervasyon, ödeme, takip.
Bu yüzden senaryoyu bir kullanıcı akışına döktüm ve şunu sordum: hangi adımlar zorunlu, hangileri kullanıcının canını sıkar? İki karar noktası akışın belkemiği oldu:
Kullanıcı filtre sonucunu beğenmezse en başa dönmesin diye, akışı arama-filtre adımına geri besleyen bir döngü kurdum. Sıfırdan değil, daraltarak ilerlesin.
Rezervasyonu tamamlayan kullanıcı onu kaybetmesin diye, rezervasyon bilgisini anasayfada bir bildirim olarak yüzeye çıkardım. Geçmişe gömülmüyor, hep el altında.
Akışı olabildiğince sade ve doğrusal tuttum; dallanmayı yalnızca gerçekten karar gereken yerlerde bıraktım. Amaç, sürücünün "şimdi ne yapacağım?" diye durmadan baştan sona akıp gitmesiydi.
Rengi ve tipografiyi konudan çıkardım
Renk paletini konunun kendisinden çıkardım. Elektrikli araç ve sürdürülebilirlik denince yeşil kaçınılmazdı; ama tek bir yeşil değil, iki iş için iki yeşil seçtim: sakin, hafif kırık bir yeşili (#4B7567) güven veren zemin rengi yaptım; canlı yeşili (#00972A) ise yalnızca enerji ve eylem anlarına — şarj, onay, "git" — sakladım. Yanına teknolojiyi ve güveni temsil eden bir maviyi koydum. Geri kalan her şeyi sıcak nötrlere bıraktım ki renk, gerçekten önemli olduğu yerde konuşsun.
Tipografide SF Pro Rounded'ı seçtim. Yuvarlatılmış uçları, teknik bir aracı (kW, slot, fiyat, harita) fazla soğuk olmaktan çıkarıp daha insani, sakin bir his veriyordu. iOS'un kendi diliyle uyumluydu ve Türkçe karakterleri sorunsuz taşıyordu.
Kararlar ekrana döndü
Buraya kadarki her karar — fiyatı öne çıkarmak, tüm markaları tek yerde toplamak, akışı tek yola oturtmak — bir noktada ekrana dönmek zorundaydı. Uygulamayı baştan sona tasarladım; aşağıda her ekran grubunun arkasında hangi kararın durduğunu da işaretledim.
Kullanıcıyı sürdürülebilir sürüş fikriyle karşılıyorum. Onboarding'i kısa tuttum; amacı bilgi yığmak değil, tonu kurmaktı — 5. bölümdeki his burada başlıyor.
Zorunlu ama hafif bir adım. Girişi mümkün olduğunca az alanla, hızla geçilebilir bir eşik olarak tasarladım.
Tasarımın kalbi. Yakındaki istasyonlar tek listede, marka ayrımı olmadan; her kartın üstünde fiyat (₺/kW), anlık durum ve mesafe. 3. bölümdeki üç kararın hepsi burada görünür oluyor. Tamamlanan rezervasyon da anasayfada bildirim olarak duruyor.
Filtrelemeyi burada derinleştirdim: marka, soket tipi, kW aralığı, konum, erişilebilirlik ve fiyat. Sürücü "memnun değilim" dediğinde en başa değil, buraya dönüyor — 4. bölümdeki döngü.
Akışın somut hali: istasyonu incele, geçmiş işlemlerini gör, gün ve saat seç, temassız öde, rezervasyonu sonradan yönet. 4. bölümdeki yolculuk burada uçtan uca ekrana dönüşüyor.
Bitmiş bir ürün değil, bir çalışma biçimi
Bana bir konu verildi; ben onu önce bir dizi karara, sonra bir arayüze çevirdim. Energy+'ı portfolyoma almamın sebebi sonucun "bitmiş bir ürün" olması değil — bir brief'i alıp önce bakan, sonra tasarlayan biri olarak nasıl çalıştığımı en net gösteren işlerden biri olması.
Dürüst olmak gerekirse bu bir konsept: bir iş görüşmesi için yapıldı, gerçek kullanıcılarla test edilmedi, yayınlanmadı. Ekranlar bir varsayımın üzerinde duruyor; o varsayımı kanıtlayacak olan da kullanıcı.
Devam etseydim ilk işim bu olurdu: özellikle SWOT'ta işaret ettiğim veri doğruluğu zayıflığını ve filtre derinliğinin gerçekten işe yarayıp yaramadığını birkaç sürücüyle test etmek. Tasarım benim için hiçbir zaman "teslim ettim, bitti" değil; nerede yanıldığımı görene kadar süren bir döngü.
Nasıl çalıştığımı merak ettiysen, konuşalım.