Skip to content
Neon Apps
Protein Ocean ve Neon Apps logoları koyu mavi bir zeminde yan yana.

Vaka çalışması · Protein Ocean

Protein Ocean

Protein Ocean'ın kapsamlı e-ticaret deneyimini mobil uygulamaya taşıdık.

Protein Ocean ve Neon Apps logoları koyu mavi bir zeminde yan yana.

Protein Ocean'ın mevcut web sitesi, markanın tüm alışveriş süreçlerini bir arada sunuyordu. Mobil uygulamayı da aynı kapsamı karşılayacak şekilde tasarladık ve geliştirdik. Üyelik işlemlerinden sipariş takibine, ürün kataloğundan kampanya koşullarına, sepet avantajlarından sipariş geçmişine kadar tüm deneyimi, web sitesine açılan bir pencere olarak değil, uygulamanın kendi ekranları olarak kurduk.

Kısaca

Protein Ocean, protein, kreatin, amino asit, vitamin ve fonksiyonel gıda ürünlerini doğrudan tüketicilere sunan Türkiye merkezli bir sporcu gıdası markasıdır.

Markanın web sitesi; ürün kataloğu, kampanyalar, ücretsiz kargo ve hediye kazanma koşulları, laboratuvar sertifikaları ve ürünlerin besin değerleri gibi kapsamlı bilgiler içeriyordu.

Neon Apps olarak markanın iOS ve Android mobil uygulamasını tasarladık ve geliştirdik, çalıştığı backend tarafında da yer aldık. İki platform tek bir Flutter kod tabanından çıkıyor. Üyelik ve giriş işlemlerinden ana sayfaya, arama ve kategorilerden ürün detaylarına, sepet ve ödeme süreçlerinden sipariş takibi ve hesap yönetimine kadar tüm deneyimi ortak bir tasarım sistemi üzerine kurduk.

Uygulama ikonunu ve uygulama mağazalarında kullanılacak görselleri de proje kapsamında hazırladık.

Müşteri

Protein Ocean, kendi markası altında protein tozları, kreatin, amino asitler, vitaminler, fonksiyonel gıdalar ve aksesuarlar sunuyor.

Doğrudan tüketiciye satış yapan marka, ürünlerine ait laboratuvar analizlerini yayımlıyor. Ayrıca lansman kampanyaları, indirim kodları, belirli sepet tutarlarında ücretsiz kargo ve daha yüksek tutarlarda hediye seçimi gibi uygulamalarla müşterilerine çeşitli alışveriş avantajları sağlıyor.

Neden bu proje?

Bir e-ticaret deneyimi, yalnızca ürün kataloğundan ibaret değildir.

Ürünlerin nasıl keşfedildiği, kampanya koşullarının nasıl sunulduğu ve sepetin nasıl siparişe dönüştüğü de alışveriş deneyiminin önemli parçalarıdır.

Protein Ocean'ın müşterileri arasında düzenli olarak aynı ürünleri satın alan, tercih ettiği aroma ve boyutu bilen, kampanyaları takip eden kullanıcılar bulunuyor. Bu kullanıcıların web sitesinde alıştıkları özelliklere mobil uygulamada da kolayca ulaşabilmeleri gerekiyordu.

Ancak kapsamlı bir web sitesini mobil ortama taşımak, mevcut sayfaları yalnızca daha küçük ekranlara uyarlamak anlamına gelmiyordu.

On bir farklı aroma seçeneği, aromaya göre değişen besin değerleri, ücretsiz kargo ve hediye kazanma koşullarını gösteren sepet yapısı ve siparişin teslimata kadar takip edilebilmesi gibi özelliklerin her biri, mobil kullanım alışkanlıklarına uygun biçimde yeniden tasarlanmalıydı.

Proje Ekibi

Proje Ekibi

Zorluk

Kapsamlı bir alışveriş deneyimini küçük ekranlara sığdırmak

