UI/UX vaka çalışması · v2 yeniden tasarım
Credit App
Her tutarın birbirini tuttuğu, ödeme butonunun gerçekten buton gibi göründüğü ve doğrulamanın adım adım yönlendirdiği bir kart cüzdanı ve ödeme akışı.
RolUI/UX Designer
PlatformiOS
Versiyonv1 2021 → v2 2026
AraçlarFigma, Illustrator
01 · Fikir
Para söz konusuysa belirsizliğe yer yok
Kart ödemelerinde kullanıcıyı en çok tedirgin eden şey belirsizlik: hangi kartla ödediği, toplamın neden o kadar olduğu, butona bastığında ne olacağı ve gelen kodun gerçekten kendisi için olup olmadığı.
v2 yeniden tasarımında cüzdan, ödeme özeti ve SMS doğrulaması tek bir tutarlı akışa bağlandı. Hedef üç cümlede özetleniyor: tutarlar toplansın, ödeme butonu buton gibi görünsün, doğrulama yönlendirsin.
02 · Tasarım ilkeleri
Güven veren üç karar
Tutarlar toplanıyor
Ödeme ekranında her kalem, ara toplam, ücret ve toplam aynı hizada; toplam butonun içinde tekrar ediliyor.
Buton gibi görünen buton
Kilit ikonlu, tutarı üzerinde yazan, tam genişlikte tek ana aksiyon; ikincil işlemler görsel olarak geri planda.
Yönlendiren doğrulama
6 haneli kod alanı, kodun gönderildiği maskeli numara, onaylanan tutar ve mağaza, geri sayım ve “bu kodu asla telefonda sormayız” uyarısı.
03 · Ekranlar
Cüzdan, ödeme, doğrulama
Kart sahibi, kart numarası ve tutarlar örnek veridir.
04 · Görsel dil
Güven yeşili, sakin bir mavi
#1F6B4F · Marka yeşili#3A9AD9 · Kart mavisi#4B3BC1 · Ödeme aksiyonu#F4F6F8 · Zemin
Tasarım sistemi v2
Kart, işlem satırı, kısayol butonları ve kod giriş alanı için ortak bileşenler.
Hiyerarşi
Yeşil üst alan bağlamı, beyaz zemin içeriği, mor yalnızca ödeme aksiyonunu taşıyor.
Güvenlik dili
Maskeli numaralar, kilit ikonu ve dolandırıcılık uyarısı kullanıcıya her adımda nerede olduğunu hatırlatıyor.
Araştırma panoları, tüm akışlar ve ekranların tam hâli Behance’teki vaka sunumunda.
Behance’te tam vaka