Digitale Dialogplattform
VIKZ
Der Verband VIKZ legt großen Wert auf Offenheit und Transparenz. Er plante den Bau seiner neuen Zentrale. Als Religionsgemeinschaft sowie unabhängiger, überparteilicher und gemeinnütziger Verein versteht sich der VIKZ als offener Akteur im öffentlichen Raum.
PROBLEM
Teile der Öffentlichkeit reagierten auf das Neubauprojekt mit Sorge, während andere dem Vorhaben mit deutlicher Ablehnung und einige wenige sogar mit offenem Widerstand begegneten.
ZIELE
Schaffung einer digitalen Plattform, die zum Dialog einlädt, dadurch Misstrauen abbaut und Vertrauen stärkt, sodass aus Skeptikern Befürworter und Fürsprecher werden.
Meine verwendete Tools:
Figma Miro Illustrator Photoshop VS Code
Meine Aufgabenbereiche:
Beratung Branding Research Konzeption Design Prototyping Technische Umsetzung
RESEARCH
Angewendete Research-Methoden:
- Interviews
- Card Sorting
- Kommunikationsstrategie ergründen
- Besichtigung und Begehung vor Ort
Interviews
Card Sorting
INSIGHTS
Die Analyse brachte zu Tage, dass es nicht nur um die Entwicklung einer Website ging, sondern um eine konsistente Gesamtkommunikation. Dadurch erweiterte sich das Projekt um die Entwicklung eines einheitlichen visuellen Rahmens als Basis für alle Web- und Printmedien. Im Anschluss wurde zusätzlich eine Broschüre gestaltet, die an einem Touchpoint an der Baustelle vor Ort für Interessenten und Besucher zur Verfügung stehen konnte.
Personas
Besondere Bedeutung hatte die Recherche und Analyse der Zielgruppen, die das Projekt skeptisch betrachteten oder sich sogar stark dagegen emotional positionierten.
Customer Journey
Informationsarchitektur
01_Keyvisual
Um eine konsistente Kommunikation über alle Medien hinweg zu gewährleisten und ein wiedererkennbares und damit vertrauensvolles Erscheinungsbild zu gestalten wurde im ersten Schritt ein Keyvisual gestaltet, welche in allen Medien wiederzufinden ist.
02_Design
Ein klarer visueller Aufbau, großzügige Freiräume und eine ruhige, offene Ästhetik reduzierten mögliche Hürden und förderten eine sachliche Auseinandersetzung mit den Inhalten. Die Gestaltung diente damit als zentrales Instrument, um Transparenz zu unterstützen und den Zugang zu relevanten Informationen angenehm und nachvollziehbar zu gestalten.
03_Navigation
Die bewusst flache, einstufige Navigationsstruktur musste Transparenz signalisieren und den Zugang zu allen Inhalten klar halten. Gleichzeitig erforderte die Mehrsprachigkeit – insbesondere die Länge türkischer Begriffe – eine präzise Gestaltung, damit Navigationsbezeichnungen in allen Sprachen gut lesbar, eindeutig und ohne visuelle Überladung integriert werden konnten.
04_Inhalte
Die Research zeigte, dass für die kritischen Gruppen eine transparente Darstellung des Bauprojekts von zentraler Bedeutung war. Kontinuierliche Updates, umfangreiches Bildmaterial sowie Beiträge von Unterstützern aus Politik und Nachbarschaft sollten die tragenden inhaltlichen Säulen bilden, um Offenheit und Nachvollziehbarkeit zu gewährleisten.
05_Technik
Die Mehrsprachigkeit beeinflusste die Wahl der Typografie, die auch türkischsprachige Inhalte unterstützen musste. Zudem war bei der Navigation aufgrund der Responsivität auf ausreichende Breite zu achten, da türkische Begriffe häufig sehr lang sind. Bereits auf schmalen Desktop-Viewports erfolgt eine switch daher auf ein Hamburger-Menü.
LÖSUNGEN
Branding-Lösungen:
- Keyvisual Gestaltung
Website-Lösungen:
- klare inhaltliche Gliederung ohne rhetorische Verteidigungshaltung
- flache Navigationsstruktur
- Aktuelles-Bereich
- Integration von Unterstützer-Stimmen
- UI-Gestaltung, die Aufgeschlossenheit, Sympathie und Ruhe ausstrahlt
- Anlaufstelle für Rückfragen
Wireframes
Mehrsprachigkeit
Für die Mehrsprachigkeit wurde ein Font mit vollständiger deutscher und türkischer Zeichensatzunterstützung gewählt und die Navigation so konzipiert, dass eine früh einsetzende mobile Darstellung mit Hamburger-Menü auch längere türkische Begriffe platzsparend optimal integriert.
Aktuelles-Bereich
Die News-Einträge sind klar strukturiert und mit einer subtil spielerischen Anmutung gestaltet, die an modulare Bausteine erinnert. Die integrierte Livecam der Baustelle vertieft diesen transparenten Eindruck und ermöglicht einen unmittelbaren Blick auf den aktuellen Fortschritt.
Unterstützer-Stimmen
Das Testimonial-Element wurde großzügig mit Weißraum und deutlichen Abständen zu umliegenden Inhalten gestaltet, um seine Wirkung klar hervorzuheben. Diese luftige Inszenierung lenkt den Fokus auf die Aussage selbst und stärkt ihre Glaubwürdigkeit.
WEBENTWICKLUNG
Die finale Phase umfasste die technische Umsetzung der Figma-Layouts in sauberen, modularen SCSS-Code über Visual Studio Code. Parallel wurde das CMS Contao auf einem Testserver inklusive MySQL-Datenbank installiert und eingerichtet. Nach erfolgreicher Entwicklung erfolgte die Migration des vollständigen Systems auf den Liveserver. Den Abschluss bildeten letzte Optimierungen sowie ein kontrollierter Go-Live.
ERGEBNISSE & IMPACT
Im Zusammenspiel mit der gesamten Kommunikationsstrategie konnte die Website alle definierten Ziele erfüllen. Kritiker konnten ihre Fragen transparent klären, wodurch Vorbehalte abgebaut wurden. Der Dialog brachte beide Seiten zusammen. Es entstanden neue Unterstützer, die ihre positive Haltung als „Stimme“ direkt auf der Website teilten. Diese persönlichen Beiträge erhöhten die Glaubwürdigkeit des Projekts und stärkten dessen öffentliche Akzeptanz. Bauprojektverzögerungen infolge kritischer Einwände konnten dadurch auf ein Minimum reduziert werden.