Geleneksel banka uygulamaları
İşlem güvenliği ve kapsam güçlü. Fatura bilgileri çoğu zaman menüler arasında dağılıyor ve nakit akışı görünürlüğü sınırlı kalıyor.
Mobil Bankacılık · UX/UI
Rivo
Rivo, faturalar ve nakit akışı üzerine kurgulanan konsept bir mobil bankacılık uygulaması. Ödeme tarihlerini, otomatik ödeme talimatlarını ve ödemeler sonrasında hesapta kalacak tutarı tek bir görünümde topluyor.
Fatura ödemekten fazlasını düşünmek
Fatura ödemek, bankacılık uygulamalarındaki en tanıdık işlemlerden biri. Asıl sorun ödeme anından önce başlıyor. Farklı tarihlere dağılan faturalar, aktif otomatik ödeme talimatları ve ay sonuna kadar elde kalacak para çoğu zaman ayrı ayrı takip ediliyor.
Rivo, bütün bu bilgileri tek bir nakit akışı deneyiminde bir araya getiren konsept bir mobil bankacılık çalışması. Kullanıcı mevcut bakiyesini görmekle kalmıyor. Yaklaşan ödemelerden sonra hesabında ne kalacağını, hangi faturanın risk altında olduğunu ve otomatik ödemelerin nasıl davranacağını da önceden görebiliyor.
Bakiye her zaman bütün resmi göstermiyor
Bir kullanıcının hesabında bugün yeterli para olması, birkaç gün sonra yapılacak ödemeler için de yeterli olduğu anlamına gelmiyor. Buna rağmen birçok banka uygulaması mevcut bakiyeyi güçlü biçimde gösterirken yaklaşan yükümlülükleri ikinci planda bırakıyor.
Bu projede odağımı ödeme işleminin kendisinden çok, ödeme öncesindeki karar sürecine çevirdim. Kullanıcı uygulamayı açtığında yalnızca ne kadar parası olduğunu değil, faturalar sonrasında nasıl bir durumda kalacağını da anlayabilmeliydi.
Dağınık tarihler, görünmeyen riskler
Fatura yönetimindeki temel sorun, işlemin zor olması değil. Bilginin farklı yerlere dağılması ve kullanıcının gelecekteki hesap durumunu zihninde hesaplamak zorunda kalması.
- Yaklaşan faturalar farklı ekranlarda takip ediliyor.
- Ödeme sonrasındaki tahmini bakiye görünmüyor.
- Otomatik ödeme ile manuel ödeme çakışabiliyor.
- Yetersiz bakiye çoğu zaman işlem başarısız olduğunda fark ediliyor.
- Faturalardaki olağan dışı artışları görmek kolay değil.
- Otomatik ödeme talimatları kullanıcıya yeterince kontrol vermiyor.
Bu sorunlar tek başına küçük görünebilir. Bir araya geldiklerinde ise kullanıcıya sürekli kontrol etme ve yeniden hesaplama yükü getiriyor.
Kontrol hissini kaybetmeden işleri kolaylaştırmak
- Yaklaşan faturaları tek yerde göstermek.
- Ödemeler sonrası tahmini bakiyeyi görünür hale getirmek.
- Birden fazla faturanın tek işlemde ödenmesini sağlamak.
- Çift ödeme riskini ödeme gerçekleşmeden önce fark etmek.
- Yetersiz bakiye için doğrudan çözüm sunmak.
- Fatura artışlarını anlaşılır grafiklerle göstermek.
- Otomatik ödeme kurallarını kullanıcı kontrolüne açmak.
Amacım kullanıcının daha fazla finansal veri görmesi değildi. Doğru bilgiyi karar vermesi gereken anda göstermekti.
Önce işlemleri değil, belirsizlikleri inceledim
Çalışmaya fatura ödeme akışını adımlara ayırarak başladım. Kullanıcının uygulamayı açtığı andan ödeme sonrasına kadar hangi bilgiye ihtiyaç duyduğunu ve hangi noktada tereddüt yaşayabileceğini çıkardım.
Ardından yaygın mobil bankacılık ve finans uygulamalarındaki fatura, otomatik ödeme, işlem geçmişi ve bütçe ekranlarını karşılaştırdım. Özellikle çift ödeme, yetersiz bakiye, yaklaşan ödeme ve beklenmedik tutar artışı gibi riskli durumlara odaklandım.
Kullandığım yöntemler
- Desk research
- Görev analizi
- Rakip akış incelemesi
- Risk senaryosu haritalama
- Bilgi hiyerarşisi çalışması
- Erişilebilirlik kontrolü
Üç farklı ürün yaklaşımı
Dijital bankacılık ürünleri
Görsel anlatım daha sade. Buna rağmen otomatik ödeme kuralları çoğu zaman yalnızca açma ve kapatma seviyesinde kalıyor.
Bütçe uygulamaları
Harcamaları anlamlandırma konusunda başarılılar. Faturayı ödeme ve ödeme talimatını yönetme işlemi genellikle başka bir üründe tamamlanıyor.
Rivo için fırsat, ödeme gücü ile analiz tarafını aynı akışta bir araya getirmekti.
Tasarım kararlarını yönlendiren dört içgörü
Mevcut bakiye tek başına yeterli değil
Kullanıcının asıl ihtiyacı, yaklaşan ödemelerden sonra hesabında ne kalacağını görmek.
Otomasyon kontrolün yerini almamalı
Otomatik ödeme kolaylık sağlıyor ancak tarih, tutar limiti ve yetersiz bakiye davranışı kullanıcı tarafından belirlenebilmeli.
Uyarı tek başına çözüm değil
Yetersiz bakiye mesajı, hangi ödemenin risk altında olduğunu ve sorunun nasıl giderilebileceğini göstermeli.
Renkler verinin anlamını desteklemeli
Kategori renkleri birbirinden ayrılmalı. Başarı, risk ve gider renkleri yalnızca gerçek anlamları için kullanılmalı.
Birden fazla düzenli ödemeyi yöneten insanlar
Rivo, maaş veya serbest çalışma geliriyle birden fazla düzenli ödemeyi yöneten kullanıcıları odağına alıyor. Bu kullanıcılar bankacılık uygulamalarını sık kullanıyor ancak yaklaşan ödemeleri hâlâ hatırlatıcılar, mesajlar ve zihinsel hesaplamalarla takip edebiliyor.
İhtiyaçları
- Yaklaşan ödeme görünürlüğü
- Ödeme sonrası bakiye tahmini
- Kontrollü otomasyon
- Beklenmedik artışların fark edilmesi
- Hızlı ve güvenli toplu ödeme
Personalar
İki persona da senaryo temelli. Akışları çıkarırken gördüğüm davranış örüntülerini bir araya topluyorlar, böylece tasarım kararlarının hesap vereceği bir kişi oluyor.
01
Elif Kaya
“Faturalar otomatik ödensin istiyorum ama hesabımdan ne zaman ve ne kadar para çıkacağını da bilmek istiyorum.”
Senaryo
Elif ayda altı yedi fatura ödüyor ve çoğunu otomatik talimata bağlamış. Maaş gününden birkaç gün önce hesabını açıyor ve gerçekten harcayabileceği tutarı kağıt üzerinde hesaplıyor.
Hedefler
- Ay içerisindeki bütün faturalarını tek yerde görmek.
- Ödemeler sonrası harcayabileceği tutarı anlamak.
- Beklenmedik fatura artışlarını fark etmek.
- Otomatik ödeme üzerinde kontrol sahibi olmak.
Zorluklar
- Fatura tarihlerini ayrı ayrı takip etmek.
- Otomatik ödeme ile manuel ödeme arasında kararsız kalmak.
- Ay sonunda hesapta kalacak tutarı önceden görememek.
02
Mert Arslan
“Bugün hesabımda para olması yeterli değil. Ödeme günü geldiğinde de yeterli olup olmayacağını görmek istiyorum.”
Senaryo
Mert serbest çalışıyor, bu yüzden geliri her ay farklı tarihlerde giriyor. Ödeme tarihi yaklaştığında hesaplar arasında para aktarıyor ve bir riski ödeme gününde değil birkaç gün öncesinde duymayı tercih ediyor.
Hedefler
- Değişken gelirine göre ödemelerini planlamak.
- Yetersiz bakiye nedeniyle fatura kaçırmamak.
- Gerektiğinde farklı hesaplar arasında para aktarmak.
- Ödeme tarihinden önce bildirim almak.
Zorluklar
- Gelir tarihleri ile fatura tarihlerini eşleştirmek.
- Hangi ödemenin risk altında olduğunu anlamak.
- Otomatik talimatların nasıl davranacağını kontrol etmek.
Faturayı görmekten kontrolü tamamlamaya
Yolculuk bir aylık fatura döngüsünü izliyor. Bakiyeye atılan ilk bakıştan, bir sonraki ayı yönetecek kuralın düzenlenmesine kadar.
Durumu kontrol etme
- Eylem
- Kullanıcı mevcut bakiyesini ve yaklaşan fatura toplamını görür.
- İhtiyaç
- Faturalar sonrasında hesabında ne kalacağını anlamak.
Faturaları inceleme
- Eylem
- Yaklaşan ödemeleri tarih ve durumlarına göre kontrol eder.
- İhtiyaç
- Hangi faturaların otomatik, hangilerinin manuel olduğunu ayırt etmek.
Ödeme seçimi
- Eylem
- Ödemek istediği faturaları seçer.
- İhtiyaç
- Seçilen toplamı ve işlem sonrası bakiyeyi anlık görmek.
Ödemeyi doğrulama
- Eylem
- Hesabı, tarihi, ücreti ve otomatik ödeme çakışmalarını kontrol eder.
- İhtiyaç
- Çift ödeme riskinden korunmak.
Sonucu takip etme
- Eylem
- Ödeme sonucunu, yeni bakiyeyi ve dekontları görür.
- İhtiyaç
- İşlemin doğru tamamlandığından emin olmak.
Geleceği planlama
- Eylem
- Fatura analizlerini inceler ve otomatik ödeme kuralını düzenler.
- İhtiyaç
- Aynı kontrolleri her ay tekrar yapmak zorunda kalmamak.
Problemleri ürün fırsatlarına çevirmek
Tahmini bakiye
Mevcut bakiyeyi yaklaşan faturalarla birlikte göstermek.
Toplu ödeme
Birden fazla faturayı seçip tek kontrol adımıyla ödemek.
Risk önleme
Çift ödeme ve yetersiz bakiye sorunlarını işlemden önce fark etmek.
Akıllı kurallar
Tarih, tutar limiti, hesap ve bildirim davranışını kullanıcının belirlemesini sağlamak.
Rivo için belirlediğim ürün ilkeleri
- Gelecekteki bakiye, mevcut bakiye kadar görünür olmalı.
- Her uyarı bir sonraki adımı açıkça göstermeli.
- Otomatik işlemler kullanıcı izni olmadan kapsam değiştirmemeli.
- Para tutarları ve tarihler ilk bakışta anlaşılmalı.
- Renk, dekorasyondan önce anlam taşımalı.
- Kritik işlemler onay öncesinde özetlenmeli.
- Edge case ekranları ana akış kadar özenli tasarlanmalı.
Bilgiyi ödeme kararına göre düzenlemek
Yapı, kullanıcının ödeme kararını verirken izlediği sırayı takip ediyor. Home hesabın durumunu, Bills fatura detayını ve kuralları, Insights zaman içindeki değişimi anlatıyor. Ödeme akışı ise kendi onay adımlarını koruyor.
Rivo
Home
Bills
Insights
Profile
Available balance
Projected balance
Quick actions
Upcoming bills
Contextual insights
Upcoming
Scheduled
Paid
Bill detail
Payment rules
Monthly total
Paid and upcoming
Category distribution
Six month trend
Unusual increases
Accounts
Notifications
Security
Preferences
Payment Flow
Select bills
Review payment
Duplicate payment protection
Face ID confirmation
Payment success
Receipts
Üç faturayı tek işlemde ödeme
Home
Select Bills
Payment Review
Face ID Confirmation
Payment Success
Ana ödeme akışında kullanıcı üç faturayı seçiyor ve toplam tutarı daha seçim anında görüyor. İnceleme ekranı yalnızca ödeme özetini göstermiyor. Yaklaşan otomatik ödemeleri de fark ederek çift ödeme riskini kullanıcıya açıklıyor.
Koruma seçeneği açık olduğunda yalnızca yaklaşan bir sonraki ödeme atlanıyor. Otomatik ödeme ayarının tamamı kapatılmıyor. Manuel işlem başarısız olursa mevcut talimatlar korunuyor.
Koyu, sakin ve veri odaklı
Arayüzü tam siyah yerine katmanlı koyu yüzeyler üzerine kurdum. Ana zemin, yükseltilmiş sheet alanları ve yüzen navigation birbirinden küçük ton farklarıyla ayrılıyor.
Renk kullanımını sınırlı tuttum. Mavi etkileşimi, yeşil başarıyı, sıcak tonlar ise gerçek riskleri anlatıyor. Fatura kategorileri için birbirinden belirgin dört renk ailesi kullandım. Böylece grafik ile liste arasında doğrudan görsel ilişki kuruldu.
Yüzeyler ve vurgu rengi
Ana zemin#1E1E1E
Yükseltilmiş sheet#323232
Etkileşim vurgusu#4181FF
Ana metin#FAFAFA
Fatura kategori renkleri
Utilities
Elektrik, su ve doğalgaz. Paletin en sıcak ailesi ve listede en sık görünen grup.
- #FFD166
- #FF8A4C
Connectivity
İnternet ve mobil hat. Vurgu mavisinden yeterince uzak durduğu için yan yana geldiklerinde okunabilir kalıyor.
- #B388FF
- #6C63FF
Insurance
Sağlık ve konut sigortası. Yeşil aile yalnızca bu grup ve tamamlanan ödeme için ayrıldı.
- #5EE6C4
- #21A7A1
Subscriptions
Küçük tutarlı düzenli ödemeler. Donut grafikte ince bir dilim olarak görünebilecek kadar parlak.
- #FF7AB6
- #D946EF
Görsel kararlar
- #1E1E1E ana zemin
- Yarı saydam koyu sheet yüzeyi
- 30 px üst radius
- Tam yuvarlak kontroller
- 44 px minimum dokunma alanı
- Manrope uygulama tipografisi
- Kontrollü gradient ve glow
- Minimum yüzde 60 secondary text opacity
- Para değerlerinde güçlü hiyerarşi
Bugünü değil, ödeme sonrasını göstermek
Nakit akışı ana ekranı
Ana ekrandaki en önemli bilgi mevcut bakiye değil, yaklaşan faturalar sonrasında kalacak tutar. Nakit akışı halkası bu iki değer arasındaki ilişkiyi tek bakışta gösteriyor.
Fatura merkezi
Fatura merkezi yaklaşan, planlanmış ve ödenmiş faturaları aynı yerde topluyor. Kurum ikonları ve durum etiketleri listeyi taramayı kolaylaştırırken tutarlar sağ eksende karşılaştırılabiliyor.
Bir faturayı anlamak ve davranışını belirlemek
Elektrik faturası detayı
Elektrik faturası detayında yalnızca güncel tutarı göstermedim. Son altı aylık değişimi görünür hale getirerek yüzde 18’lik artışın nereden geldiğini anlaşılır bir grafikle anlattım.
Akıllı ödeme kuralı
Akıllı ödeme kuralında kullanıcı ödeme zamanını, onay limitini, yetersiz bakiye davranışını ve bildirim zamanını ayrı ayrı belirleyebiliyor. Tasarım otomasyonu hızlandırırken kontrolü kullanıcıda bırakıyor.
Üç faturayı tek kontrol adımıyla ödemek
Kullanıcı üç faturayı seçtiğinde toplam tutar ve ödeme sonrası bakiye anında güncelleniyor. Böylece ödeme inceleme ekranına gelmeden önce işlemin hesap üzerindeki etkisini görebiliyor.
İnceleme ekranında Electricity ve Home internet için yaklaşan otomatik ödemeler tespit ediliyor. Kullanıcı isterse yalnızca bu işlemlerin bir sonraki ödemesini atlayabiliyor. Ayarın tamamı değiştirilmiyor.
Başarı ekranı ödenen faturaları, yeni bakiyeyi ve atlanan ödemeleri tek yerde doğruluyor. Bu sayede kullanıcı işlem sonrasında ne olduğunu tekrar kontrol etmek zorunda kalmıyor.
Sorunu işlem başarısız olmadan önce göstermek
Yetersiz bakiye riski
Yetersiz bakiye senaryosunda sistem yalnızca uyarı vermiyor. Hangi faturanın risk altında olduğunu, ne kadar eksik kaldığını ve bu farkın hangi hesaptan karşılanabileceğini gösteriyor.
Fatura analizleri
Analiz ekranında aylık toplam, ödenen ve yaklaşan tutarlar ile kategori dağılımı aynı bağlamda sunuluyor. Donut grafikteki renkler kategori listesiyle birebir eşleşiyor. Kullanıcı hangi harcama grubunun toplam üzerindeki etkisini hızlıca görebiliyor.
Basit bir işlemden daha geniş bir deneyime
Bu projeye fatura ödeme ekranı tasarlama fikriyle başladım. Akışı detaylandırdıkça asıl problemin ödeme butonunda olmadığını gördüm. Kullanıcıların gelecekteki bakiyeyi anlamaya, otomatik işlemleri kontrol etmeye ve riskleri ödeme gününden önce görmeye ihtiyacı vardı.
Rivo’yu bu ihtiyaçların etrafında şekillendirdim. Ana akış, edge case ekranları ve analiz alanı aynı veri yapısını kullanıyor. Bir ekranda verilen kararın sonraki adımda nasıl sonuçlandığını özellikle görünür tuttum.
Bu çalışma bana finansal ürünlerde iyi bir arayüzün yalnızca güvenilir görünmemesi gerektiğini yeniden hatırlattı. Tutarlar, tarihler ve otomatik işlemler arasındaki ilişki de güvenilir biçimde açıklanmalı.
Tasarımın getirdikleri
Tahmini bakiye ile daha güçlü görünürlük
Çoklu ödeme ile daha kısa işlem akışı
Çift ödeme için kullanıcı kontrollü koruma
Yetersiz bakiye için erken uyarı ve çözüm
Kategori bazlı anlaşılır analiz
Kişiselleştirilebilir otomatik ödeme kuralları