Webseite, Konfigurator & Backend mit ERP-Anbindung.

(I) Umsetzung: Die EuroFlexx24.com Webseite.

Die Webseite wurde in Framer umgesetzt.
Inspiration: Modernes Design von Tech Start-Ups.

Video zur EuroFlexx24 "Startseite"

Positionierung: EuroFlexx24 als Vorbild einer Branche, die zum Großteil noch analog arbeitet.
Damit dies zur Realität wird, habe ich in enger Zusammenarbeit mit dem Kunden die Umsetzung geplant.

Wie können Werte eines Unternehmens kommuniziert werden?

Um die Werte von EuroFlexx24 zu kommunizieren, muss ich die Markenidentität verstehen.
Der Slogan: "Fast. Easy. Digital." Doch was heißt das?

Wie kann ein "easy" bzw. unkompliziert in Designsprache übersetzt werden?
→ Meine Antwort: Ruhe ausstrahlen, durch Freiräume und durchdachtes Designsystem (Typografie, Farben)

Und wie soll digitale Transformation sichtbar werden?
Denn dies passiert leise im Hintergrund. Aber EuroFlexx24.com soll digitale Kompetenz ausstrahlen.
→ Meine Antwort: Micro-Interactions, mit Liebe zum Detail heben EuroFlexx24 aus der Masse.

Viele schreiben Animationen als Spielerei ab. Wenn ich an alte Flash Webseiten zurück denke, dann stimme ich dem zu.
Aber eine bewusste Nutzung bewirkt mehr als nur Ästhetik.

Mit diesen Werten setzt EuroFlexx24 neue Maßstäbe.

Warum Web-Animationen mehr als "nur" Spielerei sind.

Benutzer merken schnell, dass Interaktionen mit dieser Webseite einen Effekt haben.
Ob Animationen, oder ein 3D Effekt: Dies löst eine natürliche Neugier aus.
Das kleine Kind in uns erwacht: Es will entdecken und spielen.

• Verständlichkeit: Rückmeldungen verhindern Orientierungslosigkeit.

• Freude: Sinnvolle Spielereien reduzieren die kognitive Belastung.

  
  

EuroFlexx24 "Über uns" Seite mit animierten Karten über die eigenen Werte.

Besucher bleiben länger. Das sendet positive Signale an Suchmaschinen.
Andere Methoden dein SEO zu verbessern findest du hier: Link zu meinem Artikel über SEO.

Wo machen Animationen Sinn?

Damit die Animationen einen Sinn haben, sind einige Überlegungen wichtig.
Welchen Zweck verfolge ich?

Um die Aufmerksamkeit zu erhalten:

Dafür habe ich vor allem Sektionen mit hoher Informations- und Textdichte gewählt.
Das folgende Beispiel zeigt einen Ausschnitt "Über uns" Seite.

Versicherungsdokumente werden animiert, um den Lesefluss zu erleichtern.

Hier werden Besucher über die überdurchschnittliche Fracht-Versicherung informiert.
Ein wichtiges Thema, an das der Besucher sich erinnern soll. Die Ordner-Animation bleibt im Gedächtnis.

Zum Lenken:

Animationen lenken nicht nur die Aufmerksamkeit, sondern auch die Art und Weise, wie mit der Webseite interagiert wird.

Hier wird die Timeline Animation genutzt, damit Nutzer bis zum Ende der Sektion lesen.

Um Kontaktanfragen abseits des Konfigurator zu minimieren, habe ich auch eine 3D Komponente erstellt.
FAQ und Kontaktanfrage sind eine 3D Karte, das Formular ist auf der Rückseite.
Möchte der Nutzer eine Kontaktanfrage erstellen, wird er erst sanft an das FAQ geführt.

Wenn du mehr darüber erfahren willst:
Blogbeitrag: Wie bei EuroFlexx24 das FAQ als Türsteher fungiert

Aber:
Animationen verlangsamen Webseiten.
Wusstest du, dass dich jede Millisekunde Ladezeit Geld kostet?
Warum das so ist, und wie du auch mit Animationen für schnellere Ladezeit sorgen kannst:
Link zu meinem Blogpost über Ladezeiten als Umsatzhebel.

(II) Herz des Projektes: Der Konfigurator.

Ich habe einen mehrstufigen Konfigurator eigens für EuroFlexx24 programmiert.
Statt Copy-Paste sollten Anfragen zentralisiert erfasst und automatisch bearbeitet werden können.

Bei der Eingabe von vielen Daten kann es schnell monoton werden. Deshalb habe ich als kleine Motivation einen funktionalen iPod neben dem Konfigurator verbaut.

Konfigurator Schritt 1: Erste Preis-Schätzung, in Echtzeit.

Der erste Schritt im Konfigurator gibt eine schnelle Preisindikation, basierend auf:
1. Abholort (PLZ Eingabe)
2. Entladeort (PLZ Eingabe)
3. Gewünschtes Fahrzeug (Dropdown Auswahl)

Der Nutzer kann so mit seinem Budget schnell abgleichen.
Das erlaubt eine schnelle Preisindikation, ohne kognitive Überlastung am Anfang der Customer-Journey.

EuroFlexx24 Preiskonfigurator Schritt 1: Preis Schätzung

Konfigurator Schritt 2: Abfrage Frachtinformationen.

Im zweiten Schritt werden Daten zu der Fracht abgefragt. Wie viel, von was soll wohin?

