FinfoxTouch: Navigation as an enabler in client meetings

An intuitive, user-centric information architecture is crucial for the success of digital applications. We take a look behind the scenes at Finfox and use the example of our tablet solution FinfoxTouch to illustrate the vital role that navigation plays in creating an optimal user experience.

User experience (UX) has gained significant importance in recent years due to the rapid advancement of digitalization, which has fundamentally changed user requirements. Thus, UX design is of central importance at Finfox.

Our latest UX project focused on FinfoxTouch, our tablet-based advisory tool for interactive client meetings. The new, completely revamped information architecture offers a user-centric navigation layout that meets modern UX standards and provides enhanced digital support for advisors and their clients during personal meetings.

Conceptual approach or “Reduced to the max”

The redesign of the FinfoxTouch navigation focused on the following objectives:

• Implementing an intelligent information structure that is suitable for both comprehensive advice and specific use cases
• Providing a comprehensive and dynamic overview of all available content
• Incorporating modern navigation patterns
• Responsive navigation for various screen sizes
• Ensuring future scalability
• Reducing the navigation with a strong focus on content (“Reduce to the max”)
• Validating ideas through co-creation processes with clients, involving extensive user feedback and usability testing
• Establishing a logical navigation hierarchy to enable both lateral and sequential navigation

💡 Lateral (or horizontal) navigation allows users to switch directly between different sections or categories. Sequential navigation, on the other hand, guides the user linearly or step-by-step through content or processes in a defined order.

Navigation as a storytelling tool in client meetings

At Finfox, we consider navigation as a visual storytelling tool that allows advisors to clearly and efficiently guide their clients through each of the steps of the advisory process during personal meetings.

The structure of the FinfoxTouch navigation consists of four fundamental areas.

1. Header area

The header in its basic configuration contains the following elements:

• Company logo
• Client and portfolio assignment
• Various quick actions (landing page, client documents, etc.)
• Access to the mega-menu with an overview of all possible topics at a glance
• Collapsible header area to enhance focus on content

2. Topics

The central page title prominently displays the current topic (shown as “Vorschlag” (Proposal) in the image). Next to it is a preview of the upcoming topic, allowing the advisor to mentally prepare and align their storytelling during the client meeting. Clicking on the page title opens a fly-out dialog with an overview of all available topics, enabling quick switching between topics that may be further apart in the advisory process. The topic area supports common interaction gestures like swiping, allowing advisors to easily and effortlessly switch between different topics.

3. Subtopics

A topic encompasses various subtopics depending on the context (e.g., within “Analyses,” the subtopics may include backtesting and stress testing). These are displayed in a group of tabs as usual. The main focus was on the visual redesign of the tabs to better harmonize them with the rest of the navigation.

4. Dynamic mega-menu

The dynamic mega-menu is the centerpiece of the modernized information architecture in FinfoxTouch. For the advisor, the mega-menu, which dynamically adjusts according to the context of the advisory situation, offers a complete overview of all content and functions, including client documents or client search. This allows advisors to effortlessly navigate between the different topics and subtopics of the advisory meeting. The dynamic design of the mega-menu enables focused and context-specific presentation of relevant information.

Design validation

Once the new information architecture and navigation were defined, it was crucial to ensure that the redesigned FinfoxTouch application meets the needs and expectations of users. Validating the design through testing is an essential step in the UX design process to ensure the final product is both functional and user-friendly.

The UX team recruited several test users, both internally and from the client side, who were tasked with navigating between topics and subtopics. Additionally, the test users were asked about the visual aesthetics of the application (“desirability”), selecting from a list of positive and negative adjectives those they associated with the redesigned FinfoxTouch application. The feedback received was thoroughly positive, leading to further optimizations reflected in the new design of FinfoxTouch.

«The new navigation of FinfoxTouch offers intuitive and coherent user guidance, enabling advisors to clearly and efficiently lead their clients through the entire investment advisory process. The structured framework helps clients understand each step, make informed investment decisions, and perceive the client meeting as a positive, interactive experience.»

Roman Holland
UX/Interaction Designer, Finfox