RACE NET HMI UX/UI DEV.

RACE NET. HMI UX/UI Dev.

OQ3A9B1_ling

Projektübersicht

Projektübersicht: RACE-NET ist ein umfassendes System, das ähnlich wie SAP funktioniert, jedoch vollständig auf HTML, CSS und JavaScript mit jQuery aufgebaut ist. Die Daten werden über JSON gesteuert und sind an eine MongoDB-Datenbank angebunden. Ich war verantwortlich für das gesamte Design der grafischen Benutzeroberfläche, das ursprünglich in Adobe XD und später in Figma erstellt wurde, sowie für die komplette Programmierung des Systems. Die Datenbanken wurden extern angelegt. RACE-NET dient der Pflege und Verwaltung von Engineering-Projekten und wird firmenweit eingesetzt.

Meine Schritte zum fertigen Produkt



UX Design Prozess:

Der UX-Design-Prozess für RACE-NET war umfassend und umfasste mehrere Phasen:

  1. Research:

    • Marktanalyse: Untersuchung und Analyse bekannter Programme wie SAP und deren Funktionsweise.
    • User Interviews: Befragung der Endbenutzer zur Ermittlung ihrer Bedürfnisse und Herausforderungen.
    • Benchmarking: Vergleich mit bestehenden Systemen zur Identifizierung von Best Practices und Schwachstellen.

  2. Konzeption:

    • Wireframes und Skizzen: Erstellung erster Wireframes und Skizzen zur Visualisierung der Benutzeroberfläche und Funktionen.
    • Prototyping: Entwicklung von interaktiven Prototypen in Adobe XD und später in Figma zur Simulation der Benutzererfahrung.
    • Usability Testing: Durchführung von Benutzertests mit den Prototypen zur Identifizierung und Behebung von Usability-Problemen.

  3. Design und Entwicklung:

    • Visuelles Design: Erstellung eines ansprechenden und funktionalen visuellen Designs basierend auf den gesammelten Erkenntnissen und Prototypen.
    • Implementierung: Programmierung der Benutzeroberfläche und Einbeziehung der JSON-gesteuerten Datenbanken in MongoDB.
    • Iterative Verbesserung: Regelmäßige Überarbeitung und Verbesserung des Designs basierend auf Nutzerfeedback und neuen Anforderungen.
    • Icons und Layout: Alle Icons, das Layout und die Benutzerfreundlichkeit wurden von mir alleine und selbst gestaltet, um eine konsistente und ansprechende Benutzererfahrung zu gewährleisten.

  4. Launch und Wartung:

    • Rollout: Einführung des Systems im Unternehmen und Schulung der Mitarbeiter.
    • Support und Wartung: Bereitstellung von Support und regelmäßigen Updates zur Sicherstellung der Systemstabilität und -funktionalität.

RACE_NET Design – Table 2
RACE_NET Design – Table 2 – 2

Hauptfunktionen:

  • 01 Procurement Tool (PT): Verwaltung und Bestellung von Projektteilen und Komponenten mit F-Nummern (interne Teile) und E-Nummern (externe Zukaufteile).
  • 02 Commission Overview (RoMUKL): Tool für Distribution und Warenannahme, einschließlich Label-Erstellung mit QR-Codes.
  • 03 Web Race Client (WRC): Ermöglicht Ingenieuren die Erstellung neuer Teile und Integration von CATIA- und CAD-Teilen in die Datenbank.
  • 04 Fast Tool (FAST): Internes Freigabetool für Teile, das einen dreistufigen Kontrollprozess beinhaltet.
  • 05 Part Search Tool (PST): Schnelles Durchsuchen der Datenbank nach Teilenummern und Anzeige aller relevanten Informationen.
  • 06 RACE ADD Product Type (RPT): Hinzufügen neuer Fertigungsprozesse in die Datenbank.
  • 07 RACE ADD Werkstoff (RWS): Hinzufügen neuer Materialien in die Datenbank.
  • 08 RACE ADD Surface Treatment (RST): Eintragen neuer Oberflächenbehandlungen.
  • 09 RACE WEIGHT Management Tool (WMT): Verwaltung und Änderung des Teilegewichts.
  • 10 RACE USER Management: Verwaltung von Benutzerinformationen und Administratorberechtigungen.
  • 11 RODING ANPEITSCH TOOL (RAT): Überblick über alle Projekte zur rechtzeitigen Warenversendung.
  • 12 Zeitbuchungssystem (in Entwicklung): Design und Entwicklung eines Zeitbuchungssystems für Mitarbeiter.
03_Web_Race_Client
03_Web_Race_Client_find_search
03_Web_Race_Client_search_add_white

Technische Highlights:
  • Effiziente Datenbankabfragen: Die tabellarische Ansicht ermöglicht es, 10.000 Teile in unter 0,2 ms anzuzeigen.
  • Benutzerfreundliches Design: Intuitive und selbsterklärende Benutzeroberfläche, angepasst an verschiedene Benutzerrollen.
  • MS-Firmenaccount Integration: Personalisierte Darstellung basierend auf der Tätigkeit im Unternehmen.
  • Flexibilität und Erweiterbarkeit: Einfaches Hinzufügen neuer Tools und Funktionen.
  • CI-Abgestimmtes Farbschema: Das gesamte Programm verwendet Farben, die auf das Corporate Identity (CI) des Unternehmens abgestimmt sind, um ein konsistentes und professionelles Erscheinungsbild zu gewährleisten.
  • Responsible: Gewährleistung einer Geräteübergreifenden Nutzung, verschiedener Darstellungsgrößen.
  • Schriftart „Inter“: Integration der Open-Source-Schriftart „Inter“ als Systemschrift, um Lesbarkeit und ästhetische Konsistenz sicherzustellen.

Herausforderungen und Lösungen:

  • Systemleistung: Optimierung der Datenbankabfragen und Benutzeroberfläche für schnelle Ladezeiten.
  • Benutzerfreundlichkeit: Design und Implementierung einer klaren und intuitiven UI, die komplexe Prozesse vereinfacht.
  • Knappe Umsetzungszeit: Effiziente Planung und Umsetzung dank eines ausgeklügelten UX-Prozesses.

Erfolg und Einsatz:

RACE-NET ist täglich im Einsatz und unterstützt zahlreiche Mitarbeiter bei der Verwaltung und Pflege von Engineering-Projekten. Es bietet eine effiziente und schnelle Datenbankausgabe und kann leicht gewartet und aktualisiert werden. Das System hat sich als unverzichtbares Werkzeug für das Unternehmen etabliert.

Dieses Projekt hat mein Können und meine Kreativität als UX-Designer und Entwickler unter Beweis gestellt und zeigt meine Fähigkeit, komplexe Anforderungen in einem nutzerfreundlichen und leistungsstarken System zu realisieren.