Projekt­mappe

Einfühlsam. Klar. Persönlich.

Wenn Struktur, Text und Technik Eltern und Kinder abholen.

Website Projekt Beispiel für einen Relaunch (Technik, Design & Inhalt)
Website Projekt Beispiel für einen Relaunch (Technik, Design & Inhalt)
Projekt: Von Onepager zur Website – Relaunch in Technik, Design & Text
Branche:  Lern­för­de­rung /​Lese-Recht­schreib-Schwäche
Kunde: Andrea Erz

Ausgangslage, Anforderungen & Ziele

Testimonial Andrea Erz - Kundenstimme

Ausgangs­si­tua­tion: Tech­nisch schwer, inhalt­lich über­for­dernd
Die bishe­rige Website der Kundin bestand aus einem Onepager, der auf Basis von Boot­strap (einem tech­ni­schen Frame­work für einfache Websei­ten­lay­outs) erstellt wurde. Sie war für die Kundin selbst schwer zu pflegen, inhalt­lich über­laden und vermit­telte nicht, worin der konkrete Nutzen ihres Ange­bots bestand. Wich­tige Infor­ma­tionen wie Kurs­zeiten oder Kurs­struktur ließen sich weder schnell erfassen noch regel­mäßig aktua­li­sieren – ein echtes Problem im Tagesgeschäft.

Wunsch: Persön­li­cher, klarer und eltern­freund­lich
Hinzu kam: Die persön­liche Kompo­nente fehlte. Die Kundin wünschte sich einen Auftritt, der ihrer Haltung, ihrem Einfüh­lungs­ver­mögen und der indi­vi­du­ellen Förde­rung von Kindern gerecht wird – und dabei Eltern nied­rig­schwellig anspricht.

Umset­zung: Relaunch in Technik, Design & Inhalt
Die Kundin beauf­tragte mich mit dem Relaunch ihrer Website – in Technik, Design und Inhalt. Ziel war eine klare Struktur, persön­liche Ansprache, einfache Pfleg­bar­keit – und die inhalt­liche Aufbe­rei­tung auf Basis echter Eltern­fragen. Umge­setzt wurde:

  • eine neue Seiten­struktur mit Start­seite, Ange­bots­seite, Über-mich und Kontakt
  • eine Umstel­lung auf Word­Press & Elementor, damit Inhalte – insbe­son­dere Kurs­zeiten – selbst gepflegt werden können, was Zeit spart und Sicher­heit schafft
  • die Inte­gra­tion eines WhatsApp-Kontakt­but­tons für eine einfache, mobile Kontaktaufnahme
  • ein visu­elles Konzept basie­rend auf dem neuen Flyer der Kundin, den sie gemeinsam mit der Grafi­kerin Andrea Mich­alowski (www.arts&design.de) entwi­ckelt hatte.
  • eine klar struk­tu­rierte Ange­bots­kom­mu­ni­ka­tion und der gezielte Aufbau emotio­naler Nähe zur Zielgruppe

Projekt­informationen

Ziel:

  • Klare, verständ­liche Darstel­lung des Ange­bots – auf Augen­höhe mit Eltern
  • Abbau typi­scher Unsi­cher­heiten durch struk­tu­rierte Infor­ma­tionen und FAQ und klare Angebotsstruktur
  • Persön­li­cher Zugang über eine authen­ti­sche Über-mich-Seite mit Einbli­cken in Haltung & Motivation
  • Pfle­ge­leichte Umset­zung der Seiten, insbe­son­dere für wech­selnde Kurstermine
  • Über­tra­gung des bestehenden Flyers in ein konsis­tentes Webdesign
  • Such­ma­schi­nen­freund­liche Texte auf Basis bestehender Keyword­liste (z. B. LRS Kurs Ulm“)

Meine Leistungen:

  • Stra­te­gi­sche Bera­tung zur Ange­bots­struktur & Nutzerführung
  • Konzep­tion der Seiten­struktur (Start­seite, Angebot, Über mich, Kontakt)
  • Entwick­lung der Über-mich-Seite auf Basis eines struk­tu­rierten Workbooks
  • Text­ent­wick­lung für alle Seiten – klar, empa­thisch und zielgruppengerecht
  • SEO-Inte­gra­tion auf Basis der Google-Ads-Keywordliste
  • Desi­gn­über­tra­gung aus dem bestehenden Flyer – Farben, Icons, Bildsprache
  • Aufbau der Kurs­ter­mine mit zentraler Pflege und dyna­mi­scher Ausgabe
  • Inte­gra­tion eines WhatsApp-Kontaktbuttons
  • Einrich­tung grund­le­gender Sicher­heits­funk­tionen (Fire­wall, Login-Schutz etc.)

Technik:

  • CMS: Word­Press
  • Page­builder: Elementor & Ulti­mate Addons für Elementor
