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.

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)

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.

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.

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

"taz, die Tageszeitung" (one of Germany's most influential alternative-left newspapers) continuously improves its native smartphone apps. We came on board to conduct an expert evaluation during the ongoing design process of the iOS and Android apps to prepare these for subsequent user tests. The results of these tests should steer the further product development.

Seamless User Experience Through Clear Design

The overarching goal of the taz app is to provide a comprehensive user interface and functionality, supporting a positive digital reading experience and ensuring easy content accessibility. Which newspaper wouldn't dream of achieving this goal?

As the paper had set a medium-term goal to replace the daily printed newspaper with a digital version, it faced the challenge of ensuring maximum user-friendliness in its apps.

The focus was on quickly obtaining concrete results based on the designs to advance functionality and to understand how users cope with the navigation within the app. Ultimately the paper wanted to optimise the interaction and visual design before it went into development.

To achieve this, we conducted an expert review using a heuristic evaluation of the designs. We received insights on which we based a usability test using a click-dummy generated from the visual designs.

Our UX solutions for the taz app team

#1 Identifying issues based on established criteria using heuristic evaluation

Heuristic evaluation is a method in which one or more experts evaluate a system - in our case, the designs of an app - based on a pre-established checklist of criteria. We used DIN EN ISO 9241-10, Principles of Dialogue Design and Nielsen's 10 Usability Heuristics as the basis of our evaluation. All well-established tools for evaluating the usability of interactive systems. They include fundamental guidelines of usability such as: 

• Task appropriateness (appropriate functionality, minimisation of unnecessary interactions)
• Consistency and standards (adaptation to mental user models to the extent known) known)
• Error prevention (system reacts tolerantly to errors or enables easy error correction by the user) Error correction by the user)
• etc...

Performing a heuristic evaluation before usability testing can help identify and fix critical problems before testing with users. We also included problems that were causing internal disagreements, as hypotheses in this first usability test.

#2 Pop-up usability tests at the taz Cooperative Assembly

For an initial usability test of the taz app prototype, taz aimed to test the iOS prototype with existing readers at the Cooperative Assembly 2019 (annual general meeting), as the thematic orientation of the assembly also included presenting the app prototype.   

Therefore  We recruited five participants who were spontaneously approached and asked if they wanted to test the iOS prototype at the assembly. We recruited digital readers as well as paper newspaper readers. We aimed to determine if existing readers could navigate the app successfully from the start page and find the most important information and features.

We asked each participant to perform tasks while observing their interactions. We requested participants use the "thinking aloud" methodology to gain insights into their thought processes.

After task completion, we followed up with a series of questions (post-test interview) to capture the participants' perceptions and opinions. We also used hypothetical questions such as"If you had magical powers, what would you want from a digital newspaper?"

Results, Recommendations and Next Steps

The heuristic evaluation revealed several usability problems with the prototype, particularly with user guidance /navigation and the delivered system feedback following actions. We suggested improvements and partially incorporated them as hypotheses into the usability tests. The subsequent usability tests confirmed these problems and showed some participants having difficulty performing certain tasks.

We collected our recommendations in a top-line report. Suggestions included clarifying the navigation issues, improving system feedback, and simplifying user guidance. Our findings helped address critical problems early on.

#1 Eliminate Operational Blindness Through Continuous Testing with External UX Testers

Next, we recommended a process which allowed continuous usability testing. We suggested that these tests should involve "external", potential readers/users who may not be familiar with the newspaper to gather insights that regular readers may not notice due to their expert status and familiarity with the paper and its concepts, potentially obscuring uncertainties or difficulties.   

In the summer of 2020, we conducted numerous remote usability tests with potential readers further expanding our knowledge. We found that some concepts self-evident to loyal fans of the paper and internal staff were difficult to understand for new potential customers and therefore did not appear in the initial tests. The finding demonstrated the importance of including people in tests who belong to the targeted user group but are unfamiliar with the product or service (at least in the B2C scenario). 

#2 Digital Reading in Real-World Scenario

Time and again, we have also asked ourselves the question: Where We also asked where and in which scenarios people used the taz app. We suspected readers use the app in classic "waiting situations" (such as waiting at a bus or train station) and in-far-from-ideal reading conditions (i.e., busy or noisy surroundings with inadequate light, and an unstable surface). We, therefore, recommended "usability stress tests," which could include testing under unfavourable lighting conditions (i.e., whether functions are visible or if the text is still readable in bright light) or under "shaky conditions," such as on a subway train. These types of tests evaluate if touch targets can withstand such conditions. Discussing these scenarios can provide ample opportunities for reflection and improvement. 

#3 When recruiting participants, don't forget about inclusivity

We knew from demographic surveys that taz readers and members were often in the middle to later stages of life. As the future of the paper envisioned replacing the daily printed newspaper with a purely digital version, we emphasised the importance of including older users in the tests who usually read their news on paper. We also recommended including readers with visual impairments or tremors.