Tasarım sürecinde Protein Ocean'ın mevcut web sitesini referans aldık. Ancak uygulamanın aynı kapsamı, karmaşık bir menü yapısına dönüşmeden sunması gerekiyordu.

  • 01

    Çok seçenekli bir ürün kataloğu

    Protein Ocean sekiz farklı kategoride satış yapıyor. Tek bir ürün, on bir aroma ve üç farklı boyut seçeneğine sahip olabiliyor.

    Ne aradığını bilen kullanıcıların istedikleri ürüne mümkün olduğunca hızlı ulaşabilmesi, ürünleri keşfetmek isteyenlerin ise kategoriler arasında rahatça gezinebilmesi gerekiyordu.

  • 02

    Alışveriş kararını etkileyen kampanya koşulları

    Ücretsiz kargo belirli bir sepet tutarında, hediye seçimi ise daha yüksek bir tutarda devreye giriyor. Bunlara indirim kodları, lansman kampanyaları ve paket fiyatları da ekleniyor.

    Web sitesinde geniş alanlara yayılarak sunulabilen bu bilgilerin, mobil uygulamada özellikle sepet içerisinde açık ve anlaşılır biçimde gösterilmesi gerekiyordu.

    Böylece kullanıcılar hangi avantajlardan yararlanabileceklerini ve bu avantajlara ulaşmak için ne kadar daha alışveriş yapmaları gerektiğini kolayca görebilecekti.

  • 03

    Detaylı ürün bilgilerini erişilebilir kılmak

    Ürün sayfalarında besin değerleri, aromaya göre değişebilen içerik bilgileri, kullanım önerileri, laboratuvar sertifikaları ve 12.000'e ulaşan kullanıcı yorumları gibi kapsamlı bilgiler bulunuyor.

    Tüm bu bilgileri tek ekranda göstermek, kullanıcı deneyimini karmaşıklaştırabilirdi. Öte yandan bilgileri fazla geri planda bırakmak da kullanıcıların ürünleri değerlendirmesini zorlaştırabilirdi.

    Bu nedenle ürün bilgilerinin kolay erişilebilir, ancak ekranı gereksiz yere kalabalıklaştırmayan bir yapıda sunulması önemliydi.

Yaklaşım

Nasıl tasarlayıp geliştirdik?

Tasarım sürecine doğrudan ekranları oluşturarak değil, markanın mevcut alışveriş deneyimini ve kullanıcı ihtiyaçlarını analiz ederek başladık.

Öncelikle kullanıcıların hangi işlemleri gerçekleştirmek istediğini belirledik. Ardından bu işlemleri mümkün olduğunca az adımda tamamlayabilecekleri kullanıcı akışlarını oluşturduk.

Tüm ekranları ortak bir tasarım sistemi üzerine kurarak uygulamanın farklı bölümlerinde tutarlı bir deneyim sunmayı hedefledik.

İstanbul ofisindeki 85 kişilik Neon Apps ekibi.

İstanbul ofisindeki 85 kişilik Neon Apps ekibi.

Süreç

Çalışma nasıl ilerledi?

  1. Aşama 01

    Keşif

    Protein Ocean'ın mevcut web sitesini kullanıcı bakış açısıyla baştan sona inceledik.

    Ürün kategorilerini, ürün bilgilerini, kampanya mekaniklerini, sepet koşullarını, sipariş durumlarını ve hesap yönetimi özelliklerini analiz ederek mobil uygulamaya taşınması gereken kapsamı belirledik.

  2. Aşama 02

    Tasarım dili

    Farklı renk paletleri ve tipografi seçenekleriyle üç ayrı görsel yaklaşım hazırladık.

    Bu alternatifleri karşılaştırmalı olarak sunduk. Seçilen tasarım yönü; beyaz yüzeyleri, koyu lacivert tonlarını ve belirgin bir turuncu vurgu rengini bir araya getiriyordu.

    Bu yaklaşım, Protein Ocean'ın ürün ambalajlarında kullandığı mevcut görsel kimlikle de uyumluydu.

  3. Aşama 03

    Ekran tasarımları

    Uygulamadaki kullanıcı akışlarını baştan sona tasarladık.

    Yalnızca işlemlerin sorunsuz ilerlediği senaryoları değil; boş sepet, sonuç bulunamayan aramalar, giriş yapılmadan görüntülenen hesap ekranı ve siparişlerin farklı durumları gibi alternatif senaryoları da tasarıma dahil ettik.

  4. Aşama 04

    Geliştirme

    Ekranlar iOS ve Android için Flutter ile geliştirildi, yani iki platform tek bir kod tabanından çıkıyor. Uygulamanın ihtiyaç duyduğu backend çalışması da bunlarla birlikte yürüdü.

    Uygulama ikonu ve mağaza görselleri bunlarla birlikte hazırlandı. Mağaza sayfası ile uygulama da aynı tasarım sisteminden çıkmış oldu.

Teslim Edilenler

Ne yaptık?

