Die Diakonie Katastrophenhilfe – das humanitäre Hilfswerk der evangelischen Kirchen in Deutschland – unterstützt weltweit Menschen in Not. In Zusammenarbeit mit Partnerorganisationen vor Ort setzt die Diakonie Katastrophenhilfe auf schnelle, aber auch nachhaltige Hilfe bei Naturkatastrophen, Kriegen und Konflikten. Die Website der Diakonie Katastrophenhilfe ist für die Organisation ein zentraler Kanal, um über Projekte zu informieren und Spenden zu sammeln.

Die bisherige Version der Website war in die Jahre gekommen und erfüllte diesen Zweck nicht mehr zufriedenstellend. Außerdem war die Website nicht responsive. Die Diakonie Katastrophenhilfe hat uns daher beauftragt, das Konzept und Design für den Relaunch der Website zu erarbeiten. Und da wir nach dem Prinzip des User-Centered Design arbeiten stand dabei der Nutzer im Mittelpunkt – in jeder Projektphase.

Interne Anforderungen erheben

Der erste Schritt bei der Erarbeitung eines neuen Konzepts muss immer die Anforderungserhebung sein. Die Nutzeranforderungen kannten wir bereits. Doch auch die internen Ziele sind von großer Bedeutung. In einem Kickoff-Workshop mit den Verantwortlichen bei der Diakonie Katastrophenhilfe haben wir erhoben, welche Ziele die Organisation mit der Website verfolgt und welche Nutzerziele erfüllt werden sollen. Die wichtigsten Aspekte waren u.a. als seriöser und kompetenter Helfer bei Katastrophen zu gelten und Transparenz für die Spender zu schaffen.

In einem Stakeholder-Workshop mit allen Projektbeteiligten haben wir anschließend die Inhalte priorisiert. Mithilfe des Core Models und der Empathy Map haben wir erhoben, welche Seiten am wichtigsten sind und welche Inhalte aus Sicht der Stakeholder dargestellt werden müssen – sortiert nach Priorität.

Erster Konzeptentwurf

Auf dieser Grundlage sowie den Erkenntnissen aus den vorherigen Projekten entstand im Anschluss der erste Konzeptentwurf. Am Anfang stand dabei die grundlegende Informationsarchitektur. Anhand der Priorisierung der Website-Inhalte im Stakeholder-Workshop konnten wir den Fokus auf die Projekte und die Ziele der wichtigsten Zielgruppe – den privaten Spendern – legen. So entstand ein übersichtliches und stimmiges Hauptmenü.

Im nächsten Schritt wurde das Konzept für die drei wichtigsten Seiten entworfen – die Startseite, die Projektdetailseite und die Übersicht aller Projekte (Projekte weltweit). Um die Wirkung der Spenden zu verdeutlichen, entwickelten wir einen Spenden-Slider, der je nach Betrag ein Beispiel für die Verwendung der Spende zeigt. Auf den Projektseiten sah das Konzept zudem eine Inhaltsschicht vor, die darüber informiert, was vor Ort konkret getan wird – illustriert mit Bildern. Um die Aktualität des Projekts zu verdeutlichen, werden aktuelle Nachrichten zu dem Projekt angezeigt.

Damit ein sinnvolles Konzept entsteht, das in der Realität funktioniert, arbeiten wir von Anfang an mit echtem Content, der in diesem Fall aus ausgewählten Spendenprojekten stammte. Auf vollständiges Feindesign wurde zunächst bewusst verzichtet, um den Fokus auf Inhalte und Funktionalitäten zu setzen.

Ein Grundsatz des User-Centered Design ist die frühzeitige und iterative Evaluation des Konzepts. Daher führten wir bereits an diesem Punkt den ersten Usability-Test durch. Um Verzögerungen zu vermeiden und Aufwände gering zu halten, entschieden wir uns für agiles UX-Testing. Das heißt: Ein Testtag, fünf Einzeltests und live Auswertung nach jeder Session. Die Usability-Tests führten zwei unserer User Research-Experten durch. Das Konzeptionsteam war live dabei und konnte die Ergebnisse am Ende des Tages direkt mitnehmen.

Diese erste Testrunde war besonders wichtig, um das Konzept der grundlegenden Websitestruktur zu validieren. Die Teilnehmer äußerten sich positiv über die klare Struktur. Auch das wichtigste Ziel der Diakonie Katastrophenhilfe – ihre Vertrauenswürdigkeit zu verdeutlichen – konnten wir bereits erfüllen. Dazu trugen u.a. die Spendenbeispiele bei, die von den Teilnehmern positiv bewertet wurden.

Dennoch war noch nicht alles perfekt. Neben kleineren Schwierigkeiten bei der Interaktion mit dem Spenden-Slider wurden die Spendenbeispiele teilweise übersehen. Wir erwarteten jedoch, dass wir das über das Visual Design lösen würden. Darüber hinaus hatten die Teilnehmer z.B. Schwierigkeiten, zum Projektüberblick zu gelangen.

Iteration #2: Visual Design überprüfen & finalisieren

Nach wenigen Wochen folgte die zweite Testrunde – wieder agil, diesmal umfassender. Neben den überarbeiteten Seiten wurden auch neue Seiten getestet (Unsere Themen, Über uns). Ein Teil des Tests wurde außerdem auf dem Smartphone durchgeführt, um das mobile Navigationskonzept zu überprüfen.

Das Ergebnis fiel insgesamt besser aus als beim ersten Usability-Test – die neuen Seiten wurden positiv bewertet und Probleme aus der vorherigen Testrunde konnten beseitigt werden. Die Navigation auf dem Smartphone hat ohne Probleme funktioniert.

Die Erkenntnisse aus dem zweiten Test flossen in eine weitere Iteration ein, aus der das finale Konzept hervorging. Parallel zur Finalisierung des Konzepts haben wir mit dem Design begonnen. Mithilfe von Mood Boards konnten wir früh abklopfen, in welche Richtung es gehen soll und welche Werte die Diakonie Katastrophenhilfe vermitteln möchte. Auf dieser Basis wurden eine passende Bildsprache und Typografie ausgewählt und das Design ausdefiniert. Das vollständige und designte Konzept haben wir dann an den Kunden zur Umsetzung übergeben.

Um zu überprüfen, ob bei der Umsetzung oder durch das Visual Design unvorhergesehene Usability-Probleme entstanden sind, wurde vor dem Launch ein finaler Usability-Test der umgesetzten Website durchgeführt. Da die großen Fragestellungen bereits in der Konzeptphase überprüft wurden, konnten wir uns an diesem Punkt mit Detailproblemen und -designfragen auseinandersetzen, die wir gemeinsam mit dem Kunden priorisierten. So haben wir z.B. kurzfristig eine leichte Änderung des Startseitendesigns beschlossen. Es zeigte sich auch, dass teilweise nicht ausreichend Content und Spendenbeispiele zu den Projekten existieren.

Damit der Spendenslider so seinen wichtigen Zweck erfüllen kann, haben wir der Diakonie Katastrophenhilfe daher Guidelines für die Erstellung von Spendenbeispielen an die Hand gegeben.

Drei Wochen später ging die fertige Website online. Bis zu diesem Punkt wurde sie in drei Usability-Tests evaluiert und anhand von Nutzerfeedback optimiert. Das Ergebnis ist eine moderne Website, die auf allen Endgeräten problemlos zu bedienen ist, ein positives und vertrauenswürdiges Bild der Diakonie Katastrophenhilfe vermittelt und transparent über Hilfsprojekte und die Verwendung von Spenden informiert.