DeinGlas – Web-App für automatisierte Bestellabwicklung

DeinGlas – Web-App für automatisierte Bestellabwicklung

„Dank des WebApp-Ansatzes von DeineSeite konnten wir innerhalb von 3 Monaten unsere gesamte Bestelllogistik digitalisieren und Preise automatisiert realitätsgetreu berechnen – bei einem Budget von unter 30 000 €. “
  –– Alen Bilalic, Geschäftsführer von DeinGlas.at

1. Kurzübersicht (Teaser)

• Kunde/Branche: DeinGlas.at (Hersteller von Glas nach Maß)

• Ziel: Entwicklung einer Web-App, die Produktionsdaten live auswertet und Bestellmengen sowie Preise automatisch berechnet.

• Budget & Dauer: unter 30.000 €; MVP innerhalb von 3 Monaten.

• Ergebnis:

  • + 800 % Bestellmengensteigerung

  • + 250 % schnellere Bestellabwicklung

2. Ausgangslage & Herausforderungen

DeinGlas ist seit Jahren im B2B-Einzelhandel für maßgefertigte Glaslösungen etabliert. Allerdings wurde die Kalkulation und Bestellung bislang manuell über Excel-Tabellen und telefonische Rücksprachen abgewickelt. Die Herausforderung bestand darin,

• etliche Glasarten (Temperiertes Glas, Verbundsicherheitsglas, Spiegelglas etc.) mit

• unzähligen Parametern (Dicke, Zuschnittmaße, Versiegelung, Kantenschliff etc.) so zu verknüpfen, dass sowohl die Auswahl des korrekten Materials als auch die Berechnung der optimalen Bestellmengen in Echtzeit erfolgen.

Der manuelle Prozess führte häufig zu Fehlbestellungen, langen Lieferzeiten und hoher Retourenquote. Ziel war es, ein adaptives Berechnungsmodell zu implementieren, das alle deterministischen (z. B. Standardmaße) und stochastischen Parameter (z. B. Materialverfügbarkeit, Toleranzen) zugleich berücksichtigt und automatisiert eine präzise Bestellempfehlung ausspielt.

3. Lösung & Technologie

3.1 Konzept & Algorithmik

• Iteratives, algorithmisch optimiertes Modell:

  • Kombiniert maschinelles Lernen (ML) und statistische Analysen, um aus historischen Produktionsdaten (z. B. Verbrauchsmengen, Mängelraten) eine dynamische, mehrdimensionale Datenmatrix zu erstellen.

  • Das Modell simuliert alle möglichen Konfigurationen von Glasvarianten und berechnet in Echtzeit:

    • Optimale Materialauswahl (z. B. günstige Lieferanten, kompatible Glasarten)

    • Exakte Bestellmengen unter Berücksichtigung von Sicherheitsreserven und Lieferzeiten

• Technologiestack:

  • Frontend: Vue.js (Web-UI) mit responsivem Design – dafür, dass sich Shop-Benutzer (Verkäufer, Disponenten) in wenigen Klicks orientieren können.

  • Backend: Node.js + Express, angebunden an eine PostgreSQL-Datenbank mit historischen Produktionstabellen.

  • Algorithmen:

    • ML-Komponenten in Python (scikit-learn, TensorFlow) für die stochastische Modellierung.

    • Optimierungsverfahren (z. B. lineare Programmierung, Zufallsforest) zur schnellen Berechnung.

  • API-Schnittstelle:

    • REST-API für den Datenaustausch mit dem firmeneigenen ERP-System (SAP-basiert).

    • Authentifizierung via JWT (JSON Web Token) für geschützte Endpunkte.

3.2 UX/UI-Design & Usability

• Design Sprint (1 Woche):

  • Gemeinsamer Workshop mit dem DeinGlas-Team, um alle notwendigen Glas-Parameter in User Stories zu überführen.

  • Erstellung von Wireframes für den Bestellkalkulator (z. B. Eingabe­masken für Maße, Glasart, Versiegelung).

• Prototyping & Usability-Testing:

  • Clickdummy in Figma, um erste Abläufe zu simulieren (z. B. Auswahl „Verbundsicherheitsglas 8 mm“, „Maße 120 × 80 cm“, „Kantenschliff poliert“).

  • Feedback-Runden mit Lageristen und Vertriebsmitarbeitern, um Interaktionsfehler zu minimieren.