Website Projekt Andrea Erz - Mobil-Ansicht

Projektdetails – Umsetzung

Nach der stra­te­gi­schen Planung und inhalt­li­chen Struk­tu­rie­rung folgte die prak­ti­sche Umset­zung des Projekts – mit dem Ziel, Technik, Design und Inhalt so aufein­ander abzu­stimmen, dass Eltern sich schnell zurecht­finden, Vertrauen aufbauen und problemlos Kontakt aufnehmen können.

Die Umset­zung erfolgte in enger Abstim­mung mit der Kundin und auf Basis der erar­bei­teten Inhalte, des bestehenden Corpo­rate Designs und den Anfor­de­rungen an eine pfle­ge­leichte Lösung.

Design-Prozess

Statt bei null zu starten, konnte ich auf ein bestehendes visu­elles Konzept zurück­greifen. Das neue Corpo­rate Design mit neuem Flyer – in frischem Grün und Blau, mit Buch­staben-Icons und einer kind­ge­rechten, gleich­zeitig klaren Gestal­tung – bildete die visu­elle Grund­lage für das Webdesign.

Folgende Elemente wurden über­nommen und webtaug­lich umgesetzt:

  • die Farb­welt und Bildsprache
  • Grafiken, z. B. Initi­al­buch­staben als wieder­keh­rende Designelemente
  • Störer-Elemente wie Mega­fone mit Sprech­blasen zur inhalt­li­chen Hervorhebung
  • die im Flyer verwen­dete Haus­schrift, um einen konsis­tenten visu­ellen Eindruck zu wahren
  • profes­sio­nelle Porträt­fotos der Kundin – einge­bunden in runde Rahmen, um Persön­lich­keit und Nähe zu unterstreichen

Design­part­nerin:
Das Corpo­rate Design & der Flyer wurden von Andrea Mich­alowski (www.artsanddesign.de) gestaltet – modern, farb­stark und zielgruppengerecht.

Layout & Contentprozess

Die Inhalte der Website wurden entwi­ckelt auf Basis eines inten­siven Work­book-Prozesses, den die Kundin durch­lief und aus denen die Texte erstellt wurden
Ziel war nicht nur das rich­tige Formu­lieren“, sondern vor allem ein Verständnis dafür, was Eltern wirk­lich wissen wollen, bevor sie sich für einen Kurs entscheiden. Wich­tige Fragen im Prozess:

  • Was versteht die Ziel­gruppe auf den ersten Blick?
  • Welche Infor­ma­tionen benö­tigen und erwarten die Eltern?
  • Was kann Unsi­cher­heiten nehmen?
  • Wo braucht es Vertrauen – und wie erzeugen wir es?

Klar­heit im Inhalt – struk­tu­riert, persön­lich und über­zeu­gend
Die Inhalte der Website wurden so entwi­ckelt, dass sie Eltern einen schnellen Über­blick geben, Vertrauen aufbauen und gleich­zeitig alle rele­vanten Infor­ma­tionen struk­tu­riert zugäng­lich machen.
Die Texte sind bewusst klar und redu­ziert formu­liert – persön­lich, aber nie über­laden oder werb­lich. Im Fokus stehen die Bedürf­nisse der Ziel­gruppe: verständ­liche Antworten, trans­pa­rente Abläufe und eine direkte Ansprache auf Augenhöhe.

Website Projekt AE Layoutprozess "Angebotsstruktur für mehr Vertrauen"

Auf der Ange­bots­seite wurde der Kurs detail­liert erklärt: Was macht ihn beson­ders? Wie läuft er ab? Für wen ist er geeignet?
Ein ergän­zender FAQ-Bereich greift häufige Fragen direkt auf – z. B. zu Dauer, Ziel­gruppe, Kosten oder Förder­mög­lich­keiten – und begegnet mögli­chen Unsi­cher­heiten bereits vor der Kontaktaufnahme.

Darüber hinaus sorgen persön­liche Geschichten und Rück­mel­dungen aus dem Kurs­alltag für Nähe und Authen­ti­zität – ohne plakativ zu wirken, sondern einge­bettet in den natür­li­chen Seiten­fluss. Inhalt­liche Umsetzung:

  • Redu­zierte, klare Sprache – persön­lich, aber nicht platt
  • Klarer Ablauf auf der Ange­bots­seite mit: Was bekomme ich? Wie läuft’s ab? Für wen ist das geeignet?
  • FAQ-Bereich zur Einwandbehandlung
  • Testi­mo­nials & persön­liche Geschichten aus den Kursen

