Qooper - Web Sitesi Yenileme (Re-Design)
Rol
UX, UI, and Motion Design (end-to-end)
Müşteri
Qooper Mentoring Software
Araçlar
Figma, Hubspot, Gemini, CSS/HTML

Çıktılar: Bilgi Mimarisi Yenilemesi, Özel Hubspot Pazarlama Bileşenleri, Kullanım Senaryosu (Use-Case) Odaklı Açılış Sayfaları, Özel Arayüz İllüstrasyonları ve Pazarlama Varlıkları
Temel Etki: Potansiyel Müşteri Kazanımında (Lead Gen) ~%60 Artış, Sitede Kalma Süresinde %40 Yükseliş, Reklam Bütçesi Verimliliğinde Belirgin İyileşme
1. Projenin Arka Planı ve Karşılaşılan Problem
Qooper; İK liderlerine, kurumsal şirketlere, üniversitelere ve derneklere yönelik faaliyet gösteren öncü bir B2B mentorluk ve yetenek geliştirme platformudur. Otomatik Mentor Eşleştirme ve Kurumsal Entegrasyonlar gibi güçlü yetkinliklerine rağmen mevcut web sitesi, hantal ve tekdüze bir mimariye sahipti. Yalnızca yüzeysel tanıtım ekranları sunuyor; genel kitle kategorileri (Şirketler, Üniversiteler, Dernekler) altında kendini tekrar eden içerikler barındırıyordu.
İş Hedefleri ve Dönüşüm Darboğazları
Zayıf Bilgi Mimarisi: Otomatik eşleştirme algoritması, takip panelleri ve sorunsuz İK (HRIS) entegrasyonları gibi platformun asıl gücünü yansıtan özellikler, sayfaların en altında küçük ikonlar olarak kayboluyordu.
Düşük Dönüşüm ve Verimsiz Reklam Harcaması: SEO ve ücretli reklam kampanyaları trafiği çok genel sayfalara yönlendiriyordu. Aklında spesifik bir ihtiyaçla (örn. İşe Alım/Oryantasyon veya DEI/ERG Programları) siteye gelen potansiyel müşteriler aradıkları doğrudan yanıtı bulamıyor; bu da yüksek terk oranlarına ve boşa giden reklam bütçesine neden oluyordu.
Eski Marka Algısı: Ham ve statik ürün ekran görüntüleri, Qooper’ın kurumsal düzeydeki güçlü değer teklifini yansıtmada yetersiz kalıyordu.

