German-French Citizens' Fund
UX design for better user guidance.
A year into the launch, the Franco-German Citizens' Fund identified several issues on their community fund website, which hindered both community members and staff members from effectively achieving their communicative intent. Our task was to remove these issues.
The revised website of the Deutsch-Französischen Bürgerfonds presents itself with a clear, optimised user interface and simplified management options for the team.
High-level goal: An attractive, accessible offer
The Deutsch-Französische Bürgerfonds (Franco-German Citizens' Fund) advises and finances projects that enable the general public to experience Franco-German friendship and Europe. It promotes a variety of formats and topics, is easily accessible, and is open to all civil society actors.
Furthermore, it connects project initiators and facilitates a strong network of citizens dedicated to Franco-German friendship. The site also functions as a promotional platform that addresses various multipliers interested in learning more about the community and the work and efficiency of the Citizens Fund.
The overarching goal of the website is to make project advice, application and financing processes as smooth as possible for project initiators while allowing the Franco-German Citizens' Fund to be perceived as an attractive enabler in the Franco-German engagement.
The new homepage design with teasers that kick off the prioritised user journeys.
The Challenges
The website was failing to help people help themselves. Page Visitors had difficulty finding the information and documents required to initiate projects, even though the documents and pages were available via the page menu. Assuming that visitors did not understand the language in use, likely because it resembled the point of view of the Franco-German Citizens' Fund. The result was an overwhelming 1:1 consultation workload.
Project descriptions in the matching platform lacked information quality.. The project matching platform is the core of the service, where interested project sponsors find suitable project partners. Project descriptions are user-generated. Many entries had poor quality or missing information, which reduced matches and weakened the facilitating role and image of the citizen fund.
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 creation to 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.
- Image promotion All goals played into the underlying 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 with the new navigation menu in desktop and mobile viewports.
Our Solution: Process & Key Features
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 organising menu items and adding important quicklinks and downloads.
This solution addressed Usability Heuristic No. 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)
Wireframes: Dividing forms into smaller steps reduces drop-off rate during organisation onboarding.
Reduce abort rates through form and process improvements
To reduce drop-offs in project creation, we optimised forms and process steps with a user-centred approach. Since project submission is the core of the Citizens' Fund – connecting initiators and partners – this was central to success
We suggested a clear process indication through division into smaller form steps and questioning all mandatory fields. Transparent info texts explain why specific information is needed
Results:
- Fewer abandoned registration processes, an increase in complete project descriptions and more successful connections.
- Reduced support requests and renewed image of the Citizens' Fund as an intermediary.
Lighter brand colours we used for backgrounds and surfaces.
Brighter brand colours we used for primary and secondary UI elements, feedback and status colours.
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, colours, 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 colours for surfaces and backgrounds follow the Gestalt principle of figure-ground relationship. Clear visual hierarchies and targeted pop-out effects create intuitive orientation aids
Colour gradations from the existing colour library create scalable structures: light tones for backgrounds, bold colours for attention guidance and visual feedback in interactive elements.
The Design System supports future developments of the French-German Citizens' Fund. Components are composed of various design tokens with the LEGO principle.
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 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 its 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
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 the 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 to participate in this project and help facilitate a lively Franco-German society.
