top of page
SuperApp Case Study - Gamze Nadiye Şahin (8).png

Flow

FlowApp, kullanıcıların günlük ihtiyaçlarını tek bir platformda karşılamasını sağlayan bir Super App konseptidir.

Bu uygulama, mesajlaşma, yemek siparişi, market alışverişi, ödeme ve yapay zeka destekli hizmetleri tek bir çatı altında toplayarak hızlı, erişilebilir ve verimli bir kullanıcı deneyimi sunmayı hedefler.

  • Proje Süresi: 1 hafta

  • Kullanılan Araçlar: Figma, Adobe Photoshop

  • Rol: UI/UX  Tasarımcı

  • Hedef Kitle: Günlük işlemlerini daha hızlı ve verimli şekilde tamamlamak isteyen herkes

1. Kullanıcı Problemleri

Kullanıcılar günlük işlemlerini tamamlamak için birden fazla uygulama arasında geçiş yapmak zorunda kalıyor. Bu süreç zaman kaybına ve karmaşık deneyimlere neden oluyor. Kullanıcıların yaşadığı başlıca problemler aşağıda listelenmiştir.

Birden Fazla Uygulama Zorunluluğu

Kullanıcılar farklı ihtiyaçları için farklı uygulamalar indirmek zorunda.

Karmaşık Arayüzler

Uygulamalar arasında farklı tasarım dilleri öğrenmek gerekiyor.

Kişiselleştirme Eksikliği

Kullanıcılara özel önerilerin sınırlı olması.

Yavaş Akışlar

Özellikle ödeme ve sipariş süreçlerinin fazla adım içermesi.

2. Personalar

Yoğun Profesyonel

Adı: Ebru Yılmaz
Yaş: 32

Meslek: İnsan Kaynakları Yöneticisi

Yaşadığı Şehir: İstanbul

İhtiyacı: Günlük işlerini hızlıca halletmek için modern ve pratik bir uygulama arıyor.

Adsız tasarım (4).png

Aile Anne Babası

Adı: Gülcan ve Ahmet Demir

Yaşı: 42 ve 45

Meslek: Ev Hanımı ve Bankacı

Yaşadığı Şehir: Bursa​

İhtiyacı: Tüm aile ihtiyaçlarını (market, yemek, fatura) tek bir platformda yönetmek istiyor.

6.png

Kıdemli Kullanıcı

Adı: Mehmet Aksoy

Yaşı: 58

Meslek: Emekli Öğretmen

Yaşadığı Şehir: Ankara​

İhtiyacı: Sade ve güvenilir bir uygulama ile günlük işlemlerini kolayca halletmek istiyor.

5.png

Genç Kullanıcı

Adı: Can Yıldırım

Yaşı: 24

Meslek: Öğrenci

Yaşadığı Şehir: İzmir​

İhtiyacı: Kampüs hayatında yemek siparişi, toplu taşıma, banka işlemleri ve alışverişi hızlıca yapabileceği bir süper app arıyor.

vecteezy_young-man-handsome-with-casual-clothes-on-white-background_ [Dönüştürülmüş].png

6. Sonuç ve Kazanımlar

Kullanıcı odaklı tasarım: Kullanıcı ihtiyaçlarını merkeze alan, akıcı ve sezgisel bir deneyim sunan bir arayüz oluşturuldu.

Tutarlı tasarım dili: Renk paleti, tipografi ve ikonografi ile marka kimliği güçlendirilerek, modern ve güvenilir bir görünüm elde edildi.

Erişilebilirlik ve kullanılabilirlik: Kullanıcı deneyimini iyileştiren hızlı ödeme akışları, yapay zeka destekli öneriler ve sezgisel navigasyon ile işlem süreçleri daha verimli hale getirildi.

Tekrar edilebilir ve ölçeklenebilir yapı: Bütün ödeme süreçlerinde aynı ekran tasarımı kullanılarak, kullanıcıların farklı işlemleri zorlanmadan tamamlaması sağlandı.

FlowApp’in gelecekteki gelişimi, kullanıcı geri bildirimlerine dayalı iterasyonlarla deneyimi daha sezgisel ve akıcı hale getirmeyi hedefliyor.

Yapay zeka destekli bir asistan eklenerek, sipariş ve ödeme süreçleri daha kişiselleştirilmiş ve verimli bir hale getirilecek. Ayrıca, ulaşım rezervasyonları ve etkinlik biletleme gibi yeni modüllerle uygulamanın kapsamı genişletilecek, böylece FlowApp kullanıcıların günlük işlemlerini kolaylaştıran çok yönlü bir dijital platforma dönüşecek.

