Fallstudie Phönix e.V.
Erneuerung der Webseite
Vorher
Die alte Webseite des Pflegedienstes für Menschen mit Behinderung „Phönix e.V.“ aus Regensburg, mußte dringlich erneuert werden. Die Homepage sah sehr mager und langweilig aus. Fast keine Fotos oder Videos und zu viel Text. Außerdem wünschte sich die Leitung des Vereins eine besseres Ranking und die Möglichkeit sich online bei Phönix bewerben zu können. Die Mittarbeiter wünschten sich einen internen Bereich mit aktuellen Terminen und Downloads.
Nachher
So sieht nun die neue Webseite aus. Sie ist modern, geschmückt mit eigenen Fotos und vor allem mit den Videos in denen sich die verschiedenen Bereiche kurz vorstellen. Über ein Online Formular können sich Interessenten direkt online bewerben. Die Mittarbeiter verfügen über einen internen Bereich wo sie wichtige Dokumente downloaden können, Termine einsehen können und sogar ein Forum, in dem sie sich über verschiedene Themen austauschen können.
Der Prozess
Überlegungen, Strategien, Umsetzung
- Verbesserung des Logos
Das alte Logo von Phönix e.V. wollte ich wegen des etablierten Cooperate Identity behalten. Jedoch war es ein bisschen unscharf und der Vogel Phönix schien mir ein wenig zu dick geraten. Deswegen habe ich mit Adobe Illustrator einen neuen, etwas schlankeren Vogel gezeichnet und die Schrift verbessert.
alt
neu
- Auswahl der Farben
Die Farben wollte ich wegen dem Wiedererkennungwert zum größten Teil auch behalten, doch habe ich einige kleine Änderungen vorgenommen. Ich habe ein, für das Auge angenehmeres, wärmeres Gelb ausgewählt und statt dem Pechschwarz, ein Schwarz das etwas Gelbtöne enthält ausgesucht.
#ffd800
#000000
#302d1e
#ffcf39
- Titelbild
Ich suchte ein langgestrecktes passendes Bild für die Homepage, konnte aber kein geeignetes finden. Auf dem Foto sollte ein Rollstuhlfahrer mit Begleitperson sein, vor einem möglichst schönen Hintergrund. Ich fand letztendlich das linke Foto, doch brauchte ich ein längeres Format. Mit Hilfe von einer KI-Software, ergänzte ich die fehlende Landschaft so, dass das Foto rechts entstand.
aus diesem Foto -
entstand mit KI dieses Foto
- Fotoshooting
Wir organisierten ein Fotoshooting und machten aktuelle Fotos von der Arbeit im Verein und von den Mittarbeitern.
- Videodreh und Bearbeitung
Ich drehte 4 Videos mit Greenscreen, um danach bei der Bearbeitung Texte, Bilder und Hintergründe einfügen zu können. Die Videos sind mit Premiere Pro optimiert worden. Ich hatte Bedenken wegen dem Baustellenlärm im Hintergrund, aber das konnte ich auch in der Audio-Bearbeitung beseitigen. Die Videos sind professionell geworden.
- Bewerbungsformulare
Mit Hilfe von WP Forms erstellte ich 2 Bewerbungsformulare, so dass Interessenten sich jetzt direkt von der Homepage bei Phönix bewerben können. Nach dem Senden erhält Phönix sofort die Bewerbung per Email und der Bewerber eine Nachricht, dass seine Bewerbung erfolgreich gesendet wurde.
- Interner Bereich, Forum, Eventkalender
Wie erwünscht, habe ich für die Mittarbeiter einen Internen Bereich erstellt, wo sie wichtige Dokumente herunterladen können, Termine verfolgen und sich bei Weiterbildungen anmelden können. Im Forum können sie sich über verschiedene Themen austauschen.
- Resposnsivness - Darstellung auf mobilen Geräten
Die alte Variante der Webseite wurde für eine feste Bildschirmgröße – meist Desktop – entwickelt. Auf mobilen Geräten wirkte das Layout unübersichtlich: Texte und Bilder waren zu klein, Inhalte mussten herangezoomt werden und die Navigation war oft schwer bedienbar. Das führte zu Frustration und einer hohen Absprungrate.
Die neue responsive Webseite passt sich automatisch an jedes Endgerät an – egal ob Smartphone, Tablet oder Desktop. Inhalte bleiben klar strukturiert, Texte sind gut lesbar, Bilder skalieren optimal, und die Navigation bleibt komfortabel. Dadurch entsteht ein konsistentes Nutzererlebnis, das Professionalität vermittelt und Vertrauen stärkt.
Eine responsive Gestaltung sorgt nicht nur für bessere Benutzerfreundlichkeit, sondern wirkt sich auch positiv auf die Sichtbarkeit in Suchmaschinen und die Conversion-Rate aus. Kurz gesagt: Responsives Design ist heute Standard für erfolgreiche Webauftritte.
vorher
nachher
- SEO - Suchmaschinen-Optimierung
Durch das Erstellen von verschiedenen Landingpages, die auf bestimmte Suchwörter anspringen, über das Plugin Rank-Math und das Einstellen der passenden Schlüsselwörtern, habe ich ein optimales Ranking bei den Suchmaschinen erreicht.
- Optimierung der Lade-Geschwindigkeit
Durch das installieren eines professionellen Cache-Systems und der Optimierung der Bilder und Videos habe ich eine ausgezeichnete Lade-Geschwindigkeit erreicht – weniger als 1 Sekunde.
- Barrierefreiheit
Beim erstellen der Webseite habe ich von Anfang an die Kriterien für eine möglichst barrierefreie Webseite berücksichtigt:
- Klare Struktur und einfache Navigation
- Gut lesbare Schrift und ausreichende Kontraste
- Skalierbare Inhalte für verschiedene Geräte
- Alternativtexte für Bilder
- Tastaturbedienbarkeit ohne Maus
- Verständliche Sprache und klare Formulierungen
Außerdem ist die Webseite mit der Eye-Able Software versehen, ein Assistent für die Gewährleistung von Barrierefreiheit und Hilfen für Menschen mit Behinderung
