The Flatfox UX architecture

Übersicht

The Flatfox UX as well as the UI have been redesigned and modernised to improve product development as well as the use of the platform.

Problem definition

As a 10-year-old software, Flatfox had weaknesses in usability and visual scaling. This was reflected in functions that could not be found and therefore had a low utilisation rate, as well as in the more difficult conceptual work involved in expanding the product.

My role

Research
Design System
Interaction & Visualdesign
Prototyping
Testing
November 2021 - July 2022

Design heuristics as a basis

Our UX principles are based on the heuristics of the Nielsen Norman Group.

Recognisable system status

The user must be able to recognise what is happening in the software at all times.

Consistency and standards

Users should be able to orientate themselves on common standards and their consistent use on the platform.

Recognition and support

Minimisation of the cognitive load. The user should be supported by our software and not burdened.

Flexible and efficient

The user should be able to utilise the software as a versatile tool.

Principle-based user experience

Recognisable system status

Fundamental adjustments had to be made so that the system status could be better communicated. The previous monochrome colour system was therefore supplemented with violet. Toasts were introduced in order to provide prompt feedback.

Consistency and standards

Standard patterns such as tooltips and info banners complement the communication with the user. Other functions such as " Create notes" have been completely revised to ensure consistency. The problem with the notes was that the function was divided into two separate functions and used different wording and had different functionalities depending on the context.

Wiedererkennung und Unterstützung

Der Nutzer wird neu besser durch die Software geführt. Zum Beispiel ein Modal, dass mehr als drei Schritten hat wird mit einem Stepper ergänzt, der den aktuellen Fortschritt visualisiert. Ebenfalls wurden Prozessschritte die zusammenhängend sind so verknüpft, dass sie anschliessend erledigt werden können, oder auf später verschoben werden können.

Flexible and efficient

The interface as a whole has been revised. The listings are now visualised in a table and offer the user the option of showing and hiding information. This allows the user to customise the interface according to their needs.

Tabs were also introduced, in this example the "Chat", "Information" and "Checklist" tabs. The tabs enable a flexible UI both for the user and for product development. New functions can be integrated more easily than was possible in the old interface as a one-pager.