German-French Citizens' Fund
UX design for better user guidance.
The redesigned website of the German-French Citizens' Fund presents itself after the relaunch with clear, optimized user guidance and simplified project management for all stakeholders.
Nearly a year after the website launch, the German-French Citizens' Fund identified several problems on the still young website based on collected user feedback. At its core, it turned out that user guidance was not optimal – for example, there were problems with content discoverability. The primary goal was therefore to make content easier to find and more visible.
Overarching goal: A low-threshold, appealing offering
The German-French Citizens' Fund advises, connects, and finances projects that make German-French friendship and the European idea tangible. It supports a variety of formats and topics, has a low-threshold approach, and is open to all civil society actors.
Furthermore, the fund aims to bring together applicants, projects, and project sponsors, thus enabling a strong network of citizens committed to German-French friendship. The website also targets various multipliers such as political actors, press, and partner institutions, who in turn have the ability to draw potential project sponsors' attention to the German-French Citizens' Fund. The overarching goal that the German-French Citizens' Fund wants to achieve with its website is to make project consultation, application, and financing as smooth and low-threshold as possible for project initiators.
Additionally, the website must present itself in such a way that the German-French Citizens' Fund is perceived as the attractive player it is in German-French engagement.
The new homepage design with teasers that kick off the prioritized user journeys.
Key Challenges
- Decrease support workload in terms of phone calls and email correspondence. Many users had difficulty finding the content they needed when applying for or managing projects – resulting in numerous phone calls and emails requesting links to pages and documents already available in the menu. This suggested that menu descriptions were written from an internal organizational perspective rather than being user-friendly, leading to considerable workload and increased one-on-one consultations
- Ensuring high-quality user-generated project descriptions. The core platform is project matching, where interested project sponsors should find suitable partners. However, frequent project creation drop-offs and poor-quality, incomplete entries led to failed matches, weakening the Citizens' Fund's networking role and image
- Site editors were unsatisfied with their options to create visual hierarchies.. Site editors felt restricted by the available elements and templates. They requested better solutions, enabling interesting and more helpful pages and information structuring.
Project Goals
- Improve user guidance and decrease 1:1 support cases Focus points were improving processes for user-generated content and increasing accessibility and findability of content supporting this process.
- Minimize bouncing and information gaps during project creationto increase the number of project inquiries and ultimately funded projects, the project creation process needed to result in easy-to-understand and complete project descriptions.
- Improve visual orientation and design Visitors needed to be able to identify relevant content. Core and premium information (community projects and interviews) had to receive the visual elevation they deserved.
- Strengthen the image of the citizens' fund All goals played into the overlying strategy, which was to strengthen the image of the citizens' fund as an innovative, attractive and successful player and facilitator in German-French engagement.
The new homepage design in the desktop and mobile viewports.
Our UX solutions
#1 A user-friendly navigation for better discoverability
To reduce support requests and improve discoverability, we developed user-oriented navigation. The new categories and labels are based on the target audience's language rather than internal jargon – using search terms the Citizens' Fund had identified from user inquiries
The menu structure was redesigned for clarity, making deeper hierarchy levels visible at a glance. Additionally, a new editorial area simplifies organizing menu items and adding important quicklinks and downloads.
This solution therefore addresses Usability Heuristic #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 Reduce drop-off rate through UX-optimized forms
To reduce drop-offs in project creation, we optimized forms and process steps with a user-centered approach. Since project submission is the core of the Citizens' Fund – connecting initiators and partners – this was central to success
We suggested clear process indication through division into smaller form steps and questioning all mandatory fields. Transparent info texts explain why specific information is needed
The result: fewer drop-offs, more complete project descriptions, and more successful connections. This reduces support requests and strengthens the Citizens' Fund's role as facilitator.
Wireframes: Dividing forms into smaller steps reduces drop-off rate during organization onboarding.
#3 User orientation through psychologically-based design
Visual design is functional – it creates orientation and ensures important elements aren't overlooked. The existing visual identity with logo, colors, and typography offered many design options, but no structured rulebook for their implementation.
Therefore, we developed a systematic design system for new UI components. This ensures sustainable scalability and improves user guidance.
Lighter brand colours we used for backgrounds and surfaces.
Lighter colors for surfaces and backgrounds follow the gestalt principle of figure-ground relationship. Clear visual hierarchies and targeted pop-out effects create intuitive orientation aids
Color gradations from the existing color library create scalable structures: light tones for backgrounds, bold colors for attention guidance and visual feedback in interactive elements.
Brighter brand colours we used for primary and secondary UI elements, feedback and status colours.
#4 A design system for economical and sustainable design
We built the visual design into a small design system whose task is to provide an overview of all existing elements. Our design system follows the Lego principle: reusable components are formed from the smallest elements (atoms). This prevents 'reinventing the wheel' for new requirements.
The economic benefits: existing elements can be recombined before creating fundamentally new components. This saves time and costs.
We emphasized sustainable implementation: existing images and content types are preserved and seamlessly reusable in the new design.
The Design System supports future developments of the French-German Citizens‘ Fund. Components are composed of various design tokens with the LEGO principle.
The design system also expands the editorial team's design possibilities and thus promotes highlighting of relevant content
The component library was expanded with new modules following the Atomic Design principle. This enables the editorial team to better structure pages and highlight important content.
Visual highlighting of relevant information improves their discoverability. Users achieve their goals (finding/proposing projects) more successfully, while support requests decrease and the Citizens' Fund's image as an innovative player is strengthened
Various teaser options and sizes to visually highlight site content and documents supporting the primary initiator journeys.
Most challenging
Small team, big impact!
Practical UX solutions require an economic sweet spot: maximum impact with limited resources. Our approach had to satisfy both users and stakeholders. Our goal was to keep solutions practical – achievable for a small team while having the greatest possible impact
We therefore decided together to maintain existing content structure and image formats, instead of a time and cost-intensive complete redesign. The design specifications were based on existing technology, visual identity, and content formats – more restrictions for us, but realistically implementable for a small team
Most fun
Projects whose values resonate with us are always fun
Collective, border-conquering experiences can increase understanding and empathy and even be the start of true friendships.
As European citizens, we were thrilled that we were allowed to participate in this project and hopefully help facilitate a lively Franco-German society.
