Case Study

Kurumsal Web Sitesi Yenileme ve UX-UI Optimizasyonu

Alan: Web Tasarımı & Kullanıcı Deneyimi — Yüksek trafiği dönüşüme çeviren, hızlı ve erişilebilir yeni kurumsal web deneyimi.

Süre: 8 Hafta Kapsam: IA/UX, UI Kit, Performans, SEO Teknik: Next.js · Headless CMS · CDN Uyum: WCAG 2.2 AA · SEO Schema

Özet

Eski sitede yüksek trafik olmasına rağmen kullanıcılar kısa sürede ayrılıyor, dönüşümler düşük kalıyordu. B10’un Journey-driven yaklaşımıyla bilgi mimarisi ve UX akışları yeniden tasarlandı; Core Web Vitals yeşile çekildi, modern UI kit ile marka dili sadeleştirildi. Sonuç: yüklenme süresi −%40, CWV %82 → %100, dönüşüm +%27, etkileşim süresi +%19.

Kilit KPI’lar

Gösterge	Önce	Sonra
Sayfa Yüklenme Süresi	Referans	−%40
Core Web Vitals	%82	%100 (yeşil)
Dönüşüm Oranı	Referans	+%27
Etkileşim Süresi	Referans	+%19
Mobil Etkileşim	Referans	+%30

Başlangıç Durumu

Trafik yüksekti; ancak içerik hiyerarşisi dağınık, mobil kullanılabilirlik zayıftı. LCP/CLS sorunları nedeniyle erken ayrılma oranı yüksekti. Form/CTA tutarsızlıkları ve zayıf güven sinyalleri (referans/rozet) dönüşümleri engelliyordu.

Hedef: 8 haftada hızlı, erişilebilir ve dönüşüm odaklı bir deneyim kurmak; CWV değerlerini tam yeşile taşımak.

Çözüm Adımları

User Journey Analizi: Anasayfa → Servis → Referans → İletişim/teklif akışları; ısı haritası/kayıtlarla doğrulandı.

Bilgi Mimarisi & UX: İçerik kümeleri sadeleştirildi; maks. 3 tık prensibi; net CTA yerleşimi.

Core Web Vitals: Preload/prefetch, lazy-load, kritik CSS inline, font-display swap; 3P script diyeti.

UI & Marka Dili: Light tema, yüksek kontrast, tutarlı spacing, komponent bazlı Design System Kit.

SEO & Schema: Organization, Service, FAQ, Breadcrumb schema; temiz URL, dahili bağ (silo).

Zaman Çizelgesi (8 Hafta)

Hafta	Faz	Odak	Çıktı
1–2	Keşif	Analytics + ısı haritası + anket	Journey & KPI haritası
3–4	IA & Wireframe	Bilgi mimarisi, düşük sadakat prototip	Onaylı akışlar
5–6	UI & Geliştirme	Design System, komponentler, performans	Ön prod yapısı
7	A/B Test	CTA metni, form alanları, hero varyantları	Kazanan varyantlar
8	Go-Live	CWV doğrulama, SEO denetimi	Tam yeşil Core Web Vitals

A/B Test Sonuçları

CTA Metni: “Teklif Al” → “Hızlı Teklif Al” (CTR +%14)

Form Alanı: 8 alan → 5 alan (tamamlama +%22)

Hero Varyantı: Ürün görseli yerine fayda odaklı başlık (scroll derinliği +%18)

Performans Optimizasyonları

Kritik CSS inline; CSS/JS parçalama ve gecikmeli yükleme (defer/async).

CDN + görsel işleme (WebP/AVIF), srcset/sizes; LCP odaklı hero görsel optimizasyonu.

3P script diyeti: yalnızca gerekli etiketler; Tag Manager tetik kuralları.

SSR ve önbellek stratejileri (stale-while-revalidate, incremental static regen).

Erişilebilirlik (WCAG 2.2 AA)

Renk kontrastı ve focus-visible göstergeleri standartlaştırıldı.

Klavyeyle gezinme, “skip to content”, ARIA landmark/labeling.

Form hata mesajları açıklayıcı; label-input ilişkilendirmeleri tamam.

Medya için altyazı ve alternatif metin yönergeleri zorunlu kılındı.

Baseline & Hedefler

Metrik	Başlangıç	Hedef	Gerçekleşen
LCP (mobil, p75)	3.6s	≤2.5s	2.2s
CLS (mobil, p75)	0.19	≤0.10	0.06
INP (mobil, p75)	330ms	≤200ms	180ms
Sayfa Yüklenme	Referans	−%35+	−%40
CR (Conversion Rate)	Referans	+%20	+%27

