Pfennigparade Website Redesign

Website Redesign: Die neue Pfennigparade-Website

Pfennigparade Website Redesign

Website Redesign: Die neue Pfennigparade-Website

Stiftung, NGO, Webdesign

Website Redesign: Stiftung Pfennigparade

Eine neue Website für die Stiftung Pfennigparade.

Auftraggeber:
Stiftung Pfennigparade, München, gemeinnützige Stiftung, über 2.000 Mitarbeiter
Aufgabe:
Entwicklung einer barrierearmen Website mit zeitgemäßem Look für die Stiftung und die Angebote der Tochtergesellschaften. Leistungen:
Leistungen:
Beratung, Strategieentwicklung, Konzeption, UX, Webdesign, Umsetzung in Wordpress
Mobile-, Desktop- und Tablet-Ansicht der neuen Pfennigparade Website
Mobile-, Desktop- und Tablet-Ansicht der neuen Pfennigparade Website

Ausgangslage – Thema und Aufgabe

Der bestehende Internetauftritt der Pfennigparade mit ihrer über 60-jährigen Geschichte, ihren 80 Einrichtungen und Diensten und ihren 2.500 Mitarbeitern konnte das umfassende Angebot der Stiftung und ihrer 16 Tochtergesellschaften nicht mehr adäquat abbilden. Über die Jahre war die Seite in alle Richtungen gewachsen und nur mehr schwer navigierbar. Einige Teile des Angebots wurden nicht, andere veraltet dargestellt.

Insgesamt war die Darstellung stark von der Innensicht der Pfennigparade bestimmt und für die User schwer nachzuvollziehen. Neben konzeptionellen und inhaltlichen Baustellen wies der Auftritt auch technische Mängel auf, wie fehlende Responsiveness, veraltete Links, etc. Die dringlichste Aufgabe war daher eine strukturelle und verständliche Neu-Ordnung des Angebots der Pfennigparade als Basis für den Website-Relaunch.

Strategie – Der Weg zum Ziel

In zahlreichen Interviews wurden die Inhalte und Anforderungen der einzelnen GmbHs und Dienste sowie der Stiftung als Muttergesellschaft gesammelt. Um die umfangreichen Inhalte in eine nachvollziehbare Website-Struktur zu überführen, wurde das Angebot in die Lebenswelten „Bildung, Arbeit, Wohnen, Gesundheit und Freizeit“ unterteilt und die Inhalte den jeweiligen Lebenswelten zugeordnet.

So entstand eine Struktur die Nutzer-fokussiert und relativ leicht zu navigieren ist. Diese Struktur diente als Grundlage für die Entwicklung entsprechender Seiten-Typen und Templates, aus denen sich die Site zusammensetzt.

Lösung – Umsetzung

Für das Design der Seitentypen war neben den Aspekten der Übersichtlichkeit und der Ladegeschwindigkeit vor allem der Aspekt der Barrierefreiheit maßgeblich. So wurde als Webfont eine barrierearme Schrift (FiraGo) eingesetzt, ein System zur farbigen Codierung der Lebenswelten eingeführt und natürlich auf eine Barrierefreiheits-konforme Codierung geachtet. Die Navigation beruht auf dem Prinzip sich immer weiter verdichtender Informationseinheiten (z. B.: Bildung – Schulen – inklusive Realschule).

Alle auf der Website eingebundenen Bilder sind authentisch, d.h. sie zeigen „echte“ Mitarbeiter und Reha-Kunden in den Räumen der Pfennigparade. Diese Bildwelt bestimmt – neben der Farbkodierung und den individuellen Designelementen und Illustrationen – das Gesamtbild der neuen Website. Die Umsetzung erfolgte als WordPress-Seite.

Grafische Elemente – Pfennigparade Website

Webdesign Elemente Pfennigparade – 01
Webdesign Elemente Pfennigparade – 02

Desktop Ansichten

Desktop Ansicht
Desktop Ansicht – Arbeit
Desktop Ansicht
Desktop Ansicht – Arbeit
Desktop Ansicht
Desktop Ansicht – Beratung
Desktop Ansicht
Desktop Ansicht – Kontakt
Desktop Ansicht
Desktop Ansicht – Kontakt
Desktop Ansicht
Desktop Ansicht – Über uns

Desktop Ansicht
Desktop Ansicht – Über uns
Desktop Ansicht
Desktop Ansicht – Über uns

Desktop Ansicht
Desktop Ansicht – Über uns

Responsive Ansichten

Tablet Ansichten
Ansichten Tablet
Mobile Ansichten
Ansichten Mobile Phone

Illustrationen für den Spenden-Bereich der Pfennigparade Website

Illustration Pfennigparade – Website
Illustration Pfennigparade – Website
Illustration Pfennigparade – Website
Illustration Pfennigparade – Website
Illustration Pfennigparade – Website
Illustration Pfennigparade – Website
Illustration Pfennigparade – Website
Illustration Pfennigparade – Website
Desktop Ansicht
Desktop Ansicht – Spenden

Hier geht's zur neuen Pfennigparade Website:

www.pfennigparade.de