Stärke deine Website (pfadfinderpark.de) – Website-Redesign (UI/UX Case Study)
Projekt: Redesign der Website pfadfinderpark.de
Ziel: Modernisierung des veralteten Designs und Verbesserung der Benutzerfreundlichkeit
Rolle: UX/UI-Design + Frontend
Tools: A4-Papier, Adobe XD, HTML, CSS, WordPress, Elementor Pro
In dieser Case Study beschreiben wir, wie wir die Website pfadfinderpark.de neu gestaltet haben. Wir gehen auf die Kriterien, den Workflow, unsere Entscheidungen, unseren Projektansatz sowie die Erkenntnisse aus dem Prozess ein.
Grundlegende Informationen
Die Website dient dazu, einen Pfadfinderpark / Zeltplatz zu präsentieren, der:
Unterkünfte und Campingmöglichkeiten für Gruppen anbietet
Naturbasierte Erlebnisse ermöglicht
Primäre Zielgruppe:
Pfadfindergruppen
Jugendorganisationen
Schulklassen
Sekundäre Zielgruppe:
Familiengruppen
Unternehmen (Trainings / Teambuilding)
Ziel
Die alte Website war nicht vollständig für mobile Geräte optimiert, und die Navigation war aufgrund der unstrukturierten Inhalte schwer verständlich. Auch das visuelle Design war wenig ansprechend.
Die gesamte Seite war stark informationszentriert aufgebaut, statt nutzerzentriert – wodurch das Angebot nicht als Erlebnis vermittelt wurde.
Mobile Geräte dominieren den Web-Traffic (ca. 60–70 % Anteil), weshalb ein Mobile-First-Ansatz entscheidend für Benutzererfahrung und SEO ist, da Google die mobile Indexierung priorisiert (Stand 2026).
Zudem nehmen sich Nutzer immer weniger Zeit, Inhalte zu erfassen. Deshalb ist es entscheidend, die Informationen so aufzubereiten, dass Besucher sofort verstehen, worum es geht und was angeboten wird.
Vor diesem Hintergrund haben wir Funktionalität und Design der Website grundlegend überarbeitet.
Prozess
Analyse – der wichtigste Schritt
Nach der Analyse der bestehenden Website stellten wir fest, dass sich die Inhalte sinnvoll in 4 + 1 Seiten strukturieren lassen. Dadurch wurde die Navigation deutlich vereinfacht.
Da die vielen Textblöcke überfordernd wirkten, entwickelten wir zunächst ein neues Inhaltslayout und skizzierten dieses auf Papier, um die neue Klarheit der Website zu visualisieren.
Mobile First
Anschließend erstellten wir ein Low-Fidelity-Wireframe im Mobile-First-Ansatz (mit Whimsical), um die Benutzerführung so einfach und intuitiv wie möglich zu gestalten.
Inspiration
Im nächsten Schritt sammelten wir Inspirationen und entwickelten darauf basierend Mid-Fidelity-Entwürfe. Dabei verbesserten wir nicht nur die Funktionalität, sondern auch die visuelle Gestaltung der Benutzeroberfläche.
Entwicklung
Auf dieser Grundlage begannen wir mit der Ausarbeitung der Designkonzepte unter Berücksichtigung des Corporate Designs (CI).
Nachdem das finale Designkonzept abgestimmt war, startete die Umsetzung.
Farben, Logo und Inhalte waren bereits vorgegeben, daher entwickelten wir neue, aufmerksamkeitsstarke Bilder zur Ergänzung. Anfangs nutzten wir Platzhalterbilder, die später durch KI-generierte Bilder ersetzt wurden.
Das zentrale Element der Website ist die Startseite, die als Übersicht aller Menüpunkte dient und die Inhalte visuell hervorhebt.
Uns war es wichtig, die Atmosphäre des Parks auf der Website erlebbar zu machen, damit Besucher einen authentischen Eindruck erhalten. Ebenso spielen Innen- und Außenansichten der Gebäude eine wichtige Rolle, um Erwartungen realistisch zu gestalten.
Aus diesem Grund ist die neue Bildergalerie – mit vielen großformatigen Bildern – ein zentrales Element der Website.
Zusätzliche Features
Die Inhalte wurden durch visuelle Elemente angereichert, um sie ansprechender und leichter verständlich zu machen.
Zusätzlich integrierten wir interaktive Funktionen, wie beispielsweise eine Hotspot-Karte des Geländes.
Beim Überfahren eines Kontaktpunkts können Besucher:
direkt eine Nachricht schreiben
eine Route über Google Maps planen
Der Link zur Reservierung ist ebenfalls dort integriert.
Vorher:
Nachher:
Vorher:
Nachher:
Erkenntnisse
„Das Projekt hat gezeigt, dass ein strukturierter, schrittweiser Designprozess nicht nur für mehr Transparenz sorgt, sondern auch zu besseren Entscheidungen führt.“
Hungarian 
German