In mehreren Briefing-Sitzungen wurden ein gemeinsames Lastenheft entworfen. Die Webseite sollte den Nutzenden eine Plattform bieten, auf der sie kreativ werden konnten. Dabei ging es nicht nur darum, eigene Zwieback-Kreationen zu entwerfen, sondern auch die Möglichkeit zu haben, diese individuell zu benennen und direkt über soziale Medien wie Instagram oder per WhatsApp zu teilen. Durch eine einfache und intuitive Benutzeroberfläche konnten die Nutzer:innen ihre individuelle Minis Zwiebacksorte aus verschiedenen Grundkomponenten wie Zwieback, Glasur und Topping zusammenstellen. Eine klare visuelle Darstellung im Konfigurator sorgte dafür, dass die Nutzer:innen ihre Kreationen in Echtzeit sehen und anpassen konnten. Zudem ermöglichte die Webseite den Download eines Bildes der erstellten Sorte, das die Nutzer über soziale Netzwerke teilen konnten, um ihre Kreation zu präsentieren.

Ein weiteres Ziel der Seite bestand darin, im Backend eine Datenbankfunktion zu integrieren, die es ermöglichte, Nutzerdaten und Kreationsdetails zu erfassen und zu speichern. Dabei wurden sowohl die gewählten Zutaten als auch der individuell vergebene Name jeder Kreation in einer Datenbank gespeichert, sodass die Kreationen später im Rahmen eines Votings genutzt werden konnten. Die Webseite sollte außerdem auf allen Endgeräten – vom Desktop über das Tablet bis zum Smartphone – optimal funktionieren und durch moderne Webtechnologien sowohl leistungsfähig als auch sicher sein. Zusätzlich wurde auf eine SEO-Optimierung geachtet, um eine gute Sichtbarkeit in Suchmaschinen zu gewährleisten.

Konzeption und UX-Design

Ein wesentlicher Bestandteil unserer Arbeit war die Entwicklung des gesamten Konzepts sowie die Gestaltung der User Experience (UX-Design). Wir erstellten mehrere Design-Entwürfe, um sicherzustellen, dass das finale Design die Bedürfnisse der Nutzer:innen und die Anforderungen von Brandt optimal erfüllt. Im UX-Design legten wir besonderen Wert darauf, dass die Webseite intuitiv und einfach zu bedienen ist, damit die Nutzer:innen sich schnell zurechtfinden und Spaß daran haben, ihre Zwieback-Kreationen zu gestalten. Durch die enge Abstimmung mit Brandt stellten wir sicher, dass das Design die Markenidentität widerspiegelt und zugleich modern und einladend wirkt.

Umsetzung in zwei Phasen

Das Projekt wurde in zwei Phasen umgesetzt, um den unterschiedlichen Anforderungen gerecht zu werden. In der ersten Phase lag der Fokus auf der Kreation neuer Sorten. Hier entwickelten wir einen Sorten-Konfigurator, in dem die Nutzer:innen ihre Wunschkombination aus verschiedenen Komponenten zusammenstellen konnten. Für eine bessere Erfahrung und ein visuelles Erlebnis wurden passende Videos von der Agentur quadratkollektiv GmbH eingebunden, welche die eigenen Kreationen darstellten. Nachdem die Nutzer:innen ihre Kreation abgeschlossen hatten, konnten sie ihre Sorte über WhatsApp teilen oder für Instagram herunterladen. Dies förderte die Interaktion der Nutzer:innen mit ihren Kreationen und erweiterte die Reichweite der Brandt GmbH in sozialen Netzwerken.

Die zweite Phase drehte sich um das Voting, in dem die Community für ihre Lieblingskreationen abstimmen konnte. Die sechs häufigsten Kreationen aus der ersten Phase wurden mit ihren von der Community erstellten Namen zur Auswahl gestellt. Anschließend konnten die Nutzer:innen ihre Favoriten küren. Um ein faires Voting sicherzustellen, wurde eine Mehrfachabstimmung unterbunden. Zudem gab es in beiden Phasen die Möglichkeit, an einem Gewinnspiel teilzunehmen, bei dem die erfassten Daten zur Auslosung genutzt wurden. Die am häufigsten gewählte Sorte soll ein Jahr später als limited Edition im Handel erscheinen.

Technische Umsetzung und Herausforderungen

Für die Umsetzung des Projekts entschieden wir uns für eine leistungsfähige technische Basis. Im Backend wurde eine PostgreSQL-Datenbank bei Supabase aufgesetzt und kontinuierlich gepflegt, um alle Daten der Nutzer:innen und deren Kreationen sicher zu speichern. Die Frontend-Entwicklung erfolgte mit der React-Framework-Lösung Remix, ergänzt durch Tailwind CSS für die Gestaltung der Templates. Framer Motion kam hinzu, um die Interaktion mit dem Konfigurator durch spielerische Animationen noch ansprechender zu gestalten. Der gesamte technische Aufbau wurde durch einen Node.js-Server unterstützt, der für schnelle Ladezeiten und Stabilität sorgte.

Besonders herausfordernd war der enge Zeitrahmen des Projekts. Die Optimierung für mobile Endgeräte hatte höchste Priorität, da ein Großteil der Nutzer voraussichtlich über das Smartphone auf die Webseite zugreifen würde. Gleichzeitig mussten alle rechtlichen Anforderungen, insbesondere in Bezug auf das Teilen und Speichern von Nutzerdaten, strikt eingehalten werden. Unser Team stellte sicher, dass sämtliche Inhalte DSGVO-konform integriert wurden. Zudem achteten wir darauf, die SEO-Optimierung frühzeitig umzusetzen, um die Sichtbarkeit der Seite in Suchmaschinen sicherzustellen und so eine breite Zielgruppe zu erreichen.

Abschluss und Monitoring

Um zu gewährleisten, dass die Webseite stabil lief und alle Funktionen reibungslos funktionierten, überwachten wir die Datenbank und die Ergebnisse der beiden Phasen fortlaufend. Das regelmäßige Monitoring ermöglichte es uns, Zwischenergebnisse sowie die finalen Endergebnisse des Votings und Gewinnspiels transparent und rechtzeitig zu kommunizieren.

Fazit

Die Webseite für das Community Event der Brandt GmbH war ein voller Erfolg. Die Nutzer:innen schätzten die Möglichkeit, ihre eigenen Mini Zwiebackspezialitäten zu gestalten, und das Voting sowie das Gewinnspiel steigerten das Engagement und die Interaktivität innerhalb der Community. Die Kombination aus einem spielerischen Konfigurator, der Möglichkeit zum Teilen und einer klar strukturierten Datenbank im Hintergrund schaffte eine solide Grundlage, um die Marke Brandt auf moderne Weise zu präsentieren und die Bindung zur Zielgruppe zu stärken. Mit der vollständigen Konzeption, Gestaltung und Programmierung aus einer Hand gelang es uns, eine interaktive und leistungsstarke Plattform zu realisieren, die Brandt und seine Community nachhaltig verbindet.