Ein iPhone und ein MacBook nebeneinander.

Case Study

Entwicklung & Konzeption einer Multibanking Web-Applikation

Unverbindliche Anfrage
Wir freuen uns auf Ihr Projekt
Vielen Dank für Ihre Anfrage.
Hoppala. Sie haben zwar alles richtig gemacht, unser System konnte aber trotzdem die Nachricht nicht verarbeiten. Bitte schicken Sie die Anfrage nochmals ab.
Icon schließen

User Experience Design & Individualentwicklung

FipsBox – Die All in One Banking App

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.

Logo CreditPass

Kunde

creditPass Financial Technology

Projekt

Multi Banking App

Aufgaben im Projekt

Konzeption
Design
Individualentwicklung

Technologien

Sketch

Zeplin

InVision

JavaScript

FipsBox Beispieldarstellung in einem iPhone in einer Hand gehalten

Aufgabe & Projektziel

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.

Idee & Lösung

Neben der nutzerzentrierten Konzeption und Gestaltung eines intuitiven User Interfaces, stand die technisceh Umsetzung der Anwendung im Mittelpunkt des Projektes. Technisch stellt das Projekt eine Kombination aus Angular (Frontend) und Django (Backend) dar, die Kommunikation erfolgt über eine sichere REST-basierte Schnittstelle.

Ergebnis

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.

FipsBox App Beispieldarstellungen

Eine App – alle Konten auf einen Blick! Mit der Umsetzung der FipsBox-Anwendung, bringen wir dem Nutzer einen echten Mehrwert im Online-Banking.

Lukas - UX / UI Designer, TEAM23

FipsBox App Beispieldarstellungen

Herangehensweise

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, PythonDjango umgesetzt.

Konzeption & Design

Konzeptionelle und grafische Neugestaltung der Oberfläche für eine intuitive Bedienung.

Prototyping

Entwicklung eines MVPs für den Einsatz in realen Nutzungsszenarien

Individuelle Software-Entwicklung

Entwicklung der Frontend-Anwendung (JavaScript) und Backend (Python). Dazu eine REST-Schnittstelle

Idee und Lösung

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

CreditPass Landing Page Website

01 – 04

Usability

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.

03 – 04

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.

03 – 04

MVP Ansatz

Ein Minimum Viable Product ist die erste minimal funktionsfähige Iteration eines Produkts, die dazu dient, möglichst schnell aus Nutzerfeedback zu lernen und so ein Proof of Concept zu erhalten. So kann weiterer Entwicklungsaufwand gespart werden, bevor das Produkt vom Nutzer nicht validiert wird.

04 – 04

Individuelle Softwareentwicklung

Für solch ein hochkomplexes Projekt war ein individueller Tech-Stack von Nöten. Das Backend basiert auf Python und einer REST-API, das Frontend wurde in JavaScript mit dem Angular-Framework geschrieben.
Da es sich um ein Web-System handelt ist Fipsbox über alle Geräte und Browser ortsunabhängig abrufbar.

Ergebnis

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.

CreditPass App Design System
BVDW Qualitätszertifikat 01/22-12/23 Trusted Agency. Zertifizierte Qualität durch den Bundesverband Digitale Wirtschaft e.V.
Portrait Laura Marwede in Büro

Interesse geweckt?
Ich freue mich auf Ihre Anfrage!

Laura Marwede

Head of UX & Strategy

Weitere Erfolgsgeschichten

In unserem Agentur-Portfolio geben wir Ihnen exklusive Einblicke in unsere Arbeitsweise, Bausteine für den Projekterfolg und weitere erfolgreiche Umsetzungen. Jetzt unverbindlich anfordern.