Nutzer­füh­rung & Kontakt­freund­lich­keit
Die Navi­ga­tion wurde bewusst redu­ziert: wenige Menü­punkte, klare Scroll­stre­cken und gezielte Call-to-Actions führen Besucher*innen durch das Angebot. Ein beson­deres Augen­merk lag dabei auf der Kontakt­seite, die nicht nur Formular und E‑Mail enthält, sondern auch einen WhatsApp-Button – DSGVO-konform einge­bunden und ideal für mobile Endgeräte.

Neben der über­sicht­li­chen Kontakt­seite und dem mobilen WhatsApp-Button wurde auch die E‑Mail-Kommu­ni­ka­tion profes­sio­na­li­siert:
Statt einer privaten Gmail-Adresse nutzt die Kundin nun eine E‑Mail-Adresse unter eigener Domain – ein kleiner, aber entschei­dender Schritt in Sachen Vertrau­ens­aufbau und Seriosität.

Website Projekt AE Technikprozess "Template Kurstermine + WhatsApp-Button"

Tech­ni­sche Umset­zung & Pfle­ge­leich­tig­keit
Die Seite wurde mit dem Page­builder Elementor  umge­setzt und so struk­tu­riert, dass Inhalte – insbe­son­dere Kurs­in­for­ma­tionen – zentral gepflegt und auto­ma­tisch an mehreren Stellen ausge­spielt werden. Das spart der Kundin nicht nur Zeit, sondern sorgt auch für konsis­tente Kommu­ni­ka­tion. Tech­ni­sche Maßnahmen:

  • Zentrale Kurs­da­ten­pflege mit globalem Widget
  • Sicher­heits­kon­fi­gu­ra­tion (Fire­wall, Login-Schutz, Limit Login Attempts etc.)
  • Inte­gra­tion der Google-Ads-Keyword­liste („LRS Kurs Ulm“, Lese-Recht­schreib-Schwäche“, u. a.)
  • Bild­op­ti­mie­rung + Alt-Texte
  • seman­tisch saubere Struktur (H‑Überschriften, spre­chende URLs, klare Meta-Tags)

Ergebnis & Wirkung
Entstanden ist eine Website, die Vertrauen aufbaut, Eltern Orien­tie­rung bietet – und die Werte der Kundin einfühlsam sichtbar macht. Sie lässt sich einfach pflegen, spricht die Ziel­gruppe emotional und struk­tu­rell an – und stärkt die Sicht­bar­keit der LRS-Trai­nerin im regio­nalen Umfeld.

Beson­ders hervor­zu­heben:
Die Über-mich-Seite, die erst­mals einen persön­li­chen Einblick in die Moti­va­tion und Haltung der Trai­nerin gibt – auf Basis des gemeinsam entwi­ckelten Workbooks.

Testimonial Andrea Erz - Kundenstimme
Website Projekt AE Mobil-Ausschnitt „Hero-LRS-Kurs“-Teil
Website Projekt AE Mobil-Ausschnitt „Kurs-Methode“-Teil
Website Projekt AE Mobil-Ausschnitt „Kundenfeedback“-Teil
Website Projekt AE Mobil-Ausschnitt „Uber-Mich-Geschichte“-Teil
Website Projekt AE Mobil-Ausschnitt „Kurs-FAQ“-Teil
Website Projekt AE Mobil-Ausschnitt „Uber-Mich-Persönlichkeit“-Teil
Website Projekt AE Mobil-Ausschnitt „LRS-Fakten“-Teil

Lust auf Klarheit – auch für dein Projekt?

Du willst, dass dein Angebot verstanden wird – und dich endlich mit deiner Website wohlfühlen?

Dann melde dich gern.
Nadine Möller - Webdesignerin

Weitere Auszüge aus meiner Projektmappe 

Website Projekt Beispiel für einen inhaltlichen Relaunch

Projektart: Relaunch (Technik & Inhalte) einer Business-Website

Branche: Grafik­de­sign /Design-Dienst­leis­tungen & Firmenschulungen

Zum Projekt von Andrea Michalowski»

Deine Website-Checkliste wartet auf dich!
  • Vermeide typische Fehler
  • Behalte den Überblick bei Design, Inhalt, Technik & SEO
  • Spare Zeit und starte sicher durch
Leitfaden für Website-Optimierung: Checkliste PDF Mockup
Hol dir die 156 Checkpunkte kostenlos als PDF.
WEBSITE-CHECKLISTE GRATIS!
  • Vermeide typische Fehler
  • Behalte den Überblick bei Design, Inhalt, Technik & SEO
Leitfaden für Website-Optimierung: Checkliste PDF Mockup
156 Checkpunkte für mehr Klarheit & weniger Chaos.
Website-Checkliste gratis!
Leitfaden für Website-Optimierung: Checkliste PDF Mockup
156 Checkpunkte für mehr Klarheit & weniger Chaos.
  • Design, Inhalt, Technik & SEO
  • Als PDF zum Abhaken
Cookie Consent Banner von Real Cookie Banner