Gaye DinçUI/UX Designer / Frontend Developer
Çalışmalarıma Dön
UI/UX CASE STUDY · 2026

ZAYFIX QRAKTER

Zayfix QRakter; araç kullanıcılarının acil durum bilgilerini hazırlamasını, evraklarını yönetmesini ve kaza anında Bireysel veya Paylaşımlı dijital kaza tespit tutanağı oluşturmasını sağlayan mobil bir araç ve topluluk uygulamasıdır.

Beş adımlı tutanak akışı; sürücü ve araç bilgilerinden darbe noktalarına, kaza fotoğraflarından senaryo çizimine, kontrol ve imzaya kadar süreci tek yerde yönetir. Motosiklet kullanıcıları ve kuryelerin hareket hâlindeki ve eldivenli kullanım koşulları kritik aksiyonların görünürlüğünü şekillendirdi.

Rol
UI/UX Tasarımı ve Frontend Desteği
Platform
Mobil · Android uygulaması / iOS mobil web erişimi
Araçlar
Figma · TypeScale
Hedef kullanıcı
Araç kullanıcıları; yoğun olarak motosiklet kullanıcıları ve kuryeler
Kaza ve araç işlemlerini önceliklendiren Zayfix QRakter ana sayfası
Profil tamamlama, Tutanaklarım ve tutanak detayı ekranları

Kaza öncesinde hazırlanan bilgileri, kaza anındaki yoğun veri girişini ve kaza sonrasındaki takip ihtiyaçlarını tek mobil sistemde yönetmek.

01

Ürün bağlamı

Zayfix QRakter, kaza sürecini yalnızca olay anına indirgemez. Kullanıcı profil, sağlık, araç ve evrak bilgilerini önceden hazırlayabilir; QR Acil Durum Kartını oluşturup fiziksel QR kodunu hesabıyla eşleştirebilir. Kaza anında Bireysel veya Paylaşımlı tutanak başlatır ve kayıtlarını Tutanaklarım alanında takip eder.

02

Tasarım problemi

Kaza tutanağı sürücü, araç, sigorta, konum, fotoğraf, darbe noktası, açıklama, tanık, senaryo ve imza verilerinin kontrollü tamamlanmasını gerektiriyordu. Stresli, hareket hâlindeki veya eldivenli kullanımda ilerlemeyi ve eksikleri görünür kılmak gerekiyordu.

03

Yaklaşım

Ürün yaşam döngüsünü kaza öncesi, kaza anı ve kaza sonrası olarak yapılandırmak; karmaşık akışları adımlara ayırmak ve kritik aksiyonları gerçek kullanım koşullarına göre önceliklendirmek.

Kullanıcının gerekli bilgileri önceden hazırlamasından tutanağı tamamlayıp kaza sonrası hizmetlere ulaşmasına kadar devam eden yapı.

01

Bilgileri önceden hazırlamak

Profil, sağlık, araç, sigorta ve evrak bilgileri hazırlanır; QR Acil Durum Kartı oluşturulur. Hazırlanan bilgiler QR kartta ve tutanakta yeniden kullanılabilir.

  • Profil
  • Sağlık ve acil durum bilgileri
  • Araçlar ve evraklar
  • QR Acil Durum Kartı
02

Kaza ve tutanak sürecini yönetmek

SOS, 112 veya Kaza Destek Hattına ulaşılır; Bireysel ya da Paylaşımlı tutanak başlatılır. Beş adımda taraf, araç, sigorta, kanıt, senaryo, imza ve doğrulama tamamlanır.

  • SOS ve 112
  • Yeni Tutanak
  • Tutanağa Katıl
  • Beş adımlı Kaza Odası
03

Kayıtları takip etmek ve hizmetlere ulaşmak

Tutanak önizlenir, indirilir ve paylaşılır. Taslak, devam eden ve tamamlanan kayıtlar izlenir; çekici, servis ve sigorta iletişimine ulaşılır.

  • Tutanaklarım
  • İndirme ve paylaşma
  • Yakındaki Hizmetler
  • Çekici, servis ve sigorta

Uygulamanın girişten profil ve evrak yönetimine, QR Acil Durum Kartından beş adımlı tutanak sürecine, kulüplerden topluluk ve ödül alanlarına kadar bütün mobil arayüzlerini Figma üzerinden tasarladım. Geliştirilen ekranların tasarımla uyumunu korumak için gerektiğinde doğrudan kod üzerinden sınırlı frontend desteği verdim.

Ürün akışları ve bütün arayüz tasarımı

Kaza öncesi hazırlıktan tutanak ve kaza sonrası takibe, kulüplerden topluluk ve ödül alanlarına kadar bütün mobil arayüzleri tasarladım.

Kaza tutanağı bilgi mimarisi

Yoğun tutanak sürecini beş aşamaya ayırdım; Bireysel ve Paylaşımlı kullanımı, tarafların katılımını ve imza öncesi kontrol noktalarını tasarladım.

Form ve veri yönetimi

Profil, evrak ve tutanaklarda kategorileri, filtreleri, validation durumlarını, otomatik doldurma ve kullanıcı doğrulama adımlarını birlikte ele aldım.

