UX-ENGINEERING
UI / UX — Conversion-orientiertes Design
Messbares Produktdesign, das Research, Information Architecture, Design-System, Prototyping, Usability Testing, Accessibility und Dev-Handoff in einer Disziplin vereint.
UX ist nicht mehr der 'schöne Screen'; es ist Engineering, in dem Research + IA + Design-System + Prototype + Test + Accessibility + Performance + Handoff zu einer einzigen Operation verschmelzen.
Das Nutzerverhalten hat sich verändert: Entscheidungszeiten sind kürzer, die Wartetoleranz ist gesunken, Accessibility ist Pflicht, und KI-Interfaces haben die Logik statischer Wireframes überholt. Die meisten Teams hängen noch an der Gewohnheit, 'Figma ohne Research zu öffnen' und 'One-Off-Screens statt Design-System zu produzieren'. Die UX-Operation von Roibase steht auf sechs Prinzipien — für jedes davon sind Metric Trees zur Messung, zum Reporting und zur iterativen Verbesserung schriftlich festgehalten.
METHODIK
6-schichtige UX-Engineering-Operation
Discover → Define → System → Design → Validate → Handoff. Jede Schicht wird mit Deliverable + Verantwortlicher + SLA geliefert.
01
DISCOVER
Business Goal, Stakeholder-Interviews, 5-8 Nutzer-Tiefeninterviews, Competitive Audit, Analyse von Analytics + Session Replays.
02
DEFINE
Persona + JTBD, Problem Statement, IA Card-Sort / Tree-Test, Content-Audit, User-Flow- + Wireframe-Karte.
03
SYSTEM
Design-Token-Library, Component-Inventar, Pattern Atlas, Motion- + a11y-Prinzipien; Figma Variables → Code-Pipeline.
04
DESIGN
High-Fidelity Screens + Interactive Prototype + Micro-Interaction Spec; Responsive Breakpoints + Dark Mode.
05
VALIDATE
Usability-Test (Moderated + Remote), Accessibility Audit, Prüfung des Performance-Budgets, Stakeholder-Review + Iteration.
06
HANDOFF
Storybook + MDX-Doku, Props/Variant Matrix, Design-QA-Pipeline, Dev-Trainingssessions, 90 Tage Support.
— VERGLEICH
Freelance UX vs. Vanilla-Agentur vs. Roibase UX-Engineering
Wie sich drei Ansätze in Research, System, Accessibility, Dev-Handoff und ROI unterscheiden.
| Dimension | Freelance UX | Vanilla-Agentur | Roibase UX-Engineering |
|---|---|---|---|
| Research | Keins oder kurz | 1-2 Interviews | 5-8 Interviews + Analytics + JTBD |
| Design-System | Ad-hoc Screens | Figma Stil-Bibliothek | Token-first + Component + Pattern Atlas |
| Usability Testing | Meist nicht vorhanden | Einzelrunde | Moderated + Remote + SUS/SEQ-Report |
| Accessibility | Meist übergangen | Contrast-Check | WCAG 2.2 AA + AAA-Ziel + axe-core |
| Dev-Handoff | Figma-Link | Inspect + Style Guide | Storybook + MDX + Props/Variant Matrix |
| CRO-Integration | Keine | Keine | A/B-ready Variantensystem im Designstadium |
| Performance | LCP wird übergangen | Selten geprüft | Font-/Motion-/Image-Budget vorab |
| TCO im 12. Monat | Niedriger Einstieg, Gebühr pro Screen-Wiederholung | Mittel, aber fragmentiert | Mittel + lebendes System + Prozessdisziplin |
PROOF
Outcomes, measured
Durchschnitt 6 Monate nach Usability-Test; SUS 72 → 84.
90 Tage nach IA- + Onboarding-Redesign.
Wirkung des Redesigns von Forms + Error State + Empty State.
axe-core-Bestehensquote über alle gelieferten Screens.
Das Performance-Budget wird im Designstadium festgelegt.
Color, Type, Spacing, Radius, Shadow, Motion, Z-Index, Breakpoint, Opacity, Blur, Transition, Duration.
WHAT WE DO
Engagement scope
Every offering is an outcome-based work package. Roibase blends strategy and execution inside a single team — no hand-offs.
Discovery + User Research
Stakeholder-Interviews, 5-8 Tiefeninterviews mit Nutzern, Competitive Audit + Jobs-to-be-Done-Mapping; der Problemraum wird zuerst geschärft.
Information Architecture
Card Sort + Tree Test + First-Click-Test führen zu Navigation, die tatsächlich verstanden wird; Taxonomie wird 'von außen nach innen' aufgebaut.
Design-System (Token-first)
Tokens Studio + Style Dictionary → Figma Variables → Code; Farbe, Typografie, Spacing, Motion, Radius, Shadow, State aus einer Quelle.
Component Library + Pattern Atlas
Button, Form, Nav, Card, Table, Modal, Toast, Empty State; Props + Variant + a11y State + Responsive-Breakpoint-Karte.
High-Fidelity Prototype
Figma Interactive Prototype + Micro-Interaction Spec; Motion-Prototyping mit Rive/Lottie; Tech-Brief für Lenis/Framer Motion.
Usability-Testing-Operation
Moderated Serie mit 5 Nutzern + Remote (Maze/Useberry/UserTesting); SUS, SEQ, Task Completion, Time-on-Task als Metriken.
Accessibility (WCAG 2.2) Audit
axe-core + manueller Contrast- + Keyboard- + Screen-Reader-Check (NVDA/JAWS/VoiceOver); AA Baseline, AAA Ziel; KVKK/EAA-Konformität.
Design-QA + Visual Regression
Chromatic / Percy / Playwright Visual Regression; Pixel-Abgleich Figma ↔ Code + Component-Anatomy-QA.
CRO-Integration
A/B-ready Variantensystem: jede Komponente hat 2-3 Hypothesen-Varianten bereits im Design vorbereitet; Export für VWO/Optimizely.
Dev-Handoff + Storybook
Props/Variant/State Matrix, Behavior Spec, Motion Timing, Responsive Breakpoints; Storybook + MDX-Doku leben live.
— NUTZEN
Der konkrete Wandel Ihrer Produkterfahrung
Wenn Research + System + Test + Accessibility + Handoff integriert sind, hängt der ROI nicht an einer einzelnen Metrik.
Nutzerbarrieren sinken
Task Completion steigt, Support-Tickets sinken; das Produkt wird 'verständlich', Verluste im Onboarding gehen zurück.
Conversion wächst
Mit A/B-ready Variantensystem startet die CRO-Disziplin bereits im Design; Funnel-Drops werden vorab behoben.
Dev-Geschwindigkeit steigt
Mit Token-first + Storybook + MDX-Handoff sinken Entwicklungszeit pro Screen und Fehleranzahl spürbar.
Accessibility-Rechtsrisiko sinkt
Konformität mit WCAG 2.2 AA + EAA (European Accessibility Act 2025); bei Prüfungen liegt die Evidenz bereit.
Markenkonsistenz steigt
Mit dem Design-System erscheint in jedem Kanal (Web, App, E-Mail, Social, Sales Deck) dieselbe Identität + dasselbe Verhalten; das Markenvertrauen wächst.
Skalierung wird leichter
Neue Produkte / Locales / Märkte werden dank Component Library in Tagen statt Wochen hinzugefügt.
LIEFERUMFANG
Was Sie bei jedem UX-Engagement erhalten
Eine feste Liefer-Liste im Setup- + 6-Monats-Operationspaket; keine versteckten Zusatzkosten.
UX-Diagnostic-Report
Analytics + Session Replay + Heuristic Audit + Competitive Benchmark; 40-60 Seiten.
User-Research-Findings
Transkripte + Themenclusterung aus 5-8 Tiefeninterviews, Persona- + JTBD-Karte.
Information-Architecture-Paket
Ergebnisse aus Card-Sort / Tree-Test, Sitemap, User-Flow, Wireframe-Book.
Design-Token-Library
Color, Type, Spacing, Motion, Shadow, Radius, Z-Index; Tokens Studio + Style Dictionary + Code-Export.
Component Library (Figma + Storybook)
Button, Form, Nav, Card, Table, Modal, Toast, Empty State + Dark Mode + Responsive Breakpoints + a11y State.
Pattern Atlas + Motion Spec
Patterns für Onboarding, Search, Filter, Checkout, Dashboard + Rive/Lottie Motion-Spec-Dateien.
High-Fidelity Prototype
Interactive Figma Prototype + Micro-Interactions; Aufzeichnung + PDF-Version für Stakeholder-Reviews.
Usability-Test-Report
5-8 Moderated + 15+ Remote-Teilnehmer, SUS/SEQ/Task Completion, Insights + priorisierte Aktionsliste.
Accessibility Audit + Remediation
WCAG 2.2 AA/AAA Audit, axe-core + manueller Test, Remediation Plan, AR-Report.
Performance-Budget
LCP/INP/CLS-Ziele, Font- + Image- + Motion-Budget, Render-Strategie + Monitoring-Plan.
Dev-Handoff-Paket
Storybook + MDX-Doku, Props/Variant/State Matrix, Responsive Breakpoints, QA-Checkliste.
Runbook + Training + 3 Monate Support
Design-System-Runbook, Token-Update-Prozess, Figma- + Code-Trainingssessions, 90 Tage Support.
— LEISTUNGSUMFANG
Was wir tun, was wir nicht tun
Der UX-Engineering-Scope ist schriftlich; er verhindert Überraschungen und nachträgliche Rechnungen.
Wir tun es
- User Research (Interviews + JTBD + Analytics)
- Information Architecture (Card Sort + Tree Test)
- Design-Token- + Component- + Pattern-Library
- Figma Variables → Style Dictionary → Code-Pipeline
- High-Fidelity Prototype + Micro-Interaction Spec
- Usability Testing (Moderated + Remote)
- WCAG 2.2 AA/AAA Accessibility Audit + Remediation
- Performance-Budget + LCP/INP/CLS-Ziele
- Design-QA + Visual Regression (Chromatic/Percy)
- Storybook + MDX Dev-Handoff + Training
- CRO-Variantensystem (A/B-ready Design)
- Runbook + 90 Tage Support
Wir tun es nicht
- Front-End-Entwicklung (mit Partner-Teams)
- Back-End / DB-Design (bleibt im Software-Team)
- Brand-Strategie / Logo (Branding-Team / separates Engagement)
- Copywriting / Content-Produktion (wir machen UX-Copy-Review)
- Icon- / Illustration-Produktion (lizenzfreie Bibliotheken + Partner)
- Photography / Videoproduktion
- Langfristige monatliche Screen-Produktion (das System wird aufgebaut und vom Team verinnerlicht)
- User-Research-Panel oder Incentive-Zahlungsabwicklung (Partner-Lab)
HOW WE WORK
12-16 Wochen Setup, danach monatliche System-Operation
Woche 1-2: Discovery + Stakeholder-Kickoff
Business Goal, Stakeholder-Interviews, Review von Analytics/Session Replay, Festlegung von Scope und Zielmetriken.
Woche 3-4: User Research + JTBD
5-8 Tiefeninterviews, Transkript + Themenclusterung, Persona- + Jobs-to-be-Done-Karte.
Woche 5-6: IA + Content-Audit
Card Sort + Tree Test, User-Flow, Wireframe-Karte, Content-Audit + Copy-Strategie.
Woche 7-8: Design-System + Token + Component
Token-Library, Component-Inventar + Pattern Atlas, Figma Variables + Style Dictionary Export.
Woche 9-10: High-Fidelity Design + Prototype
High-Fi-Design der Hauptscreens + Interactive Prototype, Micro-Interaction + Motion Spec.
Woche 11-12: Usability-Test + a11y-Audit
Moderated + Remote Nutzertests, WCAG 2.2 Audit + Remediation, Performance-Budget-Check.
Woche 13-14: Iteration + Stakeholder-Sign-off
Iteration aus Testbefunden, finales Stakeholder-Review, Storybook- + Dev-Handoff-Vorbereitung.
Woche 15+: Handoff + Dev-Pipeline + Support
Lieferung von Storybook + MDX-Doku, Dev-Trainingssessions, Design-QA-Pipeline, CRO-Variantensystem + 90 Tage Support.
— TOOL-STACK
Unsere Tools — vendor-agnostisch, aber konsequent gewählt
Für jeden Kunden wählen wir das Passende; unsere Unabhängigkeit sichern wir, indem wir keine Provisionen nehmen.
DESIGN & PROTOTYPING
RESEARCH & TESTING
ACCESSIBILITY & QA
HANDOFF & ANALYTICS
QUESTIONS
Frequently asked
— GLOSSAR
Kernbegriffe des UX-Engineerings
Die gemeinsame Sprache Ihrer Design-, Entwicklungs- und Produktteams.
- Jobs-to-be-Done (JTBD)
- Framework zur Definition der konkreten Aufgabe (Job), die ein Nutzer mit einem Produkt erledigen will; verhaltens- und kontextorientiert statt persona-zentriert.
- Information Architecture (IA)
- Die Organisation von Inhalten und Funktionen eines Produkts so, dass sie dem mentalen Modell des Nutzers entsprechen; validiert mit Card Sort + Tree Test.
- Design Token
- Ausdruck von Designentscheidungen wie Farbe, Typografie, Spacing oder Motion als plattformunabhängige Variablen; wird über Figma Variables + Style Dictionary + Code-Pipeline aus einer Quelle verteilt.
- Design System
- Die Single Source of Truth für Design und Entwicklung, bestehend aus Token-, Component-, Pattern-, Guideline- und Governance-Schichten.
- WCAG 2.2
- Web Content Accessibility Guidelines 2.2; Erfolgskriterien auf Level A, AA und AAA; 9 neue Kriterien (2023) zu Tastatur, Focus, Drag und Target Size; AA ist Industrie-Baseline.
- System Usability Scale (SUS)
- Standardfragebogen mit 10 Items, der die Usability eines Interfaces auf einer Skala von 0-100 bewertet; > 68 überdurchschnittlich, > 80 Schwelle für 'exzellent'.
- Single Ease Question (SEQ)
- Ein-Fragen-Metrik, die die wahrgenommene Schwierigkeit direkt nach Abschluss einer Aufgabe auf einer 1-7-Skala misst; die Task-Level-Ergänzung zu SUS.
- Largest Contentful Paint (LCP)
- Zeit, bis der größte sichtbare Inhalt einer Seite für den Nutzer erscheint (Core Web Vitals); < 2.5s gut. Wird im Designstadium über Font- + Image- + Render-Budget gesteuert.
- Interaction to Next Paint (INP)
- Spitzenwert der Zeit von einer Nutzerinteraktion bis zum nächsten Paint (Core Web Vitals); < 200ms gut. Nachfolger von FID ab 2024.
- Storybook
- Tool zur Entwicklung, Dokumentation und QA von Components in isolierter Umgebung; mit MDX lebt die Design-Dev-Handoff-Doku dauerhaft.
- Visual Regression Testing
- Automatische Prüfung mit Chromatic / Percy / Playwright, ob UI-Komponenten nach Code-Änderungen visuell gleich bleiben; verhindert Design-Drift.
- European Accessibility Act (EAA)
- Die am 28. Juni 2025 in Kraft getretene Accessibility-Richtlinie der EU; macht WCAG 2.2 AA für E-Commerce, Banking, Verkehr und Telekommunikation verpflichtend.
— ENTSCHEIDUNGSBAUM
Ist eine UX-Engineering-Operation das Richtige für Sie?
Beantworten Sie 4 Fragen mit Ja/Nein; das Ergebnis wird eindeutig.
01 / 04
Haben Sie ein aktives digitales Produkt (Web/App/SaaS) oder einen Launch-Plan in 3-6 Monaten?
Mindestschwelle für einen ROI der Research-, System- und Test-Operation.
— LET'S BEGIN
Wandeln wir Design von Vermutung in Lernen um.
In einem 1-stündigen UX-Diagnostic analysieren wir Ihren aktuellen Flow durch die Analytics-, Heuristic- und a11y-Linse und zeigen die riskantesten Annahmen und die Quick-Wins.