Mobil Bankacılık Uygulaması ve Tasarım Sistemi
React Native + Expo ile geliştirilen; kod olarak yaşayan tasarım sistemi (belirteçler, WCAG kontrast sözleşmesi, 25 bileşen, DTCG dışa aktarım) üzerine kurulu, 'para transferi 3 dokunuşta' hedefli çalışan dijital banka uygulaması.
- Sektör
- Finans · konsept çalışma
- Yıl
- 2026
- Teknolojiler
- Tasarım Sistemi, React Native, Expo, TypeScript, WCAG 2.2, Design Tokens, Vitest, Playwright
Konsept çalışma, çalışan ürün. Bu proje belirli bir müşteri için değil, uurstudios portföyü için baştan sona geliştirildi. Kod, testler ve ölçüm sonuçları gerçek ve kaynak kodda doğrulanabilir. Benzerini sizin markanız için de geliştirebilirim.
Problem
Bankacılık uygulamalarında para transferi çok adım sürer; ekipler tutarsız buton ve renk kullanır; erişilebilirlik denetimi ancak tasarım bittikten sonra, elle yapılır ve her sürümde yeniden bozulur.
Çözüm
Belirteçler: 6 ilkel renk skalası, iki tema için 30 anlamsal renk rolü, 4 pt boşluk ızgarası, 9 kademeli tipografi ölçeği, 44 pt minimum dokunma hedefi. Kontrast sözleşmesi: 16 metin/zemin çifti için minimum WCAG 2.2 oranı; iki temada birim testleriyle doğrulanır, uygulama içindeki Belirteçler sayfasında canlı hesaplanır, sözleşmeyi bozan renk değişikliği testleri kırar. W3C Design Tokens (DTCG) JSON ve CSS değişkeni dışa aktarımı. 25 bileşenlik kütüphane (Button 4 varyant × 3 boyut, Input, Keypad, Segmented, Toggle, Sheet, Banner, Skeleton…) ve uygulama içi canlı galeri; hiçbir bileşende sabit renk yok. Uygulama: PIN/Face ID girişi, 3 hesap, 3 dokunuşlu transfer (favori → hızlı tutar → onay) ve saf fonksiyonlarda transfer kuralları (Havale/FAST/EFT kanalı, ücret, tek seferlik ve günlük limit, bakiye), mod-97 IBAN doğrulamalı alıcı ekleme, kart dondurma ve limit yönetimi, kategori bütçeleri ve 6 aylık gelir/gider analizi, hedefler, arama ve filtreli işlem geçmişi, bakiye gizleme, tema ve yazı boyutu ayarları. Vitest ile 54 birim testi, Playwright ile 41 kontrollü uçtan uca akış (erişilebilir ad ve dokunma hedefi denetimi dahil), koyu/açık tema ve büyük yazı ekran görüntüleri.
Sonuç
Para transferi gerçekten 3 dokunuşta tamamlanıyor ve testle kanıtlanıyor; 16 kontrast çifti iki temada da AA/AAA geçiyor; 'çok büyük' yazı ölçeğinde gövde metni 21 px'e çıkıyor ve tüm ekranlar bozulmadan yeniden akıyor. Belirteçler DTCG formatında dışa aktarıldığı için web ekibi aynı kaynağı kullanabiliyor. Kaynak kod GitHub'da; gerçek çekirdek bankacılık entegrasyonu kapsam dışı.
Canlı demo
Telefondaymış gibi deneyin
Uygulamanın kendisi, tarayıcıda çalışıyor. Dokunun, kaydırın, form doldurun; verileriniz yalnızca bu tarayıcıda saklanır ve kimseyle paylaşılmaz.
