Aktion Mensch Foerderfinder

Aktion Mensch is a leading funding agency committed to promote inclusion which means reducing barriers in the everyday life of people with disabilities through providing financial support for social projects and campaigns.

We were tasked with designing an easy to use online assistant for both novice and expert users that bundles exisiting informational data associated with complex discovery processes of funding terms and opportunities.

Type
Interactive

Client
Aktion Mensch

For
d-SIRE

Role
Conception
UX/UI

Tools
Axure, Omnigraffle

[unex_ce_button id="content_vkyian5vw,column_content_s71nwl8oo" button_text_color="#141618" button_font="regular" button_font_size="14px" button_width="auto" button_alignment="center" button_text_spacing="3px" button_bg_color="#fede88" button_padding="10px 48px 10px 48px" button_border_width="1px" button_border_color="#fede88" button_border_radius="4px" button_text_hover_color="#7c7a7a" button_text_spacing_hover="3px" button_bg_hover_color="transparent" button_border_hover_color="#7c7a7a" button_link="https://www.aktion-mensch.de/projekte-engagieren-und-foerdern/foerderung/foerderfinder.html" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]USE ASSISTANT[/ce_button]

As the quantity of aid programs gradually increased over time thus somewhat outgrowing the IA (which simply wasn't intended to handle a large amount of data), research became more and more difficult. Users were forced to gather informational data up by themselves without being able to save their discoveries for later inspection. In addition, it was unclear whom they should address when having questions about specifics that weren't covererd by existing content. All this summed up to an UX in great need of improvement with usually very frustrated users complaing to a customer support which wasn't intended to handle such inquiries.

This is where Foerderfinder kicks in. Its main purpose is to assist both professional fundraisers repectively (small) nonprofit organisations while being in the stage of research for a suitable aid program, seamlessly redirecting them to Aktion Mensch's application system upon discovery. I was commissioned with further elaborating conceptional data provided by the client through creating an intuitive user guidance, developing a prototype and complete set of wireframes while being in a close cross-functional collaboration with front and backend developers ensuring to meet technical parameters.

Crafting an user friendly onboarding by improving search experiences, encouraging exploration and preventing overextension were the key challenges in this project.

We kicked off the project with a workshop at the Aktion Mensch office that helped all involved align on the general framework, technical aspects, conceptual issues and timeframe. I'm bound to say how much I like starting projects like this:

workshops at an early stage are a fantastic way to get everyone on board. Discussing goals, business strategies and potential pain points helps to save time in the long run which again can be used at later stages if necessary.

02 FLOW DIAGRAM

During the workshop I started with quickly setting up a flow diagram to get things straight concerning what pages needed to be designed and to find out whether we would run into some sort of scenarios we hadn't thought of.

Most notably, this acted as a stimulus for the client. Having a clearer site vision let them focus on content-related matters which again was reasonable given the level of complexity that had to be dealt with backend-wise.

Having a map helps to share your vision and lets everyone involved feel more comfortable.

At this point I focused on functional specifics rather than spending much time on cosmetics. Quickly sketching out ideas is more convenient and time-saving when it comes to internal review.

Apart from that, avoiding a time-consuming commitment to various approaches is benefical when walking the client through and getting feedback: paper wireframes can be easily revised.

Speaking from my personal experience, discussing drafts early often reveals potential pitfalls as well as new and interesting ideas.

We moved on and dove deeper into the process by creating a digital prototype in Axure to grasp how the approach would feel on mobile and desktop devices. To be honest this was a rather fiddly part of the project because it remained subject to negotiation whether the assistant should generally consist of elements from the standard pattern library. This would not only affect the entire page structure, but also the usability of the assistant itself.

We opted for creating a prototype using standard patterns on the one hand and some sketch-based high fidelity wireframes on the other to circumvent this conflict. In fact, this hybrid strategy turned out to be a little gold mine: it allowed us to explore diverse approaches in parallel and test them against each other instead of insisting on the initial approval. Sometimes conflicting approaches are helpful to meet a desired objective.

As you might notice there is a considerable distinction between the prototype structure compared to the initial approach above and the high fidelity wireframes below.

Nonetheless, in terms of documenting the project progression it is quite interesting to showcase different approaches that try to solve the same problem.

If you are interested in testing the prototype's functionality feel free to drop me a line.

[unex_ce_button id="content_x641t0p4w,column_content_lxk4ewgs4" button_text_color="#141618" button_font="regular" button_font_size="14px" button_width="auto" button_alignment="center" button_text_spacing="3px" button_bg_color="#fede88" button_padding="10px 44px 10px 44px" button_border_width="1px" button_border_color="#fede88" button_border_radius="4px" button_text_hover_color="#7c7a7a" button_text_spacing_hover="3px" button_bg_hover_color="transparent" button_border_hover_color="#7c7a7a" button_link="hello@borisslogar.com" button_link_type="email" button_link_target="_blank" has_container="" in_column="1"]REQUEST LOG IN[/ce_button]

After we handed the prototype over to the client, I immediately started to visualize the initial and less fragmented approach in Omnigraffle emphasizing its core purpose: to quickly find a suitable aid program by answering a linear sequence of questions while avoiding overextension. Through a minimalistic look and feel we ensured clarity as well as legibility on the somewhat text-heavy pages. With revised editorial content approved and available by that time, I luckily could pursue an effective content-first approach for the best possible UX.

We were able to identify content-related constraints especially on detail pages and how to improve them by using anchor links to live up to a satisfiable usability and navigation experience. I strongly aimed for a sticky navigation on mobile devices in order to constantly keep key functionalities within the viewport. With the results page being an essential part of the search experience, its card-based UI is designed for quick data gathering containing key facts and a recurring "visual language" utilizing icons to solely communicate informations that are valuable at this stage.

As comprehension is crucial, annotation visibility is device dependent. Displaying current queries while being editable at all times maintains context.

Given the amount and complexity of informational data, prioritizing a coherent navigation experience helps users to quickly sift through text-heavy content.

Despite being very unusual to begin with elaborating and delivering a prototype that didn't comply with the initially approved concept, going broad and having both approaches ready made it relatively easy to compare assets and drawbacks.

We ultimately agreed upon discarding a standard pattern-based assistant as it comparatively wouldn't be able to meet the requirements of guiding users along their information journey which in turn ended our own double tracked journey, so to speak.

As designing with accessibility in mind was mandatory, the visual design needed to be sufficiently inclusive for differently sighted users and measuring up to the Web Content Accessibility Guidelines (WCAG) 2.0.

In order to save some of that precious loading time, please note that not every screen of the final layout is showcased: focusing on the UX process is the primary intention here.

Realizing this project during summer and fall of 2015 was an intense experience. Not only was it fun to work collaboratively with both our in-house and Aktion Mensch's own developers, but it also enriched me personally. Sometimes accepting proposals from a technical mindset simply nails it while being faster to build and not affecting the overall outcome.

That said, starting broad and exploring multiple directions while constantly involving and communicating with stakeholders, enabled us to extract and capture the essence of the assistant experience for both users and the brand itself. This strengthened the relationship with our client and helped to develop a clear vision of the tonal expectations of end users.

An open-minded flexibility is helpful for everyone involved in the process and convenient when it comes to creating a proper outcome.

[unex_ce_button id="content_xln80oaby,column_content_9djujrohr" button_text_color="#ffffff" button_font="regular" button_font_size="12px" button_width="auto" button_alignment="center" button_text_spacing="3px" button_bg_color="transparent" button_padding="5px 15px 5px 15px" button_border_width="1px" button_border_color="transparent" button_border_radius="4px" button_text_hover_color="#fede88" button_text_spacing_hover="3px" button_bg_hover_color="transparent" button_border_hover_color="transparent" button_link="http://www.borisslogar.com/imprint/" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]IMPRINT[/ce_button]