be:bi Betreuung & Bildung gGmbH ist eine Kindertagesstätte im wunderschönen Esslingen bei Stuttgart. Die KiTa hatte eine veraltete Webseite, auf der Eltern wichtige Informationen (z.B. zu Abholzeiten oder Ernährung) nicht fanden und auch das Design veraltet und nicht zur Atmosphäre der KiTa passte.
Daher setzten das Team von be:bi und ich uns das Ziel, eine Webseite mit optimaler Nutzerführung, aktuellen Inhalten und frischem Branding zu gestalten, um Eltern (Bestandskund:innen wie Neukund:innen) alle erforderlichen Informationen zu bieten.
Projektjahr
2022
Kunde
be:bi Betreuung & Bildung gGmbH
Meine Rolle
Design Lead
Team
Sina Klinghammer (PO be:bi),
Matthias Lebschy (Managing Director be:bi)
Yannis Koschel (Freelance Filmmaker and Producer of the Imagevideo and Images on the website)
Requirements Workshops
Competitor Analysis
Content Audit
Information Architecture
User Journey
User Interface
Branding
Illustration
Wireframing
Design Workshop
WIX Implementation
Kick-off Meeting
1. Gemeinsam Projekt-Vision und Ziele festlegen
2. Wissenstransfer und Austausch über aktuellem Zustand, Nutzerbedürfnissen und Anforderungen
3. Gemeinsame Definition von Milestones
4. Festlegung der nächsten Arbeitstermine
Anforderungs- Workshop
1. Einstieg (Agenda, Erwartungen)
2. Präsentation der Bedürfnisse der Eltern, sowie Herausforderungen bzw. Probleme und Ziele in Form einer User Journey und Aufgabenmodell
3. Besprechung und Finalisierung des Projektplans
4. Definition der nächsten Schritte und Aufgaben
Neue Struktur und Designvorschläge
1. Planung, Organisation und Durchführung eines Workshops mit Stakeholdern (Iteration Workshop)
2. Prototypen optimieren und High-fidelity Version erstellen
3. Prototyp mit Nutzer:innen testen
4. Sprint Review erstellen und mit Stakeholdern durchführen
5. Letzte Feedback Runde
Hand-Over Phase
1. Dokumentation der User Stories in einem Handbuch (beinhaltet User Stories im Zusammenhang mit Wireframes, Klickweg im Prototyp sowie technischen und fachlichen Anforderungen)
2. Finale Präsentation
Ziele und Visionen definieren
Um meine Workshops kurz und effizient zu halten, frage ich immer nach den Erwartungen des Kunden für das Treffen und wir setzen ein gemeinsames Ziel für den Workshop, um so produktiv wie möglich auf dieses Ziel hinzuarbeiten.
Anforderungen der Nutzer:innen
Fokus des ersten Workshops war es auch, einmal die Herausforderungen und Wünsche der Nutzer:innen (Eltern) bezüglich einer Kita Webseite herauszuarbeiten.
User Journey (Nutzerreise)
Die Einzelschritte und Aufgaben welche Eltern durchlaufen auf der Suche nach einem geeigneten Kita Platz, habe ich mit der Methode User Journey kurz und knapp aufbereitet. Unter die Schritte der Nutzer:innen habe ich Aussagen aus den Befragungen ergänzt, welche Zusatzinformationen zu Aufgaben, Herausforderungen oder Wünsche bringen.
Moodboard
Auf einem Moodboard sammelte ich Farben, Schriften sowie Illustrationen und Bildanmutungen, welche gut zum Thema Kinder und Kita bzw. Kindergarten passen. Die Ästhetik sollte warm und leicht verspielt jedoch auf das Wesentliche reduziert sein, sodass Gestaltungselemente nicht als Verzierung, sondern visuelle Unterstützung dienen sollen.
Die Informationsarchitektur
Nach einem Content Audit (Analyse und Sicherstellung der Inhalte) habe ich die Probleme der alten inhaltlichen Struktur hervorgehoben (keine internen Verlinkungen zu relevanten Informationen) und eine neue Informationsarchitektur entwickelt, bei der die Ziele der Benutzer:innen als strukturelle Leitlinie dienten. Während des Aufbaus der neuen Inhalte haben wir diese auch als "lebendiges Dokument" genutzt, um die Struktur ständig zu aktualisieren, wenn neue Inhalte hinzukamen. Dadurch konnte der Kunde während des Content-Erstellungsprozesses den Überblick behalten und direkt Feedback geben.
Design
Nachdem das Kita Team ihre Vorlieben im Moodboard abgestimmt hatten, erstellte ich einige Design-Varianten. Innerhalb von zwei Iterationsphasen einigten wir uns auf ein Design. Das Bild zeigt eine der Variationen, bevor das endgültige Design festgelegt wurde (mit Feedback des Kita Teams als Post-It).
High-fidelity Wireframes
Parallel zum Designprozess entwickelte ich erst grobe Wireframes, um die Inhalte in ein Layout zu gießen und erste Module zu entwickeln. Die Module helfen in der Umsetzung, da sie wie Templates funktionieren und bei bestimmten Kombinationen (z.B. Text-Bild) immer wieder verwendet werden können und dabei konsistent in der Gestaltung bleiben. Nach Abnahme der groben Wireframes und Festlegen des finalen Designs habe ich für die komplexeren Seiten noch detailliertere Wireframes gebaut, damit der Kunde sich davon ein genaues Bild machen konnte um finales Feedback vor der Implementierung zu geben.
Umsetzung mit Baukastensystem
Die Webseite habe ich zusammen mit meinem Partner und Videographen Yannis Koschel im Website-Baukasten Wix.com umgesetzt. Da Baukastensysteme mit gewissen gestalterischen Grenzen kommen, habe ich diese bei der Erstellung der Module berücksichtigt und parallel auf Wix.com getestet.