Frontend desteği

Spacing, hizalama, input tutarlılığı, filtreleme, accordion, validation ve yönlendirici bilgi kutularında doğrudan kod desteği verdim.

Kaza yaşam döngüsünü, gerçek kullanım koşullarını ve teknik uygulanabilirliği birlikte ele aldığım tekrar eden süreç.

  1. 01

    Ürün yaşam döngüsünü anlamak

    Kaza öncesinde hazırlanan bilgilerden tutanak ve kaza sonrası takibe uzanan bütün akışı değerlendirdim.

  2. 02

    Bilgi ve işlem önceliklerini kurmak

    Acil durum, profil, evrak, QR kart, tutanak ve destek işlemlerini ihtiyaç anına göre gruplandırdım.

  3. 03

    Karmaşık akışları adımlara ayırmak

    Sürücü, araç, sigorta, kanıt, senaryo ve imza bilgilerini kontrollü aşamalara böldüm.

  4. 04

    Rol ve sistem durumlarını tasarlamak

    Bireysel ve Paylaşımlı tutanakları, kullanıcı rollerini ve taslak, devam eden, tamamlanan durumları ayrı ele aldım.

  5. 05

    Geliştirme ve revize

    Akışları geliştirici ekiple değerlendirdim, geri bildirimlerle revize ettim ve gerektiğinde kod üzerinden destek verdim.

Gerçek kullanım sorunlarını görünür, erişilebilir ve uygulanabilir ürün kararlarına dönüştürmek.

01

Karmaşık kaza tutanağını kontrollü bir adımsal akışa dönüştürmek

Problem

Tutanak çok sayıda sürücü, araç, sigorta, darbe, kanıt, senaryo ve imza bilgisi gerektiriyordu.

Neden bu yolu seçtim?

Stresli kullanımda kullanıcı yalnızca o anda tamamlayacağı bilgi grubuna odaklanmalıydı.

Nasıl uyguladım?

Süreci Sürücü ve Araç Bilgileri, Kaza Detayları ve Kanıtlar, Kaza Senaryosu, Önizleme ve Kontrol, İmza ve Onay olarak beş adıma ayırdım. Bireysel Tutanakta bilgiler tek cihazdan; Paylaşımlı Tutanakta tarafların kendi cihazlarından tamamlanmasını tasarladım.

Oluşturduğu yapı

İlerlemenin görülebildiği, eksiklerin imzadan önce düzeltilebildiği kontrollü dijital tutanak.

Tutanak başlangıcı ve Bireysel veya Paylaşımlı tutanak seçimi
Beş adımlı dijital kaza tespit tutanağı akışı
02

Kaza öncesinde hazırlanan bilgileri yeniden kullanmak

Problem

Kimlik, sağlık, araç ve sigorta bilgilerinin kaza anında yeniden girilmesi yükü ve hata riskini artırabilirdi.

Neden bu yolu seçtim?

Bilgiler olaydan önce hazırlanmalı ve kritik akışlarda yeniden kullanılmalıydı.

Nasıl uyguladım?

Profili kategorilere ayırdım. Bilgileri QR Acil Durum Kartı ve tutanakla ilişkilendirdim; Vatandaş, Polis/Jandarma ve Sağlık görevlisi için gizlilik ayarları, fiziksel QR eşleştirme ve anahtarlık, kask, motosiklet, cüzdan kartı ve araç camı şablonları tasarladım.

Oluşturduğu yapı

Kritik anda sıfırdan başlamayı önleyen bağlantılı hazırlık sistemi.

Profil, QR Acil Durum Kartı, gizlilik ayarları ve QR şablonları
Kaza öncesinde hazırlanan bilgilerin QR kart ve tutanakta yeniden kullanımı
03

Şans Çarkında katılım koşullarını ve sonuç durumlarını görünür kılmak

Problem

Kullanıcının çarka hangi koşullarda katılabileceği, profilindeki eksiklerin neden katılımı engellediği ve sonuç sonrasında ne yapacağı açık olmadığında akış belirsizleşiyordu.

Neden bu yolu seçtim?

Ödül deneyiminde yalnızca sonucu göstermek yeterli değildi; katılım koşulu, mevcut durum ve sonraki aksiyon da anlaşılır olmalıydı.

Nasıl uyguladım?

Normal Şans Çarkı ekranına ek olarak, zorunlu profil bilgileri eksikken katılımı durduran ve tamamlanması gereken alanları gösteren bir durum tasarladım. Kazanılmayan sonuçta ise yeni çevirme hakkının ne zaman açılacağını ve kullanıcının sonraki adımını görünür hâle getirdim.

Oluşturduğu yapı

Normal, katılımı engellenmiş ve sonuç durumlarını birbirinden ayıran; kullanıcıya her aşamada ne yapacağını gösteren durum bazlı ödül deneyimi.

Şans Çarkının normal, profil bilgileri eksik olduğu için katılımın engellendiği ve kazanılmayan sonuç durumları
Katılım koşulunu, engellenmiş durumu ve sonucu ayrı ele alan Şans Çarkı deneyimi.
04

