bugreports. ürün sitesi · Bağımsız çalışma · 2026

Ü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
Ürün mesajı ve mobil uygulamayla bugreports ürün sitesi açılışı
Canlı ürün sitesinin masaüstü görünümü.

Anlatılması gereken problem

01

Uygulama; 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

02

Bilgi 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

03

Telefon 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ış

04

Masaü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

05

Pazarlama 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.

    Ürün mesajı ve mobil uygulamayla bugreports ürün sitesi açılışı
  • 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.

    bugreports mobil uygulama ana ekranı
  • 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.

    bugreports kurum paneli genel bakış ekranı

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 ↗