Zu oft werden wichtige Angaben von Nutzern vergessen.
Daher wurden Pflichtfelder für diese Eingaben eingeführt.

Frachtdaten können auch unrealistisch sein. Das Backend prüft deshalb Gewicht, Volumen und Kapazität auf Plausibilität.
Unqualifizierte Anfragen oder nicht umsetzbare Transporte werden direkt vom Konfigurator aussortiert.

Hier werden im Hintergrund Stop-Regeln und Aufschläge mitberechnet- so werden einige Länder nicht bedient.
Der Kunde wird direkt informiert, statt erst am Ende.
Beispiel: Die Angabe der ADR Punktzahl (Angabe der Gefahrengutmenge) führt zu Preisaufschlägen, da für unterschiedliche Mengen andere Fahrerqualifikationen benötigt werden.

Auf dem Bild: Schritt 2 des Konfigurators von EuroFlexx24.

Konfigurator Schritt 3: Letzte Dateneingaben zu Be- und Entladeterminals.

Der letzte Schritt konkretisiert nun die Anfrage.
Mit konkreten Be- und Entladeadressen und weiteren Daten kann nun die Transportanfrage seitens EuroFlexx24 weiterverarbeitet werden.

Ohne händische Nacharbeit, ohne weitere Telefonate.
Alle benötigten Daten sind vollständig und strukturiert vorhanden.

Die Qualifizierung der Anfragen ist automatisiert.
Nutzer des Konfigurators bekommen direkt eine Rückmeldung, wenn etwa ein Transport so nicht möglich ist.
Statt Kundensupport kann der Disposition der Fahrzeuge mehr Ressourcen zugeteilt werden.

Interesse, den Konfigurator selbst auszuprobieren? Hier geht es zu der EuroFlexx24 Seite.

(III) Die Magie dahinter: Das Backend.

Das Backend ist eine eigene Entwicklung von Zukunftsberatung, eigens für EuroFlexx24.
Hier werden alle Anfragen und Touren zentral verwaltet.
Hier können Fahrzeuge, Zuschläge und Stop-Regeln eingestellt werden.

Auf dem Bild: Ansicht der über den Konfigurator eingereichten Anfragen im Backend.

Funktionsweise und Anbindung des Backends.

Die Kommunikation zwischen Backend und der EuroFlexx24 Webseite läuft über eigene API-Routen.
So wird zwischen der Preview-Route für die schnelle Schätzung und der präzisen Berechnung differenziert.
Die genaue Streckenentfernung wird statt Luftlinie mit echten Routen berechnet.
Das erlaubt Kostenreduktion, da die präzise Berechnung erst später mit Commitment des Nutzers bis Schritt 3 erfolgt.

Auch ist das Backend verantwortlich für die automatische Erzeugung und Versand von Dokumenten.
Also z.B. Auftragsbestätigungen, Lieferscheine und Status-Updates für den Kunden.

Auf dem Bild: Die Fahrzeugverwaltung im Backend

So bleibt EuroFlexx24 unabhängig und selbstständig.

Änderungen von Preisen oder das Hinzufügen/Löschen von Regeln, Zuschlägen oder sogar die Preislogik an sich kann hier justiert werden.

Beispiel: Ist in einer bestimmten KW ein Feiertag, so berechnet das Backend einen Aufschlag.
Grund: Die höhere Auslastung der Fahrer, da Frachtmenge in weniger Arbeitstagen zu bewältigen ist.

Verändert sich der Flottenbestand, oder ein Land wird von der Logistik nicht mehr bedient - auch kein Problem.

(IV) Zusätzliche Anbindung & Automationen

Die Web-Anfrage ist nur dann wertvoll, wenn sie sauber in die operative Abwicklung übergeht.
Datensätze werden an die operative Disposition übergeben, in das ERP.

Im Laufe der Umsetzung und Beratung konnte außerdem in weiteren Punkten dem Kunden Unterstützung geboten werden:

• E-Mail-Automation:
  Statt manuell werden E-Mails zu Anfragen, Bestätigungen und Status-Updates automatisiert versendet.

  
  

• ERP-Datenmigration
  Die Bestandsdaten aus dem alten ERP konnten in das neue System Lavid F.I.S 10 Kurier importiert werden.
  Für den Transfer von F.I.S 4 in das über 13 Jahre neure F.I.S 10 mussten die Daten bereinigt und korrekt zugeordnet werden.

  
  

• Optimierung der Übergabe-Logik zwischen Webseite und ERP
  Aufgrund der individuellen Programmierung wurde das Backend an das Schema von dem ERP System angepasst, sodass der weitere Transfer reibungslos laufen kann.

  
  

• Einrichtung E-Mail-Domains

  Auch kleinere IT-Problemchen wurden im Rahmen des Projektes gelöst.

Outcome für den Kunden mit dem neuen System.

Genaue Zahlen und Outcomes müssen erst unter realen Bedingungen noch weiter analysiert werden.
Einige Kennzahlen sind sehr schwer zu messen, z.B. die Opportunitätskosten bisher.

Wie viele Kunden sind bisher durch den fehlenden Webauftritt entgangen?
Wie viel Nerven hätte sich die Disposition sparen können?

Das bereits sichtbare Ergebnis:

Jede Anfrage erspart der EuroFlexx24 Disposition nun im Schnitt 25 Minuten.
Statt Copy-Paste kann sich EuroFlexx24 jetzt auf das konzentrieren, das wirklich zählt:

Mehr Skalierbarkeit durch Standardisierung und Automationen.