• Produktion des finalen Designs:

  • UI-Komponenten: Kartenlayout für Bestellvorschläge, modulare Eingabemodule (Dropdowns, Slider für Maße).

  • Farbkonzept & Icons: Orientierung an der Corporate Identity von DeinGlas (Blau- und Grautöne, minimalistisches Iconset für Glasarten).

4. Projektverlauf & Meilensteine

1. Kick-off & Analyse (Woche 1–2)

   • Gemeinsamer Workshop zur Aufnahme aller Glasvarianten, Parameter und Prozessschritte.

   • Definition der MVP-Funktionalitäten: Kalkulator-Engine, Ergebnisdarstellung, Integration in ERP.

2. Prototyping & UX/UI-Design (Woche 3–4)

   • Erstellung von Wireframes und Klick-Prototypen (Figma).

   • Usability-Tests mit dem DeinGlas-Team (5 Teilnehmer).

3. Backend-Implementierung (Woche 5–8)

   • Aufbau der Datenbankstrukturen (PostgreSQL).

   • Entwicklung des ML-Modells (Python, scikit-learn), um Parameter­kombinationen abzubilden.

   • Aufbau der REST-API (Node.js/Express) zum ERP.

4. Frontend-Entwicklung (Woche 9–11)

   • Umsetzung der Vue.js-Komponenten für den Kalkulator.

   • Integration der REST-API-Endpunkte.

   • QA-Phase (Fehlerbereinigung, Performance-Optimierung).

5. Deployment & Launch (Woche 12)

   • Rollout-Plan im Testumfeld (Staging).

   • Integration in Produktivsystem (DeinGlas-ERP).

   • Schulung der Vertriebs- und Lagerteams (Video-Tutorials + Dokumentation).

   • Go-Live und Monitoring der ersten Bestellungen.

5. Ergebnisse & KPIs

• Bestellmengensteigerung: + 800 % innerhalb der ersten 8 Wochen nach Go-Live

• Beschleunigung der Bestellabwicklung: + 250 % kürzere Durchlaufzeiten (von durchschnittlich 24 Stunden auf 7 Stunden)

• Fehlbestellungen: Über 95 % aller Bestellungen waren ab Erstanwendung korrekt dimensioniert (Vergleich Vorher: 82 %).

• User-Zufriedenheit:

  • Binnen 4 Wochen: 4,7 von 5 Sternen für Bedienkomfort (internes Feedback der Vertriebsmitarbeiter).

  • Die automa­tische API-Schnittstelle zum ERP sparte im ersten Monat ca. 60 Personenstunden an manuellen Anpassungen.

„Mit der maßgeschneiderten Web-App von DeineSeite haben wir nicht nur unsere Abläufe digitalisiert, sondern durch die präzisen Berechnungen auch unsere Materialkosten deutlich gesenkt. Für uns war essenziell, dass das System in unter drei Monaten live geht – und genau das hat das Team geliefert.“
  –– Alen Bilalic, Geschäftsführer DeinGlas.at

6. Technologische Eckdaten auf einen Blick

• Frontend: Vue.js, HTML5, CSS3, responsives Design

• Backend: Node.js, Express, Python (ML), PostgreSQL

• Algorithmen: Lineare Programmierung, Random Forest, TensorFlow-basierte Modelle

• API: REST / JSON, JWT-Authentifizierung

• UX/UI: Design Sprint, Figma-Prototyp, Usability-Tests

• Deployment: Docker-Container unter Kubernetes im AWS-Cluster

7. FAQ – Häufige Fragen zur DeinGlas Web-App

1. Wie lange dauerte der MVP-Prozess?
   – Von Kick-off bis Go-Live vergingen exakt 3 Monate.

2. Welches Budget war für das Projekt eingeplant?
   – Die Gesamtkosten betrugen unter 30 000 €.

3. Welche Technologie wurde verwendet?
   – Frontend: Vue.js
   – Backend: Node.js + Express, Python (ML-Module), PostgreSQL
   – Algorithmen: Lineare Programmierung, Random Forest, TensorFlow
   – API: REST / JSON mit JWT-Authentifizierung

4. Wer hat die Lösung in Betrieb genommen und geschult?
   – Unser Team hat sowohl die technische Abnahme im Staging als auch eine Video-Schulung für die Vertriebs- und Lagerteams durchgeführt.

Du stehst vor einer ähnlichen Herausforderung?
Möchtest du eine Web-App in kurzer Zeit und mit klar kalkulierbarem Budget auf den Markt bringen?