Entwicklung & Konzeption einer Multibanking Web-Applikation

creditPass GmbH

Screenshot einer Finanz-App, die die Kontoentwicklung in den Monaten Mai und Juni zeigt. Ein Diagramm visualisiert die Kontobewegungen, während eine Tabelle die letzten Transaktionen auflistet.

Projektübersicht
Projektmerkmal	Projektdetails
Kunde	creditPass GmbH
Bereiche	Softwareentwicklung Design & Strategy
Link	https://creditpass.de/en/
Leistungen	Konzeption Design Individualentwicklung
Technologien / Tools	Sketch InVision Zeplin JavaScript
Zeitraum

Konzeption

Design

Individualentwicklung

Die Fipsbox Banking App soll es privaten Nutzern ermöglichen einen schnellen und übersichtlichen Einblick in die eigenen Finanzen zu erhalten. Hierbei werden Transaktionsdaten aus verschiedenen Konten unterschiedlicher Banken mit Informationen zu persönlichen Belegen kombiniert und automatisiert kategorisiert.

Fipsbox soll es privaten Nutzern ermöglichen einen schnellen und übersichtlichen Einblick in die eigenen Finanzen zu erhalten. Hierbei werden Transaktionsdaten aus verschiedenen Konten mit Informationen zu Belegen kombiniert und automatisiert kategorisiert.

Ein Smartphone-Bildschirm zeigt eine Anwendung zur Finanzverwaltung. Ein Kreisdiagramm teilt die Transaktionen der letzten vier Wochen in Einnahmen (orange) und Ausgaben (grün) auf. Rechts daneben befindet sich eine Tabelle, die die Ausgaben im Detail auflistet, einschließlich eines Vergleichs zum monatlichen Durchschnitt.

Um eine neuartige App wie FipsBox zu entwickeln, war hauptsächlich ein nutzerzentrierter Konzeptionsansatz gefragt. Hierbei wurden mit Personas Bedürfnisse & Anforderungen der Zielgruppe aufgestellt, die der Usability der App dienen. Um ein Proof of Concept der ersten Konzepte zu bekommen wurde ein MVP erstellt und mit realen Nutzern getestet.  Anschließend wurde die Web-Anwendung mit JavaScript, Python & Django umgesetzt.

Ein Flussdiagramm zeigt die einzelnen Schritte eines Designprozesses. Beginnend mit der Recherche, führt der Prozess über die Definition von Nutzergruppen und Geschäftszielen hin zur Erstellung von Wireframes und Prototypen. Abschließend wird das Design visuell gestaltet und für die Entwicklung übergeben.

Intuitive Finanzorganisation

Neben der nutzerzentrierten Konzeption und Gestaltung eines intuitiven User Interfaces, stand die technische Umsetzung der Anwendung im Mittelpunkt des Projektes. Für solch ein hochkomplexes Projekt war ein individueller Tech-Stack von Nöten. Das Backend basiert auf Python, das Frontend wurde in JavaScript mit dem Angular-Framework geschrieben und die Kommunikation erfolgt über eine sichere REST-basierte Schnittstelle.Da es sich um ein Web-System handelt ist Fipsbox über alle Geräte und Browser ortsunabhängig abrufbar.

‍

Während der Konzeption der Anwendung, wurden einige Features aufgestellt, die dem User eine leichte und intuitive Organisation seiner Finanzen ermöglicht.

Ein Computerbildschirm zeigt eine Anwendung zur Finanzverwaltung. Das Dashboard ist in mehrere Bereiche unterteilt: Ein Kreisdiagramm visualisiert die Verteilung der Ausgaben, ein Liniendiagramm zeigt die Kontoentwicklung über einen bestimmten Zeitraum, und eine Tabelle listet die letzten Transaktionen auf. Die App unterstützt verschiedene Programmiersprachen wie JavaScript, Python und Angular.

Eine nutzerzentrierte Usability galt als zentraler Faktor des Projektes. Dafür wurden eine Vielzahl an Prozessen visualisiert, getestet und umgesetzt. Um diese sinnvoll für alle Use Cases auf unterschiedlichen Gerätegrößen abbilden zu können, wurde ein Fluid Design System entwickelt.

Design-Elemente einer modernen Banking-App. Das Bild zeigt die visuelle Identität der App, inklusive Farbpalette, Typografie und Illustrationen.

Sicherheit

Eine App die auf sämtliche Banking-Daten zugreift, steht und fällt natürlich mit der Sicherheit der Daten. Hierfür wurde die finAPI angebunden, um über eine gesicherte Verbindung die Konto-Daten des Nutzers abzurufen. Um Vertrauen für die App zu schaffen, ist jederzeit transparent für den Nutzer einsehbar, welche Daten bei den Banken abgerufen werden.

Darstellung der Kontoübersicht in einer Online-Banking-Anwendung. Der Nutzer hat zwei Konten verknüpft, die Stadtsparkasse Augsburg und Comdirect. Die Kontostände werden übersichtlich angezeigt.

Fipsbox-Multibanking-App

Das entwickelte Multibanking-System nutzt eine externe Api für die Kommunikation mit den Banken. Über eine sichere REST Schnittstelle werden die Daten der Konten des Nutzers abgerufen und automatisiert kategorisiert dargestellt.  Der Nutzer hat zudem die Möglichkeit Kaufbelege einzuscannen und diese einzuordnen. So behält man leicht den Gesamtüberblick über seine Ausgaben und Kaufgewohnheiten.

‍

Die Fipsbox-Multibanking App war 2017 eine der ersten Web-Anwendungen die es möglich machte, mehrere Konten von unterschiedlichen Banken in einem System zu bündeln und Transaktionen sinnvoll zu kategorisieren. Dabei wurden auch KI-Systeme eingesetzt, um eine automatisierte Kategorisierung und Belegverwaltung zu ermöglichen. Die eingesetzten Technologien waren auch für uns eine neue Herausforderung, die wir zusammen mit dem Kunden gemeistert haben.