Ana sayfayı kaza ve araç işlemleri merkezine dönüştürmek

Problem

Küçük SOS ve 112 alanları eldivenle zor kullanılıyor, araç ve kaza işlemleri dağınık kalıyordu.

Neden bu yolu seçtim?

Ana sayfa kaza öncesi, anı ve sonrası işlemleri için hızlı başlangıç merkezi olmalıydı.

Nasıl uyguladım?

SOS ve 112’yi büyüttüm; QR kart, profil, evraklar, Yeni Tutanak, Tutanaklarım ve Kaza Destek Hattını önem sırasına göre düzenledim.

Oluşturduğu yapı

Hareket hâlindeki kullanıcının kritik işlemlere tek noktadan ulaştığı merkez.

Kaza ve araç işlemlerini önceliklendiren Zayfix QRakter ana sayfası
Kritik işlemlere hızlı erişim sağlayan ana sayfa
05

Profil ve tutanakları takip edilebilir hâle getirmek

Problem

Uzun profil ve yalnızca geçmiş kayıt gibi sunulan tutanaklar, eksikleri ve yarım kalan işleri belirsizleştiriyordu.

Neden bu yolu seçtim?

Kullanıcı mevcut durumunu ve devam edeceği noktayı görmeliydi.

Nasıl uyguladım?

Profili accordion kategorilerine ayırıp tamamlanma durumunu gösterdim. Tutanakları Taslak, Devam Eden ve Tamamlanan olarak ayırdım; tip, tarih, konum ve katılımcı sayısını kartlarda sundum.

Oluşturduğu yapı

Kişisel hazırlığı ve kaza kayıtlarını durum bazlı sürdüren takip yapısı.

Profil tamamlama, Tutanaklarım ve tutanak detayı ekranları
Profil ve tutanakların durum bazlı takibi
06

Kulüp deneyimini kullanıcı rolüne göre farklılaştırmak

Problem

Kulüp sahibiyle standart kullanıcıya aynı aksiyonların gösterilmesi, yönetim yetkileriyle normal üyelik işlemlerini birbirine karıştırıyordu.

Neden bu yolu seçtim?

Kullanıcı yalnızca kendi rolüne ait işlemleri görmeli, kulübün temel bilgileri ise her iki rolde de tutarlı kalmalıydı.

Nasıl uyguladım?

Kulüp sahibine yeni duyuru oluşturma, katılım isteklerini yönetme, çekiliş düzenleme, kulüp bilgilerini düzenleme ve silme talebi oluşturma gibi yönetim aksiyonları sundum. Standart kullanıcıda ise duyurular, kulüp bilgileri ve kulübe katılma aksiyonunu önceliklendirdim.

Oluşturduğu yapı

Aynı kulüp yapısını korurken yönetici ve üye görevlerini açık biçimde birbirinden ayıran rol bazlı deneyim.

Kulüp sahibi ve standart kullanıcı için farklı aksiyonların sunulduğu kulüp profil ekranları
Kulüp yönetimi ve standart üyelik işlemlerinin kullanıcı rolüne göre ayrıştırılması.

Tasarımın yalnızca Figma üzerinde doğru görünmesi değil, geliştirilen üründe aynı akışları ve davranışları koruması önemliydi.

Ana sayfa, profil, QR kart, tutanak, kulüpler ve topluluklar gibi çok sayıda rol, veri ve ekran durumu içeren alanların akışlarını geliştirici ekiple birebir değerlendirdim. Bireysel ve Paylaşımlı tutanaklarda tarafların katılımını ve form durumlarını birlikte netleştirdik.

Rolüm bütün frontend geliştirmesini tek başıma üstlenmek değildi; tasarım kararlarını korumak ve ihtiyaç duyulan noktalarda doğrudan UI/frontend desteği vermekti.
  • Kodlanan ekranların Figma ile karşılaştırılması
  • Spacing, hizalama ve boyut sorunlarının kodda düzeltilmesi
  • Input tutarlılığı, filtreleme ve validation
  • Profil accordion ve yönlendirici bilgi kutularının kodlanması
  • Değişken veri uzunluklarının kontrolü

Proje, gerçek kullanım koşullarını tasarım ve uygulama arasında birlikte düşünmenin önemini gösterdi.

Karmaşık işlemler tek ekrana sığdırılmamalıdır

Tutanak bilgilerini anlamlı adımlara ayırmak, kullanıcının bulunduğu aşamaya odaklanmasını sağladı.

Önceden hazırlanan veri kritik anda yükü azaltır

Profil, sağlık, araç ve sigorta bilgilerinin QR kart ve tutanakta yeniden kullanılması tekrar girişi azalttı.

Otomasyon kullanıcı kontrolünün yerine geçmemelidir

Poliçe analizi veri girişini hızlandırırken resmi belgeyle karşılaştırma sorumluluğu açık kalmalıydı.

Dokunma hedefi kullanım koşuluna göre değerlendirilmelidir

Kritik aksiyonların kalın motosiklet eldiveniyle kullanım koşullarına göre değerlendirilmesi gerektiğini gördüm.