Deutsch-Französischer Bürgerfonds
UX-Design für eine bessere Benutzerführung.
Die überarbeitete Webseite des Deutsch-Französischen Bürgerfonds präsentiert sich nach dem Relaunch mit einer klaren, optimierten Benutzerführung und einer vereinfachten Projektverwaltung für alle Beteiligten.
Ein knappes Jahr nach dem Launch der Webseite stellte der Deutsch-Französische Bürgerfonds anhand gesammeltem Nutzer*innenfeedbacks mehrere Probleme auf der noch jungen Website fest. Im Kern stellte sich heraus, dass die Benutzerführung nicht optimal war – so gab es z.B Probleme bei der Auffindbarkeit von Inhalten. Das primäre Ziel war es somit, dass Inhalte leichter auffindbar und sichtbar werden.
Übergeordnete Ziele: Ein niedrigschwelliges, ansprechendes Angebot
Der Deutsch-Französische Bürgerfonds berät, vernetzt und finanziert Projekte, welche die deutsch- französische Freundschaft und die Europäische Idee erlebbar machen. Er fördert eine Vielzahl an Formaten und Themen, hat einen niedrigschwelligen Anspruch und steht zudem allen Akteuren der Zivilgesellschaft offen.
Darüber hinaus hat der Fonds das Ziel, Antragsteller bzw. Projekte und Projektträger zusammenzubringen und ermöglicht so ein starkes Netzwerk von Bürger*innen, die sich für die deutsch-französische Freundschaft engagieren. Die Seite richtet sich weiterhin an verschiedene Multiplikatoren wie z.B Politische Akteure, Presse und Partner Institutionen, die wiederum die Fähigkeit besitzen, potenzielle Projektträger auf den Deutsch-Französischen Bürgerfonds aufmerksam zu machen. Das übergeordnete Ziel, welches der Deutsch-Französischen Bürgerfonds mit seiner Webseite erreichen möchte, ist es, die Projektberatung, -beantragung und -finanzierung für Projektinitiatoren so reibungslos und niedrigschwellig wie möglich zu gestalten.
Zudem muss sich die Seite so präsentieren, dass der Deutsch-Französische Bürgerfonds auch als der attraktive Player, welcher er im Deutsch-Französischen Engagement ist, wahrgenommen wird.
The new homepage design with teasers that kick off the prioritized user journeys.
Die Herausforderungen
- Die Webseite soll als als „Selbsthilfeinstrument“ funktionieren und Arbeitsaufwand im Sinne von Anrufen und Mailverkehr reduzieren Viele Nutzer*innen, die Projekte beantragen oder verwalten wollten, hatten jedoch Schwierigkeiten, die Inhalte zu finden, die sie suchten bzw benötigten – was zu einer Flut von Anrufen und E-Mails, in denen nach Links zu Seiten und Dokumenten gefragt wurde, die bereits Teil des Menüs waren. Dies ließ vermuten, dass die Beschreibungen im Menü und auf der Seite nicht verständlich für die Nutzer*innen waren und eher aus organisationsinterner Sicht erstellt waren. All dies führte zu erheblichen Arbeitsaufwand und zu vermehrten 1:1 Beratungen für den Deutsch-Französischen Bürgerfonds.
- Gewährleistung einer hohen Qualität der von Nutzer*innen generierten Projektbeschreibungen. Das eigentliche Herzstück ist die Projekt Matching Plattform, denn hier sollen interessierte Projektträger passende Projektpartner finden. Leider gab es immer wieder Abbrüche bei der Erstellung von Projketen und es wiesen viele der Einträge eine mangelnde Qualität und teilweise Lücken im Informationsgehalt auf, was zu mangelnden Matches führte und somit die Vernetzerrolle und somit das Image des des Bürgerfonds schwächte
- Bessere Nutzerführung durch visuelle Hierarchien und Hervorhebung von wichtigen Inhalten. Jedoch war der Gestaltungsspielraum der Redakteur*innen der Seite hinsichtlich der zur Verfügung stehenden Elemente und Templates begrenzt. Sie wünschten sich mehr Möglichkeiten zur Strukturierung von Seiten und Informationen.
Projektziele
- Hilfe zur Selbsthilfe statt eine Flut von Telefonanrufen und E-Mail Supportanfragen.
- Weniger Abbrüchebei der Projekterstellung und klare und lückenlose Projektbeschreibungen.
- Visuelle Orientierung bieten, Wichtige und relevante Inhalte sollen als solche erkannt werden
- Stärkung des Images des Bürgerfonds als wichtigen, innovativen und attraktiven Playerund Vernetzer im Deutsch-Französischen Engagement.
The new homepage design in the desktop and mobile viewports.
Unsere Lösungen
#1 Eine nutzerfreundliche Navigation für bessere Auffindbarkeit
Um Support-Anfragen zu reduzieren und die Auffindbarkeit zu verbessern, entwickelten wir eine nutzerorientierte Navigation. Die neuen Kategorien und Labels orientieren sich an der Sprache der Zielgruppe statt an internem Fachjargon – basierend auf den Suchbegriffen, die der Bürgerfonds aus Nutzeranfragen identifiziert hatte.
Die Menüstruktur wurde übersichtlicher gestaltet, sodass tiefere Hierarchieebenen auf einen Blick erkennbar sind. Zusätzlich erleichtert ein neuer Redaktionsbereich das Organisieren von Menüpunkten und das Hinzufügen wichtiger Quicklinks und Downloads.
Diese Lösung adressiert somit Usability Heurisik Nr. 2
„Match between system and the real world“
The design should speak the users‘ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
Nielsen, J. (1995, 2020)
#2 Abbruchraten senken durch UX-optimierte Formulare
Um Abbrüche bei der Projekterstellung zu reduzieren, optimierten wir Formulare und Prozessschritte nutzerorientiert. Da das Projekteinstellen das Herzstück des Bürgerfonds ist – die Vernetzung von Initiatoren und Partnern – war dies zentral für den Erfolg.
Unsere Maßnahmen: klare Prozessanzeige durch Aufteilung in kleinere Formularschritte und Hinterfragen aller Pflichtfelder. Transparente Infotexte erklären, warum bestimmte Informationen benötigt werden.
Das Ergebnis: weniger Abbrüche, vollständigere Projektbeschreibungen und mehr erfolgreiche Vernetzungen. Dies reduziert Support-Anfragen und stärkt die Rolle des Bürgerfonds als Vermittler.
Wireframes: Formulare in kleinere Schritte unterteilen verringert Abbruchrate beim Onboarding der Organsiationen.
#3 Nutzerorientierung durch psychologiesch fundiertes Design
Visuelles Design ist funktional – es schafft Orientierung und stellt sicher, dass Wichtiges nicht übersehen wird. Die bestehende visuelle Identität mit Logo, Farben und Typografie bot viele Gestaltungsoptionen, aber kein strukturiertes Regelwerk für deren Einsatz.
Deshalb entwickelten wir ein systematisches Design-System für neue UI-Komponenten. Dies gewährleistet nachhaltige Skalierbarkeit und verbessert die Nutzerführung.
Lighter brand colours we used for backgrounds and surfaces.
Hellere Farben für Flächen und Hintergründe folgen dem Gestaltprinzip der Figur-Grund-Beziehung. Durch klare visuelle Hierarchien und gezielte Pop-out-Effekte entstehen intuitive Orientierungshilfen.
Farbabstufungen aus der bestehenden Farbbibliothek schaffen skalierbare Strukturen: Helle Töne für Hintergründe, kräftige Farben für Aufmerksamkeitssteuerung und visuelles Feedback bei interaktiven Elementen.
Brighter brand colours we used for primary and secondary UI elements, feedback and status colours.
#4 Ein Design System für ökonomische und nachhaltige Gestaltung
Das visuelle Design haben wir in einem kleinen Design System aufgebaut, dessen Aufgabe es ist, einen Überblick über alle vorhandenen Elemente zu geben. Unser Design System folgt dem Lego-Prinzip: Aus kleinsten Elementen (Atomen) werden wiederverwendbare Komponenten gebildet. Dies verhindert, dass bei neuen Anforderungen das „Rad neu erfunden“ wird.
Die ökonomischen Vorteile: Bestehende Elemente lassen sich neu kombinieren, bevor grundlegend neue Komponenten erstellt werden. Das spart Zeit und Kosten.
Nachhaltige Umsetzung: Bestehende Bilder und Inhaltstypen bleiben erhalten und sind im neuen Design nahtlos wiederverwendbar.
The Design System supports future developments of the French-German Citizens‘ Fund. Components are composed of various design tokens with the LEGO principle.
Das Designsystem erweitert auch die Gestaltungsmöglichkeiten der Redaktion und fördert so die Hervorhebung relevanter Inhalte
Die Komponentenbibliothek wurde nach dem Atomic-Design-Prinzip um neue Module erweitert. Dies ermöglicht der Redaktion, Seiten besser zu strukturieren und wichtige Inhalte hervorzuheben.
Visuelle Hervorhebung relevanter Informationen verbessert deren Auffindbarkeit. Nutzer*innen erreichen so ihre Ziele (Projekte finden/vorschlagen) erfolgreicher, während Support-Anfragen sinken und das Image des Bürgerfonds als innovativer Player gestärkt wird
Various teaser options and sizes to visually highlight site content and documents supporting the primary initiator journeys.
Die Challenge
Kleines Team, große Wirkung!
Praktikable UX-Lösungen erfordern einen wirtschaftlichen Sweet Spot: maximale Wirkung bei begrenzten Ressourcen. Unser Ansatz musste sowohl Nutzer*innen als auch Stakeholder zufriedenstellen. Unser Ziel war es, dass die Lösungen praktikabel bleiben – also für ein kleines Team realisierbar sind und gleichzeitig die größtmögliche Wirkung haben.
Somit entschieden wir gemeinsam, die bestehende Inhaltsstruktur und Bildformate beibehalten, statt einer zeit- und kostenintensiven kompletten Neugestaltung. Die Designvorgaben basierten auf vorhandener Technologie, visueller Identität und Inhaltsformaten – mehr Restriktionen für uns, aber eben realistisch umsetzbar für ein kleines Team.
Unser Highlight
Projekte, deren Werte uns ansprechen machen immer Spass!
Durch solche gemeinsamen, die Grenzen überwindende Begegnungen – wie der Deutsch Französische Bürgerfonds sie schafft und fördert – wachsen gegenseitiges Verständnis, Vertrauen und Empathie, was der Beginn für echte Freundschaften sein kann.
Als Bürger*innen Europas haben wir uns sehr gefreut, dass wir Teil dieses Projektes sein durften und durch unser Zutun (hoffentlich) zu einer weiterhin lebendigen deutsch-französischen Beziehung beitragen können.
