Bestellformular in Vue, Schritt für Schritt mit Validierung. So fehlt nichts mehr bei Paket, Zeit, Adressen oder Zahlung.
Kontext
Der Engpass lag nicht nur im Look, sondern im Bestellprozess.
Vorher liefen Einzelbestellungen vor allem über Telefon oder E-Mail. Die Website wirkte veraltet, aber das eigentliche Problem kam danach: Oft fehlten Infos für Preis, Abholung und Disposition. Dann musste das Team nochmal nachhaken.
Velokurierbern wollte vor allem den Bestellprozess lösen. Nicht einfach ein schöneres Frontend, sondern ein digitaler Weg, bei dem alle Daten von Anfang an vollständig ankommen.
Hover zum Ansehen
Aufgabe
Viele Lieferdaten erfassen, ohne die Bestellung schwer zu machen.
Ich sollte einen digitalen Bestellweg bauen, bei dem Kundinnen und Kunden selbst bestellen können. Gleichzeitig soll die Disposition alle Infos haben, ohne nochmal anrufen zu müssen. Pro Lieferung braucht Velokurierbern viele Angaben für Preis, Tempo und Planung. Das Formular darf trotzdem nicht abschrecken. Meine Herausforderung: all diese Felder so führen, dass am Ende wirklich alles da ist.
- Datum und Abholzeit (von / bis)
- Lieferzeit (von / bis)
- Abhol- und Lieferadresse
- Kontaktperson
- Wer bezahlt und wie
- Gewicht und Abmessungen des Pakets
- Standort des Pakets vor Abholung
Umsetzung
Vom Formular direkt in die Disposition.
Laravel-Anbindung an die Dispo-Software. Bestelldaten gehen direkt an die Fahrer, ohne Abtippen aus E-Mails.
Online-Zahlung bewusst weggelassen, aus Budgetgründen. Zahlungsart wird erfasst, abgerechnet wie bisher.
Wirkung
100 digitale Bestellungen in zwei Monaten. Rund 40% der Einzelbestellungen liefen nach Launch über das Formular.
Zahlen zwei Monate nach dem Launch
Man merkt es im Alltag: Bestellungen kommen strukturiert an, die Disposition muss seltener nachfragen. Weniger Telefonate und E-Mails, wo vorher Infos gefehlt haben.
Ergänzung · Website
Die Website wurde poliert, damit der Bestellfluss sichtbar wird.
Parallel dazu habe ich die Website in Statamic aufgefrischt: übersichtlicher, besser auf Mobile, mit klareren Buttons zum Formular. Sie hilft beim Bestellen, ist aber nicht der Kern dieser Case Study.
Bestellung im Fokus
Schneller zum Formular, weniger Umwege.
Marke mitpoliert
Marke bleibt erkennbar, wirkt online frischer.
Responsive umgesetzt
Läuft auf Desktop und Handy.
Frühe Design-Explorationen ansehen
Learnings
Was ich beim nächsten Mal anders machen würde.
Erst Branding, dann Bestellprozess
Beides gleichzeitig über ein Jahr war anstrengend, die Themen haben sich ständig in die Quere gelegt. Beim nächsten Mal würde ich zuerst das Branding fertig machen und umsetzen, bevor ich den Bestellprozess angehe.
Früher einen zweiten Dev einbinden
Architektur und Stack alleine zu entscheiden, war an manchen Tagen zäh. Bei ähnlichem Umfang würde ich früher eine zweite Person ins Team holen.