(Solda eski, sağda yeni tasarımı görebilirsiniz.)
2. Stratejik Çözüm: "Kullanım Senaryosu Odaklı" Mimariye Geçiş
İş birimi, pazarlama ve satış paydaşlarıyla yakın bir iş birliği içinde çalışarak bilgi mimarisini baştan kurguladım; genel sektör kategorilerinden Çözüm ve Kullanım Senaryosu (Use-Case) Odaklı bir modele geçiş yaptık.[Eski Mimari] ➔ Genel Sayfalar (Şirketler / Üniversiteler) ➔ Düşük Alaka Düzeyi ➔ Yüksek Terk Oranı
[Yeni Mimari] ➔ Hedefe Yönelik Senaryolar (Kurum Geneli / Yeni Çalışan / ERG'ler / Liderlik…) ➔ Kişiselleştirilmiş Mesaj ➔ Yüksek Dönüşüm

Öne Çıkan Tasarım ve UX Kararları
Hedefe Odaklı "Kullanım Senaryosu" Açılış Sayfaları: Siteyi doğrudan yüksek satın alma niyetine sahip kurumsal hedefler etrafında yeniden yapılandırdım:
Kurum Geneli ve Kariyer Mentorluğu
Yeni Çalışan Oryantasyonu ve Eğitimi
Yüksek Potansiyel ve Liderlik Gelişimi
Çalışan Kaynak Grupları (ERG) ve Kapsayıcı Topluluklar
Öğrenci Akran ve Mezun Mentorluğu
Değeri Öne Çıkaran Sayfa Düzenleri: Her senaryo sayfasını; o hedef kitle için en kritik özellikleri, yatırım getirisi (ROI) metriklerini ve referans kanıtlarını sayfanın en üstünde vurgulayacak şekilde kurguladım.
Yazılım Ekranlarından "Pazarlama Görsellerine": Tüm ürün görsellerini sıfırdan ele aldım. Ham yazılım ekranları yerine; eşleştirme akışları ve takip panelleri gibi temel özellikleri net bir görsel hiyerarşiyle öne çıkaran modern, illüstratif pazarlama varlıkları tasarladım.
Stratejik CRO ve Yüksek Niyetli Aksiyon Butonları (CTA): Tamamen duyarlı (responsive), modern bir arayüz hazırladım; doğal kaydırma noktalarına stratejik olarak yerleştirilmiş sabit Müşteri Kazanımı butonları (İnteraktif Demo, Danışmanlık Planla) konumlandırdım.
3. Teknik Kısıtlar ve Tasarım Tercihleri
Hubspot CMS Yetkinlikleri ve Teknik Çözümler:
Kısıt: Hubspot CMS pazarlama ve SEO operasyonları için oldukça güçlü olsa da, modern ve dinamik bir B2B SaaS web tasarımı için sunduğu yerleşik stil ve bileşen esnekliği oldukça sınırlıydı.
Çözüm ve Uygulama: Görsel kaliteden ödün vermek yerine, Figma'da modüler ve tekrar kullanılabilir bileşen kütüphaneleri tasarladım; ardından HTML/CSS ve JavaScript ile doğrudan özel Hubspot şablonları kodladım. Böylece pazarlama ekibinin içerik yönetim akışını bozmadan tam bir tasarım özgürlüğü elde ettik.
4. Uçtan Uca Süreç ve Metodoloji
Keşif ve UX Denetimi: Kullanıcı kaybı yaşanan noktaları, oturum kayıtlarını ve mevcut pazarlama açılış sayfalarını analiz ettim.
Fonksiyonlar Arası Uyum: Hedef anahtar kelimeleri müşterilerin gerçek ihtiyaç ve sorunlarıyla eşleştirmek amacıyla Pazarlama ve Satış liderleriyle ortak atölyeler düzenledim.
Bilgi Mimarisi ve Tel Çerçeve (Wireframe): Yeni site haritalarını, modüler sayfa şablonlarını ve gezinme hiyerarşisini kurguladım.
Görsel Varlık Üretimi ve Bileşen Kütüphanesi: Figma'da projeye özel illüstratif arayüz bileşenleri, ikon seti ve duyarlı (responsive) sayfa düzenleri tasarladım.
CMS Geliştirme: Kusursuz performans, tarayıcı uyumluluğu ve tam mobil uyumluluk sağlamak adına özel Hubspot şablonlarını doğrudan kodlayarak yayına aldım.
5. Temel Sonuçlar ve İş Etkisi
🎯 Müşteri Adayı (Lead) Kazanımında ~%60 Artış: Hedefe yönelik CTA yerleşimleri, net değer önerileri ve kullanıcı profiline özel açılış sayfaları sayesinde nitelikli demo taleplerinde yaklaşık %60 artış sağlandı.
⏱️ Sitede Kalma Süresinde %40 Yükseliş: İlgi çekici görsel anlatım ve amaca yönelik kullanım senaryoları (Use-Case), kullanıcıların sitede geçirdiği süreyi %40 artırdı.
💰 Daha Verimli Reklam Bütçesi ve SEO Performansı: Yeni modüler mimari, pazarlama ekibinin doğrudan hedef kitleye özel reklam kampanyaları ve SEO sayfaları kurgulamasını sağladı; bu da Müşteri Edinme Maliyetini (CAC) belirgin şekilde düşürürken dönüşüm kalitesini yükseltti.
Proje Galerisi






Diğer Projeler
Bağlantıda Kalalım!
Potansiyel projeleri, iş birliklerini ya da tasarım odaklı her türlü fikri konuşmaktan mutluluk duyarım.


