Zur Übersicht

Kundenwege und Designsystem für eine Lernplattform

HEALVERSITY erhielt wiederverwendbare Komponenten, Seitenvorlagen und eine umgesetzte WordPress-Grundlage für weitere Landingpages. Parallel machten wir Hürden zwischen dem ersten Interesse, der Anmeldung und dem Zugang zu Lerninhalten sichtbar.

Meine Rolle
Projekt- & Designleitung · userdoo
Design & Konzeption
Tommy Haacke und Team
Technische Umsetzung
Expert Allies · von mir abgestimmt
HEALVERSITYLandingpage · Designentwurf
Ausgearbeiteter HealVersity-Landingpage-Einstieg mit Ausbildungsangebot, Bildsprache und Terminvereinbarung
Ein Baustein der gemeinsamen Designgrundlage: der Einstieg in die Ausbildungs-Landingpage. Originalentwurf aus dem HEALVERSITY-Designsystem.

Kundenwege und Umsetzung auf eine gemeinsame Grundlage stellen

Situation

HEALVERSITY benötigte ein Konzept für die öffentliche Website und den eingeloggten Lernbereich. Interessierte kamen über unterschiedliche Einstiege zum Angebot; Anmeldung, Bestellung und Zugang zu Inhalten mussten im Zusammenhang betrachtet werden.

Tätigkeit und Verantwortung

Ich führte Konzeption und Design mit meinem Team. Unsere Arbeit umfasste die Kundenwege, die benötigten Komponenten und Vorlagen sowie die Abstimmung der technischen Umsetzung mit Expert Allies.

Ansatz

Wir untersuchten die Wege vom ersten Interesse bis zum nächsten Schritt in dokumentierten Walkthroughs. Dabei hielten wir Hürden und Lösungsvorschläge fest. Für den Demo-Zugang verbanden wir Anzeige, Anmeldung, erste Lektionen und Anschlussangebote in einem Konzept. Stylescape, Komponenten und Seitenvorlagen bildeten die gemeinsame Gestaltungsbasis; mit Expert Allies stimmte ich die WordPress-Umsetzung ab.

Resultat

HEALVERSITY erhielt ein Designsystem mit Komponenten und Seitenvorlagen sowie eine umgesetzte WordPress-Grundlage für Landingpages. Walkthroughs zeigten konkrete Hürden auf dem Weg zu Anmeldung und Lerninhalten.

01 Kundenwege prüfen

Die Hürden zwischen
Interesse und Abschluss sichtbar machen.

Eine Landingpage erklärt nur einen Teil des Weges. In den Walkthroughs betrachteten wir die zusammenhängenden Schritte: von der Anzeige über das Angebot bis zum Formular, zur Bestellung oder zum Zugang zu Lerninhalten.

Wir dokumentierten den Buch-Funnel, den Einstieg über „7 Therapieansätze“ und den Demo-Zugang. Dabei hielten wir die einzelnen Nutzeraktionen, mögliche Reibung und konkrete Verbesserungsvorschläge fest.

Walkthrough eines bestehenden Checkout-Formulars: mehrere Fehlermeldungen und Empfehlungen zu Validierung, Autofill und Schrittanzeige
Analyse des bestehenden Buch-Checkouts. Die dargestellte Reaktion ist eine illustrative Annahme aus dem Walkthrough, kein Nutzerzitat. Der untersuchte Checkout ist keine von uns gestaltete Oberfläche.

Formulare verständlich machen

Pflichtfelder und Fehlermeldungen im Zusammenhang prüfen. Als Verbesserungen wurden direkte Validierung und automatisches Ausfüllen vorgeschlagen.

Den nächsten Schritt erklären

Sichtbar machen, an welcher Stelle des Prozesses man sich befindet und was nach einer Aktion passiert.

Übergänge klären

Den Zusammenhang zwischen kostenfreiem Einstieg, Lernangebot und weiterführender Ausbildung deutlicher gestalten.

02 Lösungen entwickeln

Von der Anmeldung
zur ersten Lektion.

Aus der Analyse entstanden konkrete Lösungsskizzen. Beim Demo-Zugang verknüpften wir Anzeige, Landingpage, Anmeldung, erste Lektionen und die Möglichkeit, ein Gespräch zu buchen.

Auch die begleitenden E-Mails wurden im Ablauf berücksichtigt. Damit ließ sich abstimmen, welche Information an welchem Kontaktpunkt gebraucht wird und wie der nächste Schritt anschließt.