QA & Doğrulama Planı

Modül	Senaryo	Başarı Kriteri
Performans	Soğuk/ılık cache, 3 cihaz	LCP/CLS/INP hedefleri sağlanır
Erişilebilirlik	Klavye, ekran okuyucu	WCAG 2.2 AA denetiminde “geçer”
SEO/Schema	Rich snippet önizleme	Yapısal veri hatası: 0
Formlar	Alan doğrulama, hata mesajı	Başarı oranı +%20, hata mesajı net
Tarayıcı/CI	Chrome/Firefox/Safari/Edge	Görsel/işlevsel sapma yok

Monitoring & SLA

Canlı İzleme: CWV (LCP/CLS/INP) haftalık rapor; hata oranı ve 404/500 izlemesi.

Performans Bütçesi: JS ≤170KB, CSS ≤90KB (kritik 35KB), ilk byte <0.5s (p95).

Alarm Eşikleri: LCP >2.5s veya INP >200ms olduğunda uyarı ve kök neden analizi (RCA).

Rollback Planı: Anlık geri dönüş için önceki build + env konfigürasyonu hazır tutulur.

Riskler & Önlemler

3P Script Aşırı Yükü: Gereksiz etiketler kaldırıldı; tetik kuralları onaylı.

Media Ağırlığı: WebP/AVIF + responsive kırılımlar; lazy-load.

Bilgi Mimarisi Dağınıklığı: Silo yapısı ve breadcrumb; 3 tık prensibi.

Mobil Kullanılabilirlik: Thumb-zone ve 44px hedef alanları; yapışkan CTA’lar.

UI Kit & Tasarım Sistemi

Tipografi ölçeği (H1–H6, gövde, yardımcı metin), spacing tokens ve grid.

Komponent kütüphanesi: buton, input, kart, tablo, alert, badge, modal.

Durum stilleri: hover/focus/disabled; hata ve başarı bildirimleri.

İçerik Yönetişimi & Handoff

Headless CMS: İçerik rolleri ve yayın akışı (draft → review → publish).

Stil Rehberi: Ton-of-voice, başlık uzunlukları, alt-metin ve link metni ilkeleri.

Değişiklik Günlüğü: Versiyonlama; geri alma (rollback) dokümantasyonu.

Sonuçlar

Gösterge	Önce	Sonra	Etki
Sayfa Yüklenme	Referans	−%40	Çıkma oranında düşüş
Core Web Vitals	%82	%100	Tam yeşil LCP/CLS/INP
Dönüşüm Oranı	Referans	+%27	Form tamamlamaları ↑
Etkileşim Süresi	Referans	+%19	Scroll derinliği ↑
Mobil Etkileşim	Referans	+%30	Mobil UX iyileştirme

Öğrenimler

Journey odaklı IA, içerik keşfini hızlandırıyor; “3 tık” prensibi kritik.

Performans, küçük teknik kararların toplamı; 3P script diyeti şart.

Form sadeleştirme + fayda başlıkları dönüşümün ana kaldıraçları.

WCAG 2.2 AA, erişilebilirliği ve SEO’yu birlikte yükseltiyor.

Sonuç: Modern, hızlı, erişilebilir ve dönüşüm odaklı kurumsal web deneyimi kalıcı hâle geldi.

Mustafa Kemal Atatürk Cd. No:122 K:1 D:2 Odunpazarı-Eskişehir

+90 850 532 3309

[email protected]

Kurumsal Web Sitesi Yenileme ve UX-UI Optimizasyonu

Özet

Başlangıç Durumu

Çözüm Adımları

Zaman Çizelgesi (8 Hafta)

A/B Test Sonuçları

Performans Optimizasyonları

Erişilebilirlik (WCAG 2.2 AA)

Baseline & Hedefler

QA & Doğrulama Planı

Monitoring & SLA

Riskler & Önlemler

UI Kit & Tasarım Sistemi

İçerik Yönetişimi & Handoff

Sonuçlar

Öğrenimler

Güvenilir Stratejiler

Hukuki Keskinlik

Marka Koruma

Dijital İtibar

Stratejik Zekâ

Akıllı İtibar Çözümleri

Akıllı İtibar Çözümleri

Markanızı Korur, Yönetir ve Savunuruz.

Hızlı Erişim

İletişim