#4 Enabling the team to run in-house tests with usability testing training

We then gave a training course at taz on how to carry out in-house usability tests.

The aim of this training was to lower the perceived barriers that are often associated with user research ("it's so time-consuming!") and to sensitise and empower employees to regularly carry out simple tests with (potential) users themselves.

We supported "Kreuzberger Initiative gegen Antisemitismus" (KIgA) with the initial concept of a political education platform against Anti-Semitism. The platform aims to promote a pedagogical engagement with current forms of Anti-Semitism built on three pillars: background information, educational materials, and contributions to current events. and Contributions to current events include. 

The platform aims to inform multipliers in the education sector throughout Germany. This includes teachers, social workers, education consultants, etc. An additional goal was to integrate a nationwide expert database.

Since this was a completely new service without existing content but with many ideas, we began with a needs analysis. We developed an initial concept based on the results of this audit in collaboration with KIgA. This concept included an initial proposal for a content strategy, the basis for the detailed concept, in which we specified page types and functions. 

The project was introduced to the public on June 20, 2018, at the State Centre for Political Education in Berlin.

Building the initial concept for the educational platform

Needs Analysis

If a project team works towards a shared vision, a project is potentially more successful. Everyone needs to be on the same page concerning project goals. Not an easy task to achieve when, as in our case, there was not even platform content available. We had to start with a rough concept, which would slowly bring us closer to our final solutions.  

Our process:

A target group analysis provided a first insight into the needs of the intended users. Stakeholder workshops helped us define further requirements. Findings from both methods helped us develop the conceptual foundation for the new educational platform.

In the first strategy workshop with the team, we established a shared vision by discussing and answering questions such as:  

• "What is our vision? What will the service achieve in the future? (Future Lab)
• Why is the platform relevant? 
• What do we do better than previous or alternative solutions? (Value Proposition)

Prioritisation and Re-briefing

We consolidated the results of our target group analysis and Shared Vision workshop in a second, focus-oriented workshop in which we prioritised the desired requirements using a cost/benefit matrix. This approach enabled us to collectively agree on a list of requirements for an initial release. 

We incorporated the workshop outcomes into a re-briefing document and distributed it to all team members. A re-briefing abstract that all team members can agree upon helps ensure everyone has the same ideas and goals in mind - before the conceptual work begins.

Providing a compass with Design Principles

The workshop results and target group analysis helped us derive Design Principles , a strategic tool which can serve as a decision-making aid for the entire project.

Design Principles provide a compass for product development as they visualise the desired user experience, which should ease decisions. Although we defined a long-term vision, there are stumbling blocks along the way, and strategic guidelines (Design Principles) help us "stay on track." They help us evaluate decisions by answering whether they align with or contradict our principles.

Concept and Design

A Content Strategy as a guiding principle for further conception

The re-briefing draft and the Design Principles were the basis and guidelines for our rough concept, the content strategy.. 

In this context, we developed the idea of the three main Calls To Action, which should reflect the three main pillars of the project: 

• Inform (containing background information))
• Orientation (containing contributions on current events)) 
• Act (containing educational materials). 

The content strategy served as the basis for the detailed concept, in which page types with functions were specified, informing the technical implementation.

Concept for two Search Modes

An important goal we had was easy content findability for everyone. We took two search modes of potential users into account when designing navigation solutions:

1. Targeted Search ("I know what I'm looking for and how to phrase it.") 
2. Exploratory Search ("I know roughly what I'm looking for, but I cannot phrase it.")

#1 Design Solutions for Targeted Search

During Targeted Searches, users usually already know what they are looking for and are aware of the words to use when searching. Our solution for this type of search was descriptive and understandable menu labels. In addition, we brought the three main content pillars (Inform, Orient, Act) into focus with prominent, colour-coded quick links to improve orientation.

Additionally, we designed a search concept with auto-suggest functionality enriched with metadata (i.e. tagging) and a clearly arranged listing of search results. These solutions helped visitors searching for content in a targeted manner reach the result quickly due to efficient user guidance.

#2 Design Solutions for Exploratory Search

During Exploratory Searches, visitors usually have a rough idea of the information sought but do not necessarily know how to phrase it. "I know it when I see it" often applies - meaning recognition plays a crucial role. However, even when relevant content is recognised, the user might still ask themselves whether all relevant information was foundn or if there is more.  

We used clear and descriptive labelling of navigation elements and content tagging to serve this information search type. Contextualised presentation of related content through tagging is essential when learning more about a topic and can help increase knowledge. 

We assumed that this type of search would be relevant when searching for educational materials. As a result, we designed a filter that considers attributes such as "topic" (of the material), "age" (of the students), and "duration" (of the class) to help narrow down and find relevant educational materials and methods.