UX MÜHENDİSLİĞİ
UI / UX — Dönüşüm Odaklı Tasarım
Araştırma, information architecture, design system, prototipleme, usability testing, accessibility ve dev handoff'u tek disiplinde birleştiren ölçülebilir ürün tasarımı.
UX artık 'güzel ekran' değildir; araştırma + IA + design system + prototype + test + accessibility + performance + handoff'un tek operasyona dönüştürüldüğü mühendisliktir.
Kullanıcı davranışı değişti: karar süreleri kısaldı, bekleme eşiği düştü, accessibility artık zorunlu, AI arayüzler statik wireframe mantığını aştı. Çoğu ekip hâlâ 'research olmadan Figma açmak' ve 'design system yerine one-off ekran üretmek' alışkanlığında. Roibase UX operasyonu altı prensip üzerinden kurulur; her birini ölçmek, raporlamak ve iteratif iyileştirmek için metrik tree'leri yazılıdır.
METODOLOJI
6 katmanlı UX mühendisliği operasyonu
Discover → Define → System → Design → Validate → Handoff. Her katman deliverable + sorumlu + SLA ile teslim edilir.
01
DISCOVER
Business goal, stakeholder interview, 5-8 kullanıcı derinlemesine görüşmesi, competitive audit, analytics + session replay incelemesi.
02
DEFINE
Persona + JTBD, problem statement, IA card-sort / tree-test, content audit, user flow + wireframe haritası.
03
SYSTEM
Design token library, component inventory, pattern atlas, motion + a11y prensipleri; Figma variables → kod pipeline.
04
DESIGN
High-fidelity ekranlar + interactive prototype + micro-interaction spec; responsive kırılımlar + dark mode.
05
VALIDATE
Usability test (moderated + remote), accessibility audit, performance budget denetimi, stakeholder review + iterasyon.
06
HANDOFF
Storybook + MDX doc, props/variant matrisi, design QA pipeline, dev eğitim oturumları, 90 gün destek.
— KARŞILAŞTIRMA
Freelance UX vs vanilya ajans vs Roibase UX mühendisliği
Üç yaklaşımın araştırma, sistem, accessibility, dev handoff ve ROI farkı.
| Boyut | Freelance UX | Vanilya ajans | Roibase UX mühendisliği |
|---|---|---|---|
| Araştırma | Yok veya kısa | 1-2 görüşme | 5-8 görüşme + analytics + JTBD |
| Design system | Ad-hoc ekran | Figma stil kütüphanesi | Token-first + component + pattern atlas |
| Usability testing | Genelde yok | Tek tur | Moderated + remote + SUS/SEQ raporu |
| Accessibility | Çoğunlukla göz ardı | Contrast kontrolü | WCAG 2.2 AA + AAA hedef + axe-core |
| Dev handoff | Figma link | Inspect + style guide | Storybook + MDX + props/variant matrisi |
| CRO entegrasyon | Yok | Yok | A/B-hazır varyant sistemi tasarım anında |
| Performans | LCP göz ardı | Nadiren kontrol | Font/motion/image bütçesi önceden |
| TCO 12. ay | Düşük giriş, ekran başı tekrar ücret | Orta ama parçalı | Orta + canlı sistem + süreç disiplini |
KANIT
Rakamlarla sonuç
Kullanıcı testi sonrası 6. ay ortalama; SUS 72 → 84.
IA + onboarding redesign sonrası 90 gün.
Form + error state + empty state redesign etkisi.
Teslim edilen tüm ekranlarda axe-core geçer oranı.
Tasarım aşamasında performans bütçesi belirlenir.
Color, type, spacing, radius, shadow, motion, z-index, breakpoint, opacity, blur, transition, duration.
NELER YAPIYORUZ
Çalışma kapsamı
Her hizmet başlığı, çıktı bazlı ölçülebilir bir iş paketidir. Roibase, strateji ve uygulamayı tek ekip içinde birleştirir.
Discovery + user research
Stakeholder interview, 5-8 derinlemesine kullanıcı görüşmesi, competitive audit + jobs-to-be-done haritalama; problem uzayı önce netleşir.
Information architecture
Card sort + tree test + first-click testi ile gerçekten anlaşılan navigasyon; taxonomy 'içeriden değil dışarıdan' kurulur.
Design system (token-first)
Tokens Studio + Style Dictionary → Figma variables → kod; renk, tipografi, spacing, motion, radius, shadow, state tek kaynaktan.
Component library + pattern atlas
Button, form, nav, card, table, modal, toast, empty state; props + variant + a11y state + responsive kırılım haritası.
High-fidelity prototype
Figma interactive prototype + micro-interaction spec; Rive/Lottie ile motion prototipleme; Lenis/Framer Motion için tech brief.
Usability testing operasyonu
Moderated 5-kullanıcı seri + remote (Maze/Useberry/UserTesting); SUS, SEQ, task completion, time-on-task metrikleri.
Accessibility (WCAG 2.2) audit
axe-core + manuel contrast + keyboard + screen reader (NVDA/JAWS/VoiceOver) denetimi; AA baseline, AAA hedef; KVKK/EAA uyumu.
Design QA + visual regression
Chromatic / Percy / Playwright visual regression; Figma ↔ kod pixel eşleşmesi + component anatomy QA.
CRO entegrasyonu
A/B-hazır varyant sistemi: her component'in 2-3 hypothesis varyantı tasarım aşamasında hazır; VWO/Optimizely için export.
Dev handoff + Storybook
Props/variant/state matrisi, behavior spec, motion timing, responsive breakpoint; Storybook + MDX doc canlı.
— GETİRİLER
Ürün deneyiminizin somut değişimi
Araştırma + sistem + test + accessibility + handoff entegre olduğunda ROI tek metriğe bağlı kalmaz.
Kullanıcı engelleri azalır
Task completion artar, support ticket azalır; ürün 'anlaşılır' olur, onboarding'de kayıp düşer.
Conversion büyür
A/B-hazır varyant sistemi ile CRO disiplini tasarım anında başlar; funnel drop'ları önceden düzeltilir.
Dev hızı artar
Token-first + Storybook + MDX handoff ile ekran başı geliştirme süresi belirgin düşer, hata azalır.
Accessibility yasal risk düşer
WCAG 2.2 AA + EAA (European Accessibility Act 2025) uyumu; denetim geldiğinde evidence hazır.
Marka tutarlılığı artar
Design system ile her kanalda (web, app, email, social, sales deck) aynı kimlik + davranış; marka güveni büyür.
Ölçek kolaylaşır
Yeni ürün / locale / pazar eklenmesi component library sayesinde haftalar yerine günlerle ölçülür.
TESLİMATLAR
Her UX engagement'ında aldıklarınız
Kurulum + 6 aylık operasyon paketinde sabit teslimat listesi; ek ücret sürprizi yok.
UX diagnostic raporu
Analytics + session replay + heuristic audit + competitive benchmark; 40-60 sayfa.
Kullanıcı araştırma bulguları
5-8 derinlemesine görüşme transkripti + temalama, persona + JTBD haritası.
Information architecture seti
Card-sort / tree-test sonuçları, site haritası, user flow, wireframe kitap.
Design token kütüphanesi
Color, type, spacing, motion, shadow, radius, z-index; Tokens Studio + Style Dictionary + kod export.
Component library (Figma + Storybook)
Button, form, nav, card, table, modal, toast, empty state + dark mode + responsive kırılım + a11y state.
Pattern atlas + motion spec
Onboarding, search, filter, checkout, dashboard pattern'leri + Rive/Lottie motion spec dosyaları.
High-fidelity prototype
Interactive Figma prototype + micro-interaction; stakeholder review için kayıt + PDF versiyon.
Usability test raporu
5-8 moderated + 15+ remote katılımcı, SUS/SEQ/task completion, insight + öncelikli aksiyon listesi.
Accessibility audit + remediation
WCAG 2.2 AA/AAA audit, axe-core + manuel test, remediation plan, AR raporu.
Performance bütçesi
LCP/INP/CLS hedefleri, font + image + motion bütçesi, render strategy + monitoring plan.
Dev handoff paketi
Storybook + MDX doc, props/variant/state matrisi, responsive breakpoint, QA checklist.
Runbook + eğitim + 3 aylık destek
Design system runbook, token güncelleme süreci, Figma + code eğitim oturumları, 90 gün destek.
— KAPSAM
Neleri yapıyor, neleri yapmıyoruz
UX mühendisliği scope'u yazılı; sürprizleri ve sonradan ek faturayı önler.
Yapıyoruz
- Kullanıcı araştırması (interview + JTBD + analytics)
- Information architecture (card sort + tree test)
- Design token + component + pattern library
- Figma variables → Style Dictionary → kod pipeline
- High-fidelity prototype + micro-interaction spec
- Usability testing (moderated + remote)
- WCAG 2.2 AA/AAA accessibility audit + remediation
- Performance budget + LCP/INP/CLS hedef
- Design QA + visual regression (Chromatic/Percy)
- Storybook + MDX dev handoff + eğitim
- CRO varyant sistemi (A/B-hazır tasarım)
- Runbook + 90 gün destek
Yapmıyoruz
- Front-end uygulama geliştirme (partner ekiplerle)
- Back-end / DB tasarımı (software ekibinde kalır)
- Marka stratejisi / logo (branding ekibi / ayrı engagement)
- Copywriting / içerik üretimi (UX copy review yapıyoruz)
- Icon / illustration üretimi (telif kütüphaneler + partner)
- Photography / video prodüksiyon
- Uzun vadeli aylık ekran üretimi (sistem kurulur, ekipte içselleşir)
- User research paneli veya incentive ödeme yönetimi (partner lab)
NASIL ÇALIŞIYORUZ
12-16 haftalık kurulum, ardından aylık sistem operasyonu
Hafta 1-2: discovery + stakeholder kickoff
Business goal, stakeholder interview, analytics/session replay incelemesi, kapsam ve hedef metriklerin kilitlenmesi.
Hafta 3-4: user research + JTBD
5-8 derinlemesine görüşme, transkript + temalama, persona + jobs-to-be-done haritası.
Hafta 5-6: IA + content audit
Card sort + tree test, user flow, wireframe haritası, content audit + copy stratejisi.
Hafta 7-8: design system + token + component
Token kütüphanesi, component inventory + pattern atlas, Figma variables + Style Dictionary export.
Hafta 9-10: high-fidelity design + prototype
Ana ekranların high-fi tasarımı + interactive prototype, micro-interaction + motion spec.
Hafta 11-12: usability test + a11y audit
Moderated + remote kullanıcı testi, WCAG 2.2 audit + remediation, performance bütçe kontrol.
Hafta 13-14: iterasyon + stakeholder sign-off
Test bulgularından iterasyon, stakeholder final review, Storybook + dev handoff hazırlık.
Hafta 15+: handoff + dev pipeline + destek
Storybook + MDX doc teslim, dev eğitim oturumları, design QA pipeline, CRO varyant sistemi + 90 gün destek.
— ARAÇ SETİ
Kullandığımız araçlar — vendor-agnostik ama kararlı seçim
Her müşteri için uygun olanı seçeriz; bağımsızlığımızı komisyon almayarak koruruz.
DESIGN & PROTOTYPING
RESEARCH & TESTING
ACCESSIBILITY & QA
HANDOFF & ANALYTICS
SIK SORULAR
Sık sorulan sorular
— SÖZLÜK
UX mühendisliği temel kavramları
Tasarım, geliştirme ve ürün ekiplerinizin ortak dili.
- Jobs-to-be-Done (JTBD)
- Kullanıcının bir ürünü kullanarak gerçekleştirmek istediği somut işi (job) tanımlama çerçevesi; persona yerine davranış ve bağlam odaklı.
- Information Architecture (IA)
- Bir ürünün içerik ve işlevlerinin kullanıcının zihinsel modeliyle eşleşecek şekilde organize edilmesi; card sort + tree test ile doğrulanır.
- Design Token
- Renk, tipografi, spacing, motion gibi tasarım kararlarının platform-bağımsız değişkenler olarak ifadesi; Figma variables + Style Dictionary + kod pipeline ile tek kaynaktan dağıtılır.
- Design System
- Token + component + pattern + guideline + governance katmanlarının bir araya geldiği, tasarım ve geliştirme için tek doğruluk kaynağı.
- WCAG 2.2
- Web Content Accessibility Guidelines 2.2; A, AA ve AAA seviyesinde başarı kriterleri; 9 yeni kriter (2023) klavye, focus, drag, target size başlıklarında; AA endüstri baseline.
- System Usability Scale (SUS)
- 10 maddelik standart anketle bir arayüzün kullanılabilirliğini 0-100 arası puanlayan ölçek; > 68 ortalama üstü, > 80 mükemmel eşiği.
- Single Ease Question (SEQ)
- Bir görevin tamamlanmasından hemen sonra 1-7 skalada zorluk algısını ölçen tek soruluk metrik; SUS'un görev-seviyesi tamamlayıcısı.
- Largest Contentful Paint (LCP)
- Sayfanın ana görsel içeriğinin kullanıcıya görünür hale geldiği zaman (Core Web Vitals); < 2.5s iyi. Tasarım aşamasında font + image + render bütçesiyle kontrol edilir.
- Interaction to Next Paint (INP)
- Kullanıcı etkileşiminden sonraki en uzun işleme kadar geçen sürenin tepe değeri (Core Web Vitals); < 200ms iyi. FID'in 2024'teki halefi.
- Storybook
- Component'leri izole ortamda geliştirme + dokümantasyon + QA aracı; MDX ile tasarım-geliştirme handoff dokümantasyonu canlı yaşar.
- Visual Regression Testing
- UI bileşenlerinin kod değişikliklerinden sonra görsel olarak aynı kaldığını Chromatic / Percy / Playwright ile otomatik doğrulama; design drift önlenir.
- European Accessibility Act (EAA)
- AB'nin 28 Haziran 2025'te yürürlüğe giren erişilebilirlik direktifi; e-ticaret, bankacılık, ulaşım, telekom için WCAG 2.2 AA zorunlu hale getirdi.
- Component Library
- Design system'in koda dökülmüş yarı; React/Vue/Swift komponent'lerin tek bir versiyonlu paket halinde tutulduğu kütüphane. Storybook ile görsel test, Chromatic ile visual regression. shadcn/ui, MUI, Ant Design, Radix UI, Headless UI yaygın seçimler.
- Visual Hierarchy
- Tasarımın hangi elementinin önce, hangisinin sonra fark edileceğini bilinçli yönlendiren ilke. Boyut, kontrast, renk, beyaz alan, tipografi weight, pozisyon araçları. F-pattern (text-heavy) vs Z-pattern (visual-heavy) eye-tracking modelleri tasarımcının başvuru kitabı.
— KARAR AĞACI
UX mühendisliği operasyonu size uygun mu?
4 soruya Evet/Hayır cevap verin; sonuç net olsun.
01 / 04
Canlı bir dijital ürününüz (web/app/SaaS) veya 3-6 ayda launch planınız var mı?
Araştırma + sistem + test operasyonunun ROI için asgari eşik.
— BAŞLAYALIM
Tasarım tahminden öğrenmeye dönüştürelim.
1 saatlik UX diagnostic ile mevcut akışınızı analytics + heuristic + a11y lensiyle inceliyor, en riskli varsayımları ve quick-win'leri gösteriyoruz.