7. Geleceğe Yönelik Potansiyel

3. Wireframe

FlowApp’in wireframe aşaması, kullanıcıların temel ihtiyaçlarına göre bilgi hiyerarşisini ve ana akışı belirlemek için oluşturuldu.

Hedefler:

  • Hızlı erişim sağlayacak bir ana sayfa yapısı oluşturmak

  • Ödeme, sipariş takibi ve yapay zeka destekli öneriler gibi temel özellikleri kapsayan ekranları tasarlamak

  • Kullanıcı deneyimini geliştirmek için gereksiz adımları azaltmak

İlk aşamada kağıt üzerinde düşük sadakatli wireframe’ler çizildi. Bu taslaklar üzerinden ana akış netleştirilerek dijital wireframe’lere aktarıldı.

Ana Sayfa (1).png

4. Tasarım Sistemi

  • Renkler: Kullanıcı dostu ve modern bir deneyim sunmak için ana ve ikincil vurgular, okunabilirliği artıran nötr tonlar ile dengelendi.

  • Tipografi: Montserrat ve Inter, hem okunabilirliği yüksek hem de dijital arayüzlere uygun modern yazı tipleri olarak seçildi.

  • İkonografi: Basit ve anlaşılır ikonlar, kullanıcıların navigasyonu hızlı ve sezgisel bir şekilde gerçekleştirmesine yardımcı olur.

#FFFFF0 Kırık Beyaz (4).png

5.1 Ana Sayfa

FlowApp’in ana sayfası, kullanıcıların en sık ihtiyaç duyduğu işlemlere hızlı erişim sağlayacak şekilde tasarlandı.

  • Modüllere Hızlı Erişim: Yemek, market, ödeme ve yapay zeka modüllerine tek dokunuşla erişim.

  • Öne Çıkan Kampanyalar: Kullanıcıya özel fırsatlar.

  • Sık Kullanılanlar Sekmesi: Daha önce yapılan işlemlere hızlı erişim.

  • Sipariş Takibi: Anlık güncellenen sipariş durumu.

Bu yapı, kullanıcıların işlemlerini hızlı ve verimli şekilde tamamlamasını sağlar.

2.png

5.2 Mesajlaşma

FlowApp’in mesajlaşma özelliği, kullanıcıların kolay ve hızlı iletişim kurmasını sağlar.

  • Sohbet Listesi: Önceki konuşmalara hızlı erişim.

  • Bireysel & Grup Sohbetleri: Kullanıcılar, bireysel veya grup sohbetlerini filtreleyerek görüntüleyebilir.

  • Arama Fonksiyonu: Kişi ve sohbetleri kolayca bulma.

  • Yeni Sohbet: Anında yeni sohbet başlatma.

Bu özellikler, iletişim süreçlerini hızlandırarak daha akıcı bir deneyim sunar.

3.png

5.2 Mesajlaşma

Sohbet ekranı, birebir veya grup mesajlaşmalarını destekler.

  • Mesaj Durum İkonları: İletildi, okundu ve ulaştı gibi durumlar.

  • Dosya Paylaşımı: Fotoğraf, video ve belge gönderme.

 

Bu yapı, mesajlaşma deneyimini sezgisel ve etkileşimli hale getirmek için tasarlandı.

4.png

5.3 Ödeme

  • Ödeme işlemlerini hızlı ve pratik hale getiren bu ekran, kullanıcıların kayıtlı kartlarıyla kolayca işlem yapmasını sağlar.

  • Kategorilere göre filtreleme, son işlemleri görüntüleme ve sık kullanılan işlemleri kaydetme özellikleriyle, ödeme süreci daha verimli hale getirilmiştir.

Ana Sayfa.png

5.3.1 Fatura Ödeme Akışı

  • Kullanıcılar, geçmiş faturalarını kolayca görüntüleyebilir ve ödenmemiş faturalar için hızlı ödeme yapabilir.

  • Ödeme özetinin açılıp kapanabilir olması, kullanıcıya detaylı bilgiye ihtiyacı olduğunda erişim sağlarken, ekran karmaşasını da minimumda tutar.

6.png

5.3.2 QR ile Ödeme Akışı

  • QR tarama ekranı, işlemi hızlı başlatmak için optimize edildi.

 

  • Kullanıcılar, fiziksel kart veya IBAN girişi yapmadan doğrudan ödeme gerçekleştirebilir.

7.png