Protein Ocean'ın mobil uygulamasını uçtan uca tasarladık ve geliştirdik. Kullanıcıların alışveriş boyunca karşılaştıkları ekranları, arkalarındaki farklı kullanım durumlarını, tüm bu deneyimin üzerine kurulduğu tasarım sistemini ve uygulamanın üzerinde çalıştığı backend tarafını proje kapsamında ele aldık.

  • iOS ve Android uygulaması: tek bir Flutter kod tabanı üzerinde tasarlandı ve geliştirildi. Üyelik, giriş, şifre sıfırlama, ana sayfa, arama, kategoriler, ürün sayfaları, sepet, hediye seçimi, ödeme, siparişler, sipariş takibi, favoriler ve hesap yönetimi.
  • Alternatif kullanıcı durumları: boş sepet, sonuç bulunamayan arama, giriş yapılmadan görüntülenen hesap ekranı ve farklı sipariş durumları.
  • Tasarım sistemi: renkler, tipografi, boşluk düzeni, ortak bileşenler ve geliştirme sürecinde kullanılacak dışa aktarımlar.
  • Backend: uygulamanın çalışması için gereken sunucu tarafı çalışması.
  • Uygulama mağazası görselleri: uygulama ikonu, App Store ve Google Play için hazırlanan görsel materyaller.
Geliştirme

Uygulama, ekran ekran

Uygulamadan seçilen on ekranı, kullanıcıların alışveriş sırasında izledikleri temel adımlara göre ele aldık.

  • Protein Ocean anasayfası: lansman kampanyası bandının altında çok satanlar ızgarası ve sabit navigasyon çubuğu
    Anasayfa
  • Protein Ocean kategoriler ekranı: kampanyalar kartının altında, her birinde ürün sayısı yazan sekiz kategori kutusu
    Kategoriler, her rafın büyüklüğüyle
  • Protein Ocean arama ekranı: son aramalar etiket hâlinde ve görselleriyle birlikte popüler ürün listesi
    Arama, daha hiçbir şey yazılmadan
  • Protein Ocean uygulamasında protein kategorisi: on sekiz ürünlük ızgaranın üzerinde etiketlerle filtreleme
    Bir kategori, yerinde filtrelenmiş
  • Bir Protein Ocean ürün sayfası: galeri, puan, vejetaryen ve glutensiz etiketleri ve on bir aroma seçeneği
    Ürün sayfası
  • Protein Ocean sepeti: ürünlerin üzerinde ücretsiz kargo ve hediye barajlarını işaretleyen bir ilerleme çubuğu
    Sepet, iki barajıyla birlikte
  • Protein Ocean ödeme ekranı: teslimat adresi, kargo ve ödeme, tek ekranda numaralandırılmış üç adım hâlinde
    Üç adımda ödeme
  • Protein Ocean sipariş onayı ekranı: sipariş kodu ve kataloğa geri dönen bir düğme
    Sipariş onaylandı
  • Bir Protein Ocean sipariş detayı ekranı: dört adımlı zaman çizelgesi, sipariş edilen ürünler ve fiyat dökümü
    Siparişi takip etmek
  • Protein Ocean hesap ekranı: siparişler, kişisel bilgiler, adresler, ödeme yöntemleri, destek ve yasal sayfalar
    Hesap
01 Ürünleri keşfetmek

Alışverişi kolaylaştıran bir ana sayfa

Ana sayfada güncel kampanyaları ve çok satan ürünleri ön plana çıkardık.

Ürün kartlarında kampanya rozetleri, aroma seçeneklerinin sayısı, eski ve güncel fiyatlar, kullanıcı puanları ve sepete ekleme butonu yer alıyor. Böylece kullanıcılar, önceden bildikleri ürünleri detay sayfasına girmeden de sepetlerine ekleyebiliyor.

Kategori ekranını ise her kategorideki ürün sayısını gösteren bir ızgara yapısıyla tasarladık. Bu sayede kullanıcılar kategorilerin kapsamını ilgili sayfayı açmadan görebiliyor.

  • Protein Ocean anasayfası: lansman kampanyası bandının altında çok satanlar ızgarası ve sabit navigasyon çubuğu
  • Protein Ocean kategoriler ekranı: kampanyalar kartının altında, her birinde ürün sayısı yazan sekiz kategori kutusu
02 Ürün seçimini kolaylaştırmak

On bir aroma seçeneği ve detaylı ürün bilgileri

Arama ekranında son aramaları ve popüler ürünleri, ürün görselleriyle desteklenen bir yapıda sunduk. Kategori ekranında filtreleme seçeneklerini mevcut ızgara düzenini koruyacak şekilde konumlandırdık.

Ürün detay sayfasında galeri, aroma, boyut ve fiyat bilgilerini ilk ekranda öne çıkardık. Besin değerleri, kullanım önerileri, laboratuvar sertifikaları ve kullanıcı yorumlarını ise açılabilir bölümlere yerleştirdik.

