Vom Konzept zur Realität: Die Entwicklung eines intuitiven Frontend

Die Mission der Datenschmiede.ai ist es, Unternehmen durch die KI-basierte Automatisierung der Datenpflege zu befähigen, ihre Datenqualität nachhaltig zu verbessern.

Das Unternehmen

Die Datenschmiede.ai GmbH wurde 2023 von Dr. Felix Kruse, Dr. Christoph Schröer und Raphael Holtmann gegründet. Die Mission der Datenschmiede.ai ist es, Unternehmendurch die KI-basierte Automatisierung der Datenpflege zu befähigen, ihre Datenqualität nachhaltig zu verbessern und so den Einsatz von Digitalisierung und KI sinnvoll zu gestalten – für den langfristigen wirtschaftlichen Erfolgi hrer Kunden.

Bisher pflegen die Unternehmen ihre Daten mit hohen manuellen Aufwänden über Spreadsheets oder führen in großen und komplexen IT-Projekten kostenintensive Softwareprodukte ein. Am Ende kann nur ein Teil der riesigen Datenmengen mit den verfügbaren Mitarbeitern gepflegt werden. Unternehmen realisieren, dass die Datenqualität das zwingend notwendige Fundament für den sinnvollen Einsatz vonKI ist.

Die Datenschmiede.ai hat mit ihrer KI-basierten Matching Engine eine Softwarelösung über mehrere Jahre erforscht und entwickelt, mit der die Datenpflege und Steigerung der Datenqualität automatisiert werden kann. Die Software verarbeitet Geschäftspartner-, Privatkunden- sowie Artikel- und Materialdaten aus verschiedensten ERP-, CRM- und PIM-Systemen.  Mit ihrer Software automatisiert die Datenschmiede.ai die Datenpflegeprozesse im E-Commerce, Handel, Logistik und der öffentlichen Verwaltung.

Über die Matching Engine



Mit der KI-basierten Matching Engine werden verschiedenste Stammdaten wie Geschäftspartner- oder Artikel- und Materialdatensätze aus ERP-, CRM- und PIM-Systemen verarbeitet.
Beispielsweise wird die Matching Engine eingesetzt, um die Lieferanten aus 10 internationalen ERP-Systeme zu einer zentralen und eindeutigen Lieferantenübersicht zu überführen, um den strategischen Einkauf zu unterstützen.
Für Versorger die für ihre Geschäftsbereiche unterschiedliche CRM-System oder Mandanten aufgebaut haben, wird die Matching Engine eingesetzt, um eine einheitliche und eindeutige Übersicht für alle Kunden zu erhalten. Für Industriekunden wird die Software eingesetzt, um Duplikate in Kunden- und Lieferantendaten zu identifizieren und aufzulösen.

Die Herausforderung

  • Kein vorhandenes Frontend
  • Bedienbarkeit nur mit technischem Know-How
  • Manueller Aufwand notwendig

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.

Die Qualität des Projektergebnisses spricht für sich. Jedes Detail wurde mit höchster Sorg-falt umgesetzt, was deutlich zeigt, wie viel Herzblut und Expertise in das Projekt eingeflossen sind.

Raphael Holtmann
Gründer | COO

Die Lösung

  • Konzeption eines intuitiven Frontend
  • Erstellung von Wireframes
  • Entwicklung eines benutzerzentrierten UI-Designs
  • Entwicklung eines innovativen Farbsystems
  • Optimale Usability
  • Personalisierte Oberflächenwahl

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.

Das Ergebnis

  • Flexibles und performantes Frontend
  • Benutzerzentrierte Anwendung mit Fokus auf UX
  • Whitelabe Solution
  • Hochwertiges UI-Design
  • Vermarktungsfähige Lösung

Unser Projektteam hat ein flexibles und leistungsstarkes Frontend entwickelt, das nicht nur auf hohe Performance ausgelegt ist, sondern auch eine ansprechende und benutzerzentrierte Benutzeroberfläche bietet. Durch intensive UX-Optimierung und die Integration eines ausgefeilten Farbsystems, konnten wir sicherstellen, dass sich die Anwendung schnell und nahtlos an die Corporate Identity anpassen lässt.


Flexibles und performantes Frontend für eine hohe Leistung

  • Ansprechende und benutzerzentrierte Anwendung mit Fokus auf UX
  • Whitelabel Solution – Schnelle Anpassung an die Corporate Identity (CI) der Kunden
  • Designoptimierung basierend auf drei Grundfarben für eine konsistente Ästhetik
  • Ergonomische und effiziente Bedienung ohne Maus für einen verbesserten Arbeitskomfort
  • Tasten-Shortcuts sind auf jeder Schaltfläche sichtbar – für ein effizientes Arbeiten
  • Sehr hohe Usability, die die Beliebtheit und Nutzungsfreude der Anwendung garantiert
     

Die Datenschmiede ist nun in der Lage eine auf Design und Usability optimierte Anwendung zu vermarkten.
 

Welche Herausforderungen haben Sie?

Wir entwickeln Software nach Ihren Anforderungen und Wünschen!

Weitere interessante Success Stories

Einfacher und schneller Zugriff auf die CEWE Fotoprodukte via mobile App

Erhöhung der Nutzerfreundlichkeit mit einer mobile App der CEWE Fotowelt.

Mehr erfahren

HALVAR App - Von manuellen hin zu automatisierten Prozessen

Intuitive Dashboards für Betriebsdaten von Energieerzeugungsanlagen.

Mehr erfahren

Implementierung eines systemübergreifenden Reportings mit MS Power BI

Effektivität und Zeitersparnis dank Self-Service Reports.

Mehr erfahren