B2B Kahve Danışmanlığı · 2026
Coffee'in Beans
Doğru kahveyi işletmenin gerçek karakteriyle eşleştiren sinematik deneyim.
Next.js 16React 19TypeScriptGSAPLenis
Proje seçkisi
Diğer case study’ler.
Projeler arasında geçiş yaparak farklı sektörler için geliştirdiğimiz ürünleri inceleyin.
Sıradaki proje
Cep Dünyası
Teknoloji satışını, ödemeyi ve satış sonrası desteği tek platformda birleştirdik.
Moda E-ticaret · 2026
AURA Butik
Moda e-ticaretini ve mağaza operasyonlarını tek uygulamada birleştirdik.
Sanat & Kültür · 2026
Ayhan Güneş Filografi
Filografi sanatını editoryal bir dijital galeri ve yönetilebilir eser kataloğuyla buluşturduk.
Yeme-İçme / Özel Kahve · 2026
GURU Coffee
Kahve, cookie ve topluluk odağını hareketli bir dijital deneyimde buluşturduk.
Görüntüleniyor
Coffee'in Beans
Doğru kahveyi işletmenin gerçek karakteriyle eşleştiren sinematik deneyim.
01 · Proje akışı
Coffee'in Beans, işletmelere özel kahve seçimi, numune, tadım ve tedarik danışmanlığını sinematik bir B2B marka deneyimine dönüştüren tek sayfalık Next.js prototipidir.
Amaç
Doğru kahveyi işletmenin gerçek karakteriyle eşleştiren sinematik deneyim.
Problem
Kafe, restoran, otel ve ofislerin farklı kavurucular arasından işletmesine uygun kahveyi numune, tat ve fiyat dengesiyle seçmesi karmaşık bir danışmanlık süreci gerektiriyordu.
Çözüm
Marka yaklaşımını, dört adımlı seçim sürecini, kahve eşleştirme laboratuvarını, başarı hikâyelerini ve numune talebini tek sayfalık etkileşimli bir B2B deneyimde birleştirdik.
Sonuç
4 aşama Süreç · 3 soru Eşleştirme · Tek sayfa Deneyim
02 · WireframeÖnce iskelet.
Önce iskelet.
Sonra duygu.
Her ekran, dekorasyondan önce net bir görevi yerine getiriyor.
- 01
Bilgi Mimarisi
Marka vaadini ve numune talebi aksiyonunu sinematik hero alanında öne çıkardık.
- 02
Low-Fi
Yaklaşım, kurucu hikâyesi ve dört adımlı çalışma sürecini uzun sayfa anlatısında katmanladık.
- 03
Prototip
İşletme ihtiyacını üç soruda yorumlayan etkileşimli kahve eşleştirme akışını tasarladık.
- 04
Onay
Başarı hikâyeleri, satış sonrası destek, fotoğraf galerisi ve iletişim formunu güven yolculuğuna bağladık.
03 · UI DesignMarka DNA’sı,
Marka DNA’sı,
piksel seviyesinde.
Aa
Instrument Serif
Başlıklarda karakter. Gövdede Inter ile berraklık ve tempo.
Sinematik tam ekran görsel anlatı
GSAP tabanlı scroll ve tipografi animasyonları
İnteraktif üç soruluk kahve eşleştirme
Yatay içerik ve hover galeri etkileşimleri
Hareket azaltma tercihine duyarlı deneyim
04 · TeknolojiGüzel görünen.
Güzel görünen.
Sağlam çalışan.
Hareketin altında hız.
Next.js 16 App RouterReact 19TypeScriptTailwind CSS 4GSAPLenis
SSR ve akıllı önbellekleme
Erişilebilir motion sistemi
Core Web Vitals odağı
Görünmeyen omurga.
Next.js Route HandlerZod benzeri form doğrulamaDemo numune talep API'si
Tip güvenli API katmanı
İzlenebilir event mimarisi
Ölçeklenebilir veri modeli
05 · Admin PanelKontrol,
Kontrol,
tek bakışta.
Numune talep formu
Ekiplerin günlük işlerini daha az tıklama, daha açık geri bildirimle tamamladığı operasyon katmanı.
İşletme türü ve iletişim alanları
Ekiplerin günlük işlerini daha az tıklama, daha açık geri bildirimle tamamladığı operasyon katmanı.
Gönderim durum geri bildirimi
Ekiplerin günlük işlerini daha az tıklama, daha açık geri bildirimle tamamladığı operasyon katmanı.
CRM entegrasyonuna hazır API yapısı
Ekiplerin günlük işlerini daha az tıklama, daha açık geri bildirimle tamamladığı operasyon katmanı.
06 · Proje GalerisiDetaylar,
Detaylar,
bütünü kurar.
Projenin gerçek masaüstü, mobil ve yönetim paneli ekranları.
Sinematik marka hero deneyimi
Marka manifestosu ve yaklaşım
Kahvenin arkasındaki isim
Dört adımlı kahve seçim süreci
Kahve Eşleştirme Laboratuvarı
İşletme başarı hikâyeleri
Fotoğraf galerisi ve numune talebi
Mobil ana sayfa deneyimi
Mobil kahve eşleştirme