Besin değerleri tablosunu seçilen aromaya göre güncellenecek şekilde tasarladık. Böylece kullanıcıların farklı aromalara ait içerik bilgilerini doğru biçimde inceleyebilmesini hedefledik.

  • Protein Ocean arama ekranı: son aramalar etiket hâlinde ve görselleriyle birlikte popüler ürün listesi
  • Protein Ocean uygulamasında protein kategorisi: on sekiz ürünlük ızgaranın üzerinde etiketlerle filtreleme
  • Bir Protein Ocean ürün sayfası: galeri, puan, vejetaryen ve glutensiz etiketleri ve on bir aroma seçeneği
03 Satın almak ve siparişi takip etmek

Sepetten teslimata uzanan deneyim

Sepette, ücretsiz kargo ve hediye kazanma koşullarına ulaşmak için kalan tutarı gösteren bir ilerleme alanı oluşturduk. Bu alana ek olarak benzer ürün önerilerini ve kolay erişilebilir bir promosyon kodu bölümünü tasarladık.

Ödeme sürecini, tek ekranda takip edilebilen ve numaralandırılmış üç adımdan oluşan bir yapıyla kurguladık.

Sipariş onay ekranında sipariş numarasına yer verdik. Sipariş takibini ise her aşamanın ilgili zaman bilgisiyle gösterildiği bir zaman çizelgesi üzerinden tasarladık. Hesap bölümünde kayıtlı adresleri, ödeme kartlarını, bildirim tercihlerini ve destek seçeneklerini bir araya getirdik.

  • Protein Ocean sepeti: ürünlerin üzerinde ücretsiz kargo ve hediye barajlarını işaretleyen bir ilerleme çubuğu
  • Protein Ocean ödeme ekranı: teslimat adresi, kargo ve ödeme, tek ekranda numaralandırılmış üç adım hâlinde
  • Protein Ocean sipariş onayı ekranı: sipariş kodu ve kataloğa geri dönen bir düğme
Teknoloji

İki platform tek bir Flutter kod tabanından çıkıyor, yani bir değişiklik iOS ve Android'e aynı anda iniyor.

Uygulama, web sitesine açılan bir pencere değil. Her ekran uygulamanın kendi ekranı ve arkalarındaki backend de bu çalışmanın parçasıydı. Kataloğun, kampanya kurallarının ve sipariş geçmişinin telefonda da web sitesindeki gibi davranmasını sağlayan şey bu.

Tüm kullanıcı akışları, alternatif ekran durumları ve ortak bileşenler aynı tasarım sisteminin içinde duruyor. Sonradan eklenecek bir ekranın mevcutlarla aynı dili konuşmasını da bu sağlıyor.

Görsel kimlikte beyaz yüzeyleri, koyu lacivert tonlarını ve belirgin bir turuncu vurguyu bir araya getirdik, tipografide Inter ve Lexend'i kullandık. Sabit alt navigasyon, markanın kendi ürün fotoğrafları ve düzenli kategori ızgaraları da alışveriş deneyimini Protein Ocean'a özgü kılıyor.

Ekip

Mobil ürün geliştirmede deneyimli bir ekip

Neon Apps, İstanbul ve New York'taki 85 kişilik şirket içi ekibiyle mobil ürünler geliştiriyor. Ürün, tasarım ve mühendislik ekiplerinin birlikte çalışması sayesinde fikir aşamasından geliştirmeye kadar bütüncül bir süreç sunuyor.

2019'dan bu yana girişimler ve kurumsal şirketler için iOS, Android ve çoklu platform ürünleri geliştiren Neon Apps, bugüne kadar 300'den fazla müşteri için 600'ü aşkın proje tamamladı. Geliştirilen ürünler 100 milyon kullanıcıya ulaştı ve şirketin müşteri memnuniyeti oranı %98 seviyesinde. Neon Apps aynı zamanda resmi RevenueCat partneridir; abonelik altyapısı ve büyüme alanındaki çalışmalarını da bu iş ortaklığı kapsamında sürdürüyor.

Yayına aldığımız uygulamalardan birkaçı.

Tüm portföyü inceleyin

Sıkça Sorulan Sorular

Bir projeniz mi var?

Bize Ulaşın

Bir projeniz mi var? Girişimler ve global markalar için dünya standartlarında mobil ve web uygulamaları geliştiriyoruz.

Ücretsiz tanışma toplantısı planlayınWhatsApp'tan bize yazın (yeni sekmede açılır)
İletişime Geçin