Ürün hikâyesini, gerçekten kullanılabilen bir demoya dönüştürmek.
Çalışan mobil uygulama ve kurum paneli hazırdı. Ürün sitesi yalnızca ekran görüntülerini sıralamamalıydı; tek bir sistemin iki tarafını anlaşılır biçimde anlatmalı, topluluk modelini görünür kılmalı ve ziyaretçiye hem uygulamayı hem paneli hikâyenin içinden deneyebilme olanağı vermeliydi.
Canlı ürün sitesini ziyaret et ↗- Rol
- Tasarım yönü ve uygulama
- Proje
- Bağımsız konsept çalışması
- Platform
- Duyarlı web
- İçerik
- Ürün anlatısı ve demolar
- Araçlar
- Codex ve web teknolojileri
- Yayın
- Etkileşimli demolarla yayında

Anlatılması gereken problem
01Uygulama; bildirim, kanıt, açık süreç, topluluk desteği, liderlik ve ödülleri bir araya getiriyor. Kurum panelinde ise önceliklendirme, sahiplenme, süre takibi ve kullanıcı onaylı çözüm var. Bütün özellikleri aynı anda göstermek, anlaşılır bir hikâye yerine yoğun bir özellik listesi oluşturuyordu.
Bu nedenle sayfayı tek bir sıraya yerleştirdim: önce problemi tanımla, telefonun çevresinde bildirim döngüsünü adım adım aç, fiziksel ve dijital sorunlara genişle, son olarak kurumların oluşan sinyali nasıl işlediğini göster.
Benim rolüm
02Bilgi mimarisini, görsel yönü, metin hiyerarşisini ve farklı ekranlardaki davranışı belirledim; ardından siteyi yapay zekâ destekli geliştirme süreciyle uçtan uca hayata geçirdim. İlk ekrandan canlı demolara kadar her iterasyonu tarayıcıda inceleyip düzenledim.
Çalışma; açılış deneyimini, kaydırmaya bağlı mobil ürün hikâyesini, çalışan uygulama alanını, kurum panelini, responsive durumları ve yayına almayı kapsadı.
Deneyimi belirleyen kararlar
03Telefon merkezde sabit kalırken hikâye çevresinde ilerliyor. Her kaydırma adımı tek bir işi anlatıyor: bildir, kanıtla, takip et, doğrula, destekle, liderlik et ve kazan. Böylece arayüzle açıklama aynı anda değişiyor, birbirleriyle yarışmıyor.
Siyah, sıcak beyaz ve sinyal sarısı web sitesiyle ürün arayüzünü aynı kimlikte buluşturuyor. Büyük başlıklar anlatıyı taşıyor; düşük opaklıklı yön ve rota dokusu koyu yüzeylere okunabilirliği bozmadan derinlik katıyor.
En önemli karar demoları gerçekten çalışır hâle getirmekti. Telefon ve kurum paneli dekoratif görsel değil; ziyaretçi akışı kaydırabiliyor, raporları açabiliyor, bölümleri değiştirebiliyor ve panel kontrollerini doğrudan kullanabiliyor.
Responsive davranış
04Masaüstünde genişlik, telefonu açıklamaların arasında sabit tutmak için kullanılıyor. Küçük ekranlarda aynı kurgu dikey okuma akışına dönüşüyor: telefon görünürlüğünü koruyor, özellik notları altına yerleşiyor ve kontroller kullanılabilir dokunma alanında kalıyor.
Kurum paneli masaüstünde geniş çalışma yüzeyini korurken mobilde tablet oranında sınırlı bir pencereye dönüşüyor. Başlık ölçüsü, satır kırılımları ve boşluklar yalnızca küçültülmiyor; her kırılımda yeniden dengeleniyor.
Ortaya çıkan çalışma
05Pazarlama anlatısı ile ürün deneyimini tek sayfada buluşturan canlı bir ürün sitesi ortaya çıktı. Site; bütün bildirim döngüsünü, fiziksel ve dijital kullanım alanlarını, topluluk ve güven mekaniklerini anlatıyor; mobil uygulama ile kurum panelini doğrudan kullanılabilir biçimde sunuyor.
Masaüstü, tablet ve telefon genişliklerinde metin kırılımları, yatay taşma, dokunma alanları ve canlı iframe davranışı kontrol edildi. Bunlar teslim kontrolleri; dönüşüm veya ticari etki ölçülmediği için bu yönde bir sonuç iddiası yok.
- 01
Ürünü öne alan açılış
İlk ekran tek bir vaatle gerçek uygulama arayüzünü buluşturuyor ve telefonu fold içinde görünür tutuyor.

- 02
Hikâyenin içindeki uygulama
Mobil deneyim, bulanık bir maket yerine canlı demoda kullanılan aynı yüksek çözünürlüklü arayüzle gösteriliyor.

- 03
Kurum tarafı
Geniş çalışma paneli; raporları öncelik, sahiplik, süre ve çözüm sinyalleriyle işlenebilir bir kuyruğa dönüştürüyor.

Sonucu deneyin.
Canlı sitede ürün hikâyesini baştan sona izleyin; ardından telefon ve kurum panelini sayfanın içinden doğrudan kullanın.
Canlı ürün sitesini ziyaret et ↗