Die Matching Engine ist technisch funktionsfähig, besitzt jedoch kein Frontend. Um das Tool bedienen zu können, ist technisches Know-how notwendig. Dies stellt eine große Hürde in der Vermarktung dar. Es können zwar zwei Datenquellen miteinander verglichen werden, die Übereinstimmungen müssen jedoch exportiert und manuell weiterverarbeitet werden. Das ist im Tagesgeschäft nicht praktikabel. Um das Tool auch ersten Kunden zur Verfügung zu stellen, muss ein benutzerfreundliches Frontend entwickelt werden. Auch eine zukünftige Whitelabel-Lösung sollte berücksichtigt werden.

‍

‍

Um das Frontend möglichst effektiv und zeitnah zu entwickeln, wurde das Projekt in drei Phasen unterteilt. Die Konzeptionsphase, die Designphase und die Umsetzungsphase.

‍
Konzeption eines intuitiven Frontend – die Erstellung von Wireframes

‍
Um möglichst schnell zu einem Ergebnis zu kommen, wurden zunächst für die benötigten Seiten Wireframes erstellt. Wireframes sind vereinfachte Skizzen oder Blaupausen einer Anwendung. Sie stellen das Grundlayout und die Benutzeroberfläche dar, ohne dabei auf Details wie z.B. Farben, Grafiken oder spezifische Inhalte einzugehen. Sie helfen dabei die grundlegende Struktur zu visualisieren, bevor visuelle Aspekte hinzugefügt werden.

‍
Die Vorteile der Erstellung von Wireframes:

• Frühzeitige Identifikation von Schwachstellen oder Problemen in der Benutzerführung
• Wireframes können schnell erstellt und angepasst werden, was Zeit spart und den Entwicklungsprozess beschleunigt.
• Wireframes dienen als gemeinsames Referenzdokument für Designer, Entwickler und Stakeholder, was die Kommunikation und Zusammenarbeit verbesserte.
• Sie ermöglichen es, frühzeitig Feedback von Stakeholdern und Benutzern einzuholen, was zu einem benutzerzentrierten Designprozess beiträgt.
• Durch frühzeitige Planung und Abstimmung werden potenzielle Fehlentwicklungen vermieden, was spätere Korrekturen und damit verbundene Kosten minimiert.
• Wireframes legen den Grundstein für die visuelle Designphase, indem sie eine klare Struktur und Layoutvorgaben liefern.

‍
Insgesamt sind Wireframes ein unverzichtbares Werkzeug im Entwicklungsprozess, da sie eine klare und effiziente Planung ermöglichen, die Kommunikation und Zusammenarbeit verbessern und dazu beitragen, ein benutzerzentriertes und funktionales Endprodukt zu entwickeln.
 
 

‍
 
Benutzerzentriertes Design – der Schlüssel zu einem intuitiven Frontend

‍
Der Hauptfokus lag bei diesem Projekt auf dem Design und der Benutzerführung der Matching Engine. Besondere Aufmerksamkeit wurde auf eine übersichtliche und strukturierte Darstellung gelegt. Die Anwendung umfasst viele Tabellenansichten, die so gestaltet wurden, dass die zu vergleichenden Datensätze gut lesbar sind und die Prüfung intuitiv durchgeführt werden kann. Die Prüfung der Datensätze wird zudem visuell unterstützt und zeigt an, welche Felder übereinstimmen oder nicht. Der Anwender kann Datensätze in Batches von beispielsweise 100 Stück prüfen, wobei ein Fortschrittsbalken jederzeit anzeigt, wie viele Datensätze bereits freigegeben wurden.

‍
Entwicklung eines innovativen Farbsystems für eine schnelle Whitelabel Umsetzung

‍
Die Anforderung einer Whitelabel Solution führte uns zu der Entwicklung eines innovativen Farbsystems, aus drei Grundfarbtönen. Das durchdachte Farbsystem sorgt für eine harmonische Optik, die flexibel an das Corporate Design des Kunden angepasst werden kann. So bleibt die Matching Engine stets ein integraler Bestandteil der Markenidentität der Kunden.

‍
Optimierte Usability – Für ein optimales Nutzererlebnis

‍
Ein weiterer Schwerpunkt des Projektes ist die ausgezeichnete Usability. Der User wird stets intuitiv und mit visueller Unterstützung geführt. 
Die Matching Engine bietet die vollständige Bedienung der Anwendung mit der Tastatur. Dies sorgt für eine effiziente und ergonomische Bedienung. Die Hände verbleiben auf der Tastatur, was den Arbeitsfluss nicht unterbricht und somit die Produktivität steigern kann. Für viele User ist das Tippen auf der Tastatur schneller als das Klicken mit der Maus, insbesondere bei der Datenprüfung- oder Eingabe. Tastenkürzel ermöglichen zudem einen schnellen Zugriff auf häufig verwendete Funktionen. Um den User die Nutzung mit der Tastatur zu vereinfachen, ist an jeder Schaltfläche sichtbar mit welcher Taste auf der Tastatur die Schaltfläche aktiviert werden kann. Ein mühsames Merken oder Notieren der Tastenkürzel entfällt.

‍
 
Personalisierte Oberflächenwahl: Dark- und Light-Mode für individuellen Komfort und ein optimiertes Benutzererlebnis

‍
Durch die zusätzliche Einführung eines Dark- und Light-Modes kann der Benutzer selbst entscheiden, welcher Modus für ihn angenehmer ist. Der Dark Mode bietet eine dunkle Oberfläche, oft auch als Nachtmodus bezeichnet, während der Light Mode eine helle, grellere Oberfläche bietet.
 

‍
Vom Design zum Code – die Umsetzung

‍
Bei der Entwicklung des Frontend haben wir uns für das Framework Vue.js entschieden. Es handelt sich dabei um ein sehr schlankes Framework, das sich ideal für komplexe Aufgaben, wie die Entwicklung von grafischen Oberflächen eignet. Das Framework bietet eine starke Performance und ist darüber hinaus sehr flexibel.
Durch die Verwendung von Vue.js konnten wir eine klare Struktur und Wartbarkeit des Codes sicherstellen. Die dynamischen Komponenten und das effiziente Datenmanagement von Vue.js trugen maßgeblich dazu bei, ein schnelles und reibungsloses Nutzererlebnis zu gewährleisten.

‍