5.3.3 Havale İşlemleri Akışı

  • Kullanıcı, önceden kayıtlı alıcıya veya yeni birine kolayca havale yapabilir, işlemi onayladıktan sonra detaylarını görüntüleyebilir.

  • Ek olarak, yapay zeka destekli bilgilendirme mesajı, ödeme sürecinde kullanıcılara yönlendirme sağlayarak işlemlerin daha akıcı hale gelmesini hedefler.

8.png

5.4 Yemek

  • Kullanıcılar, çeşitli restoranlardan hızlı ve kolay bir şekilde yemek siparişi verebilir.

 

  • Yapay zeka destekli öneriler ve kişiselleştirilmiş kampanyalar sayesinde en uygun seçenekleri değerlendirebilirler.

9.png

5.4.1 Yemek Sipariş Akışı

  • Sipariş süreci, kullanıcının restoran seçiminden ödeme onayına kadar adım adım yönlendirilerek tasarlandı.

  • Basit ve Hızlı Navigasyon: Kullanıcılar, sezgisel arayüz sayesinde restoranlar ve menüler arasında kolayca geçiş yapabilir.

  • Görsel Odaklı Deneyim: Yemek görselleri ve kullanıcı puanlamaları sayesinde daha bilinçli tercihler yapılabilir.

  • Kişiselleştirme Seçenekleri: Kullanıcılar, ekstra malzemeler ekleyerek siparişlerini ihtiyaçlarına göre özelleştirebilir.

10.png

5.4.1 Yemek Sipariş Akışı

  • Akıllı Öneri Sistemi: Kullanıcının geçmiş siparişlerini analiz eden yapay zeka, kişiselleştirilmiş öneriler sunar.

  • Hızlı Ödeme Akışı: Sepet onayından ödeme ekranına kadar minimum adımda işlem tamamlanır.

  • Erişilebilirlik: Büyük butonlar, kontrastlı metinler ve sezgisel simgeler, her yaştan kullanıcı için rahat bir kullanım sunar.

  • Onay ve Sipariş Takibi: Ödeme sonrası detaylı sipariş özeti ile süreç şeffaf hale getirilmiştir.

11.png

5.5 Aktif Siparişler Sekmesi

  • Kullanıcılar, siparişlerinin durumunu anlık olarak takip edebilir ve tahmini teslimat süresini görüntüleyebilir.

  • Canlı takip özelliği, siparişin ilerleyişini daha şeffaf hale getirirken, düzenli bilgi hiyerarşisi ve okunaklı tipografi, kullanıcıların süreci hızlıca kavramasını sağlar. 

12.png

5.6 Geçmiş Siparişler Sekmesi

  • Önceki siparişlere hızlı erişim sağlayan bu ekran, filtreleme özelliği ile belirli siparişleri kolayca bulmayı mümkün kılar.

  • Tek tıkla tekrar sipariş verme özelliği, kullanıcı deneyimini hızlandırırken, renk ayrımları ve görsel ipuçları, farklı sipariş türlerini kolayca ayırt etmeyi sağlar.

13.png

5.7 Market

  • Kullanıcılar, market siparişlerini hızlı ve kolay bir şekilde oluşturabilir. Geniş ürün yelpazesi, kategori bazlı düzenleme ve akıllı filtreleme sistemi, aranan ürünlere zahmetsiz erişim sağlar.

  • Son Sipariş Sekmesi: Önceki siparişlere kolayca erişim sağlayarak tekrar sipariş vermeyi hızlandırır.

  • Yakındaki Marketleri Görüntüleme: Kullanıcının konumuna en yakın marketleri sıralayarak, hızlı teslimat imkanı sunar.

14.png

5.7.1 Market Siparişi Akışı 

  • Kullanıcılar, ürünleri kategori bazında inceleyerek fiyat karşılaştırması yapabilir, bilinçli alışveriş deneyimi yaşayabilir.

  • Akıllı Filtreleme Sistemi: Kullanıcılar, ürünleri fiyat, kategori veya marka bazında filtreleyerek ihtiyacına uygun seçeneklere anında ulaşabilir.

​​

15.png

5.7.1 Market Siparişi Akışı 

  • Tek Tip Ödeme Akışı: Tüm sipariş türleri için aynı ödeme ekranı kullanılarak, alışkanlık oluşturulur ve işlem süresi kısalır.

  • Sepet Önizleme & Fiyat Karşılaştırma: Kullanıcılar, ekledikleri ürünleri ve toplam tutarı ödeme öncesinde detaylıca görebilir.

  • Geri Dön & Onayla Seçenekleri: İşlem sırasında esneklik sunarak, kullanıcıların değişiklik yapmasını veya işlemi tamamlamasını kolaylaştırır.

16.png
bottom of page