Ausschnitt des Demo-Zugang-Konzepts mit verbundenen Wireframes für Landingpage, Anmeldung, Lektionen und Gesprächsbuchung
Ausschnitt aus „Demo Zugang Funnel Solution Idea“. Die Verbindungen zeigen den geplanten Ablauf; die Skizze dokumentiert ein Lösungskonzept.
  1. 01 · Einstieg

    Das Angebot einordnen

    Anzeige und Landingpage führen in das kostenfreie Lernangebot ein.

  2. 02 · Zugang

    Anmelden und Inhalte finden

    Das Formular führt zu einer Auswahl von Lektionen und ergänzenden Informationen.

  3. 03 · Anschluss

    Den nächsten Schritt anbieten

    Gesprächsbuchung und E-Mails greifen das Interesse an der Ausbildung auf.

03 Gemeinsame Designgrundlage

Komponenten und Vorlagen
für die wiederkehrenden Aufgaben.

Wir arbeiteten eine gemeinsame visuelle Richtung aus und überführten sie in ein Designsystem. Ein Stylescape verband Farben, Typografie, Bildsprache und erste Modulideen zu einem Gesamtbild.

Darauf bauten die benötigten Komponenten und Seitenvorlagen auf: unter anderem Buttons, Eingabefelder, Karten, Navigation, Angebotsbereiche und FAQs. So musste nicht jede Seite wieder bei null beginnen.

HealVersity-Stylescape mit Petrol- und Grüntönen, Typografie, Bildwelt und ersten Modulideen
Die visuelle Richtung im Stylescape. Auf kleinen Bildschirmen ist ein Ausschnitt zu sehen.
Oberer Ausschnitt der ausgearbeiteten Ausbildungs-Landingpage mit Hero, Einführung, Gründern und weiteren Informationsmodulen
Ausschnitt einer Landingpage-Vorlage aus Figma. Sie führt wiederverwendbare Module zu einer konkreten Angebotsseite zusammen.

Von der Gestaltungsrichtung
zur nutzbaren Vorlage.

Die Landingpage ist ein Anwendungsbeispiel des Systems: Einstieg, Informationen zur Ausbildung, Zielgruppen, Inhalte, Stimmen von Teilnehmenden und nächste Schritte werden zu einer Seite zusammengesetzt.

Varianten für unterschiedliche Inhalte.

Die Karten zeigen, wie dieselbe Grundlage für kurze Informationen, Beiträge mit Bild oder Video-Inhalte genutzt werden kann.

Dokumentierte Kartenvarianten im userdoo-Designsystem für HealVersity: Text, Bild, Aktion und Video
Komponentenbeispiele aus dem Designsystem; Texte und Namen enthalten Platzhalter.

04 Zusammenarbeit & Umsetzung

Die Designarbeit bis in
die technische Umsetzung begleiten.

Die Arbeit endete für uns nicht mit den Entwürfen. Zur Zusammenarbeit gehörten auch eine optimierte WordPress-Umgebung und ein flexibles Landingpage-Framework.

Expert Allies war unser technischer Umsetzungspartner. Ich stimmte die Umsetzung mit ihnen ab und verband damit die Arbeit des userdoo-Teams mit der technischen Realisierung.

Mein Beitrag lag in der Konzeption, der Führung der Designarbeit und der Abstimmung zwischen Kunde, userdoo-Team und Umsetzungspartner.

Verantwortung im Projekt

Mein Beitrag

Konzeption, Designleitung und Abstimmung der Umsetzung

Tommy Haacke und Team

UX-Ausarbeitung, Designsystem, Komponenten und Vorlagen

Expert Allies

Technischer Umsetzungspartner

Ergebnis

Weitere Landingpages auf einer gemeinsamen Basis aufbauen.

Weitere Landingpages konnten auf gemeinsamen Vorlagen und Komponenten aufbauen. Mit Expert Allies begleiteten wir diese Grundlage bis in die WordPress-Umsetzung. Die Walkthroughs lieferten konkrete Ansatzpunkte für verständlichere Formulare und Übergänge zu Lerninhalten; eine höhere Conversion war das Ziel, ist aber nicht als Ergebnis belegt.

Analyse & Konzeption

Dokumentierte Kundenwege

Walkthroughs mit konkreten Hürden und Lösungsskizzen für die nächsten Schritte.

Wiederverwendbares Design

Komponenten & Vorlagen

Eine gemeinsame Gestaltung mit ausgearbeiteten Bausteinen und Seitenvorlagen.

Technische Realisierung

WordPress-Grundlage

Umgebung und Landingpage-Framework in Zusammenarbeit mit Expert Allies.