Teil 2: Die Königsdisziplin: UX-Journey, Konzeption und Wireframes

Im ersten Teil unseres Playbooks haben wir mit unserem Kunden die Anforderungsanalyse abgeschlossen und das zentrale Problem identifiziert: Die Kappel & Dierolf Website scheitert daran, verschiedene Nutzerrollen gleichzeitig zu bedienen. Jetzt geht es in die Strategie-Phase: Wir definieren, wer der Kunde ist, und erstellen den Bauplan für eine Lösung, die messbar den Vertrieb unterstützt und die Angst vor der Komplexität nimmt.
Wir sind Przem, dein Projektmanager-Vollprofi, und Emma, deine Web-Entwicklerin mit UX-Fokus. Los geht’s!

Viele neue Kunden fragen uns: "Warum brauchen wir Personas? Wir kennen doch unsere Zielgruppe!"
Klartext: Die "Zielgruppe" ist zu schwammig. Wenn du weißt, dass du "KMU-Inhaber" ansprechen musst, ist das gut. Wenn du aber weißt, dass du Bärbel ansprechen musst, die nur schnell den Service-Button sucht und genervt ist, dann weißt du, wie du die Seite bauen musst.

Was ist eine Persona?
Eine Persona ist ein fiktiver Archetyp, den wir anhand realer Daten, demografischer Merkmale, Motivationen und Frustrationen erstellen.

Warum wir es machen:
Wir nutzen die Persona-Analyse mit Elementen des User Journey Mappings, um die Motivation und die Pain Points des Kunden wirklich zu verstehen. Das ist der wichtigste Schritt, um eure Marketing- oder Vertriebsziele zu erreichen. Wir stellen uns vor:

1. Was fragt sich der Kunde, wenn er auf die Seite kommt?
2. Welche Emotion hat er in diesem Moment (Stress, Neugier, Skepsis)?
3. Was ist das Ziel seiner Reise? (Formular ausfüllen, Dokument downloaden, anrufen?)

Das Projekt-Beispiel Kappel & Dierolf: Bei unserem Kunden KD mussten wir drei widersprüchliche Agenden auf der Website lösen: Die Büroleiterin Bärbel sucht schnellen Service, der IT-Leiter Ingo sucht technische Tiefe, und der Geschäftsführer George sucht den ROI. Die einzige Möglichkeit, diesen Konflikt zu lösen, ist die klare Definition dieser Rollen und ihrer individuellen Reise (User Journey).

Nachdem wir wissen, mit wem wir reden, brauchen wir den Bauplan.

Was ist die Sitemap?
Die Sitemap (oder Informationsarchitektur) ist die logische Gliederung aller Inhalte eurer Website. Sie ist der Grundriss, das Fundament, auf dem alles aufbaut.

Warum das so wichtig ist:
Viele Agenturen bauen Sitemaps nach internen Abteilungen des Kunden. Wir bauen sie nach Nutzerbedürfnissen und Vertriebslogik.

Unser strategischer Ansatz:
Die Sitemap muss die zuvor identifizierten Persona-Konflikte strukturell lösen. Wir trennen bewusst, was nicht zusammengehört, und führen jeden Nutzer mit wenigen Klicks zum Ziel.

Im KD-Projekt hieß das: Wir teilen die Hauptnavigation nicht nach Produkten, sondern nach Nutzen und Rolle auf: Ein prominenter Service-Hub für die schnelle Entlastung des Teams und ein getrennter Bereich Kompetenzen & Erfolg für die technischen und kaufmännischen Entscheider. Die Sitemap wird so zu unserem ersten Werkzeug, um den Vertrieb zu unterstützen.

Die Sitemap liefert die Struktur. Die Wireframes liefern die strategische Anordnung der Elemente auf jeder Seite.

Was sind Wireframes?
Wireframes sind das Schwarz-Weiß-Skelett eurer Website. Sie zeigen, wo Bilder, Texte, Navigationselemente und – am wichtigsten – Formulare und Call-to-Actions (CTAs) platziert werden. Sie haben nichts mit Design zu tun, sondern definieren den logischen Fluss.

Warum Wireframes Gold wert sind:
Mit Wireframes definieren wir, wie wir den Besucher strategisch zum Ziel führen:

1. Storytelling-Flow: Wir legen fest, in welcher Reihenfolge wir dem Kunden Argumente präsentieren, um ihn zu überzeugen (z.B. Problem-Trigger → Lösung → Vertrauen/Proof → CTA).
2. Conversion Zone: Wir stellen sicher, dass alle entscheidenden Elemente (CTAs, Anfragen, Kontaktformulare) an den logisch richtigen Stellen platziert sind, um die Ausfüllrate zu maximieren.
3. Budget-Sicherheit: Wenn die Wireframes stehen, ist die Strategie fix. Wir können dann ins Design gehen, ohne ständig große Schleifen drehen zu müssen.

Die Wireframes garantieren, dass jede Seite (z. B. eine Produktseite für KD) die strategischen Anforderungen der Personas erfüllt und den Besucher dazu bringt, ein Formular, eine Anfrage oder einen Download auszufüllen.

Der Bauplan (Sitemap & Wireframes) steht, die strategische Grundlage ist gelegt. Jetzt kommt der kreative Part.

Im nächsten Beitrag zeigen wir: Wie übersetzen wir diese komplexe und strategische Struktur in ein UI/UX-Design, das nicht nur gut aussieht, sondern die Nutzer begeistert? Wie wird aus dem schwarz-weißen Skelett das lebendige Corporate Design?

Mit Liebe getextet von
Emma

Fachgebiete
Code-Zauberin, Handball-Jongleurin

Kurz gesagt
Bringt Ordnung ins Code-Chaos und sorgt dafür, dass Design und Funktion zusammenpassen. Wenn sie nicht gerade Frontend-Feinschliff betreibt, optimiert sie Ladezeiten oder pixelperfekte Details – verständlich, präzise, mit viel Gespür.

Lieblingssatz im Team
„Das geht auch barrierefrei!“