Casestudy

The Waterhouse Gallery

Über das Projekt

Ein soziales Kunstfestival für sauberes Trinkwasser weltweit.

Die Waterhouse Gallery ist ein soziales Kunstfestival, das auf lebendige und kreative Weise das Bewusstsein für Wasser-, Gesellschafts- und Umweltprobleme verbreitet. Umgesetzt von Viva con Agua Mitgliedern, setzt sich die Organisation für sauberes Trinkwasser weltweit ein.

Die Galerie zeigt eine Vielfalt an Kunst mit Schwerpunkt auf Streetart von lokalen und internationalen Künstlern. Die bisherige Onlinepräsenz von WHG war hinsichtlich der User-Experience und des Interface-Designs sowie der Funktionalität und Suchmaschinenoptimierung unzureichend aufgestellt. Daher war es meine Aufgabe, eine neue Onlinepräsenz von Grund auf für das Festival aufzubauen. Dafür arbeitete ich mit dem Media-Team, einem externen Grafikdesigner, und der Projektleitung eng zusammen.

Meine Rolle

Digitale Markenstrategie
UI/UX Design
WordPress Webentwicklung

Klient

Viva con Agua &
The Waterhouse Gallery

Zeitraum

01.03.20 – 14.11.20

Der Ablauf

Vom Brainstorming über Design bis hin zur Entwicklung

01

Kennenlernen

Zu Beginn haben wir uns in einem persönlichen Meeting zusammengefunden und vorgestellt. Ich wurde mit der Idee von Viva con Agua und den Projektzielen der Waterhouse Gallery vertraut gemacht. Wir haben die bisherige Webseite und die gewünschten Änderungen besprochen. Ich beriet die Waterhouse Gallery hinsichtlich der nötigen technischen Voraussetzungen für die Webseite. Am Ende habe ich meinen Projektablauf und die dafür notwendigen Schritte vorgestellt.

02

Konzeptentwicklung & Designsystem

Nach der Analyse ähnlicher Kunstfestivals in der Stadt Groningen, einer Zielgruppenanalyse, sowie der gewünschten Wirkweise von der Waterhouse Gallery definierten wir, wie die Waterhouse Gallery nach Außen kommuniziert werden soll. Hier war uns wichtig, dass sich der Streetart-Kunststil sowie das Wassermotiv durch das gesamte Design zieht. Darauf basierend, definierten wir Grundfarben, Designelemente und Fonts für die Webseite mit dem Ziel, ein Designsystem zu entwickeln, welches sowohl modern als auch einladend wirkt. 

03

UI/UX Design

Zu Beginn des Designprozesses habe ich die Grundstruktur der Webseite mithilfe einer Sitemap und Wireframes skizziert und dem Team vorgestellt. Um das Wassermotiv zu kommunizieren, ließen wir von einem externen Grafikdesigner eine Wasserblasenanimation erstellen. Nachdem die nötigen Bilder und Texte von dem WHG-Team an mich übergeben wurden, erstellte ich einen interaktiven Prototypen, mit dessen Hilfe ich die Webseitenerfahrung dem Team gezeigt habe. Im Design war es mir besonders wichtig, durch verschiedene Bewegungseffekte und eine App-ähnliche Mobilversion Dynamik, Modernität und Interaktivität – passend zur Waterhouse Gallery – zu verkörpern.

04

Webentwicklung

Nachdem das Design finalisiert wurde, habe ich die Webseite mit dem Content-Management-Programm WordPress umgesetzt.  Besonders anspruchsvoll war hier, die Bewegungseffekte zu programmieren und anzupassen. Zusätzlich wurden verschiedene Bewerbungsformulare für die Bewerbung von Künstlern und freiwilligen Helfern erstellt. Damit das Team auch zukünftig in der Lage ist, Künstler und Kunstwerke selbst einzupflegen, habe ich die Webseite so angepasst, dass sie flexibel selbst bearbeitet werden kann.

05

Geschwindigkeit, SEO & Sicherheit

Nachdem die Webentwicklung vollendet war, optimierte ich die Webseite auf Geschwindigkeit. Trotz Shared-Hosting und Videoeinbindung konnten wir sehr schnelle Ladezeiten von maximal 2,5 Sekunden erzielen. Anschließend wurden verschiedene Vorkehrungen zur Webseitensicherheit, eine CDN-Integration und die Konfiguration eines SEO Plugins vorgenommen.

06

Nutzertests

Bevor wir die Webseite frei zugänglich schalteten, durchliefen wir noch mehrere Nutzertests, um die letzten Fehler  und Usability Probleme auszubessern. Anschließend ging die Webseite live. Sie wird bis heute stetig aktualisiert und verbessert.

Wasser & Streetart
als Leitmotiv. Interaktivität
für den "WOW-Faktor".

Interaktiv und dynamisch
durch Bewegungseffekte.

App-like Navigation
fürs Smartphone.

Vorher & Nachher

WHG Mockup Vorher Nachher
WHG Mockup Nachher 1 Vorher
Zurück

Ein neues Projekt beginnen.

Stelle dich doch kurz vor
Was kann ich für dich tun?
Was sind die Rahmenbedingungen?
Erzähle mir etwas mehr über dein Projekt
• Was machst du/dein Unternehmen?
• Vor welchen Herausforderungen stehst du/ihr?
• Wer ist die Zielgruppe?
• Wer sind die Wettbewerber?
Alles klar! Wenn du möchtest, kannst du mir noch kurz Feedback geben und dann auf absenden drücken. Ich melde mich bald bei dir!