Tüm projeler
UI/UX Tasarımı · Mobil Uygulama2024–2026

Elektrikli Araç Şarj Uygulaması

Erken ürün tanımından geliştiriciye hazır tasarım sistemi ve mobil akışlara uzanan elektrikli araç şarj ürünü.

CODEBASE Ar-Ge'de bir elektrikli araç şarj ürününün tasarımını ilk keşif aşamalarından geliştiriciye hazır bir sisteme kadar yönettim. İlk tasarım pasından önce büyük bir şarj operatörünün içinde yazılım testeri olarak çalışmış olmam; iş kurallarını, backend bağımlılıklarını ve rakip uygulamalarda tekrar eden kırılmaları doğrudan görmemi sağlamıştı.

Bağlam ve Problem

Ürün; istasyon keşfi, cihaz ve güç filtreleme, canlı soket uygunluğu, istasyon durumu ve şarj başlatmayı kapsayan tam şarj yolculuğunu desteklemek zorundaydı. Bu karmaşıklığın altında da önceki test deneyimimden bildiğim gerçek operasyonel kısıtlar vardı. Uygulamaların pratikte nerede kırıldığını, backend varsayımlarının arayüze nasıl taştığını ve kullanıcı güveninin nasıl kaybedildiğini zaten görmüştüm.

Ürün sahibi, piyasadaki operatör uygulamalarından net biçimde ayrışan bir çözüm istiyordu; ama bunun analistler ve geliştiriciler için gerçekçi biçimde üretilebilir kalması da şarttı. Tasarım problemi, sistem karmaşıklığını yok saymadan deneyimi daha anlaşılır hale getirmekti.

Canlı istasyon pinleri, arama ve güç filtreleri etrafında kurulan harita deneyimi.

Şarj başlamadan önce gerekli karar bilgisini tek görünümde bir araya getiren istasyon seçimi ekranı.

Yaklaşım

İşe rakip şarj uygulamalarını denetleyerek başladım; kullanıcıya gerçekten yardım eden kalıpları sadece sürtünme üretenlerden ayırdım. Bazı erken yönler, ürünü daha iyi yapmadan yalnızca farklı göründüğü ya da düşük kullanıcı değeri için fazla geliştirme maliyeti çıkardığı için elendi.

Süreç, netliği gerçekten artıran ve güvenilir biçimde geliştirilebilen kararlar etrafında daraldığında hızlandı. Figma tarafında bu; auto-layout, variant ve variables kullanan tam bir bileşen kütüphanesine, wireflow'lara ve ana şarj yolculuğunu kapsayan yüksek doğruluklu prototiplere dönüştü. Deneyimin, iş mantığının ve uygulama detaylarının nerede buluşması gerektiğini netleştirmek için ürün sahibiyle, analiz ekibiyle, frontend ekibiyle ve backend ekibiyle yakın çalıştım.

Kilit ekranlardan biri istasyon detay sayfasıydı. Burada gerçek veriye dayanan bir yoğunluk histogramı kullandım: mevcut saat beyazla işaretleniyor, koyu gri barlar son 30 günün saatlik ortalama kullanımını gösteriyor ve etkileşim sırasında o lokasyondaki AC/DC soketlerin ortalama kullanımı açığa çıkıyordu. Amaç, kullanıcının yalnızca istasyonun açık olup olmadığını değil, ne zaman gitmesinin daha doğru olacağını da anlamasıydı.

Saat bazında ortalama AC/DC kullanımını açığa çıkaran etkileşimli histogramlı lokasyon detay ekranı.

Geliştirici handoff'una hazır düzen içinde toplanmış ekran ve bileşen kütüphanesi.

Sonuç

Sonuçta üretim seviyesinde ekranlara, çözülmüş şarj akışlarına ve geliştiricilerin ek yorum gerektirmeden uygulayabileceği bir tasarım sistemine sahip tam bir mobil ürün tanımı ortaya çıktı. Ürün sahibi, test ekibi ve mühendislerle yapılan düzenli değerlendirmeler işi gerçek platform kısıtlarıyla hizalı tuttu; final Figma dosyası da proje boyunca handoff'a hazır kaldı.

Uygulama daha sonra tasarım veya teknik çalışmadan bağımsız bir iş kararı nedeniyle iptal edildi; geride ise hâlâ geliştirilmeye hazır tamamlanmış bir sistem kaldı.

İstasyon seçimi, ödeme, aktif oturum ve aramayı kapsayan ana şarj prototipi.

İstasyon seçimi, ödeme kurgusu, aktif oturum takibi ve istasyon aramayı tek prototipte toplayan ana şarj akışı.

Sonraki projeUber Share!