SPD Berlin - Modul-Koffer
für lokale Websites

Das Handeln von Parteien wird für viele Bürger erst durch die praktische Umsetzung von Politik in der eigenen Nachbarschaft und den Austausch mit den Abgeordneten vor Ort greifbar. Die klassische Website kann hier als erster Anhaltspunkt für die Geschehnisse im Kiez und die Kontaktaufnahme dienen.

Die SPD Berlin hat uns deshalb damit beauftragt, ihre Websites aufzufrischen, die Usability zu verbessern und sie einfacher zugänglich zu gestalten. Wir reden hier von Websites, da die Berliner SPD in zwölf Kreise gegliedert ist, die in ihrem Zuschnitt den Berliner Bezirken entsprechen. Die Kreisverbände bieten eigenständige Veranstaltungen an, berichten aus ihrer Arbeit im Bezirk und nutzen dazu eine eigene Website, die an der Multisite der Berliner SPD angedockt sind.

Der Auftrag

Im Fokus stand also zunächst der Relaunch der Multisite der SPD Berlin: www.spd.berlin. Den einzelnen Bezirken sollte dann auf Basis dieser Seite ein Modul-Koffer an die Hand gegeben werden. Durch die Nutzung vorgefertigter Templates und Bausteine in WordPress, sollte es ihnen erleichtert werden, ihre eigene Bezirksseite ohne große Vorkenntnisse zu erstellen und pflegen zu können.

02 Wireframes Figma

Usability Check

Aber fangen wir erst einmal von vorne an:

Wie jede andere Partei auch, zielt die SPD Berlin mit ihren Websites darauf ab, interessierte Bürger, SPD-Mitglieder und potentielle Neumitglieder anzusprechen. So haben wir mit der Bearbeitung und Zielsetzung für die einzelnen Anwendergruppen gestartet und zunächst deren Fokus formuliert.

  1. Allgemein interessierte Bürger*innen:
    Wofür steht die SPD?
    Mit welchen Themen beschäftigt sie sich?
  2. Bestehende SPD-Mitglieder:
    Welche aktuellen Entwicklungen gibt es?
    Wer sind meine Ansprechpartner*innen im Bezirk?
    Wo finde ich Materialien?
  3. Neumitglieder:
    Was macht die SPD eigentlich konkret?
    Wie kann ich mich aktiv einbringen und Politik in meinem Bezirk machen?

Mit den Usergruppen im Hinterkopf zeigte die Bestandsaufnahme der Websites: das Nutzererlebnis muss vereinfacht werden. Überschriften müssen besser einhalten, was sie versprechen und Informationen sollten möglichst auf einem Klick auffindbar sein – sei es eine Übersicht zu Ansprechpersonen oder Termine im Bezirk.

Clustern, Kürzen, Vereinfachen

Entsprechend haben wir gemeinsam vorhandene Inhalte gescreent und wo es möglich war, durch Clusterung und Zusammenfassung die Websites vereinfacht und verkürzt. Die Navigation konnte um einige Unterkategorien reduziert werden. Und eine nutzerfreundliche mobile Version gehört selbstverständlich auch dazu!

01 Konzeption Figma
figma – SPD Berlin Sitemap
04 Styleguide Figma
figma Screenshot Design Manual

Der Modul-Koffer für die Bezirke

Als Basis für alle Websites haben wir ein modulares System mit WordPress entwickelt. Dieses sollte für die Bezirke individuell nutzbar und auch für ungeübte Web-Admins verständlich sein. Die für die SPD Berlin entwickelte WordPress-Seite diente uns dabei als Basis. Wir haben sie durch ein modulares System mit Templates ergänzt. Langfristig gedacht ist der Modulkoffer jederzeit um neue Module erweiterbar. Diese sind einfach verständlich aufgebaut und können als Templates durch die zuständigen Mitglieder im Bezirk eigenständig genutzt werden.

06 WordPress Gutenberg Blocks

Auf den Websites der Bezirke Charlottenburg-Wilmersdorf, Lichtenberg, und Neukölln seht ihr bereits die Umsetzung des modularen Systems.

Modul-Koffer für die SPD Berlin
09 WordPress Frontend
Homepage – SPD Berlin Website

Wir freuen uns darauf, weitere Teams mit dem System auszustatten und damit sehr gut auf den Wahlkampf für das Abgeordnetenhaus und die Bürgermeister*in vorbereitet zu sein!

Weitere Referenzen
eat.sleep .drink screenshot e1358851077590
eat.sleep.drink – die Website für Azubis im Gastgewerbe

Nachwuchs dringend gesucht: Trotz guter Prognosen und zunehmenden Fachkräftemangels gibt es in der Berliner Hotel- und Gaststättenbranche unverhältnismäßig viele Ausbildungsabbrüche und unbesetzte Ausbildungsplätze. Die Website unter dem Motto „eat.sleep.drink“ soll das ändern. Sie gibt Auskunft […]

150610 Thalia Liesdichweg Posting C 1
#Liesdichweg vom Netz auf die Frankfurter Buchmesse

Kennt ihr das, sich „weg zu lesen“? An einem Ort bleiben und dabei in fremde Welten reisen, nur mit Hilfe der eigenen Fantasie – das ist das Wunder von guten Geschichten, von guten Büchern, vom […]

respekt2010.de startseite
Respekt2010 Integrationswettbewerb

In Zusammenarbeit mit der Agentur Silk Relations, hat PANORAMA3000 für die Ideengeber und Haupt-Koordinatoren HeimRicketts, Agentur für Crossmarketing, dem Integrationswettbewerb Respekt2010 auf die Welt geholfen. Jugendliche zwischen 13 und 19 waren aufgerufen, ihre eigene Strophe […]