byrd – All-in-one Logistik Software

Online App | UI & UX Design

Über byrd

Die E-Commerce Komplettlösung

„Du verkaufst, wir kümmern uns um den Rest“ – mit diesem Angebot eroberte byrd 2016 den österreichischen Markt. Anfang 2017 überzeugte das innovative Start-up, mit ihrem Konzept dann auch Marie-Helene Ametsreiter von Speedinvest bei der Puls 4 Show „2 Minuten 2 Millionen“. Der konsequente nächste Schritt, um das Start-Up bestmöglich am Markt zu positionieren, war es, die Priorität auf Businesskunden und Onlineshops zu legen. Die Services von byrd umfassten bisher das Abholen von Paketen beim Kunden vor Ort („Pickup“), die Verpackung, das Finden des günstigsten Versandpartners und schließlich den Versand der Pakete. Diese Services wurden für Business-Kunden nun um das Angebot „Warehousing“ erweitert. Verkäufer können damit nun Produkte bei byrd einlagern und müssen diese nicht mehr abholen lassen, bevor sie versendet werden können.

Um eine nahtlose User Experience für all diese Services zu schaffen, nahmen wir uns die Oberfläche der Web-Applikation zur Brust und verpassten ihr ein neues Konzept und einen neuen Anstrich.

Unser Ziel für das Projekt war es, ein Tool für unsere Kunden zu schaffen, mit welchem sie Spaß an ihrer Logistik haben und alle Prozesse transparent verfolgen können. In der Logistikindustrie wird der Benutzerfreundlichkeit leider noch wenig Beachtung geschenkt. Software ist oftmals unübersichtlich, veraltet und schwierig zu bedienen. Daher haben wir für das Redesign einen Partner gesucht, der frischen Wind in die veraltete Industrie bringen kann. Wir waren von Anfang an begeistert, wie gut sich das Liechtenecker Team in die Köpfe unserer Kunden hineinversetzen konnte und wie schnell sie mit dem Design den Nagel auf den Kopf getroffen haben.

Sebastian Mach, Chief Technology Officer

Die Challenge

Von B2C zu B2B

Aufgrund des Prioritätenwechsels von B2C hin zu B2B, entschloss sich Byrd, die mobile Privatkunden-App vollständig durch eine Web-App zu ersetzen, die sowohl Privatkunden als auch kommerzielle Händler und Vielversender bedient. Eine der Herausforderungen bei diesem Projekt war es daher, beide Arten von Kunden (Privat- und Businesskunden) in einem Interface zu vereinen und dabei den Bedürfnissen dieser beiden User-Gruppen gerecht zu werden.

Unsere Aufgabe

Mehr Transparenz schaffen

Wir kümmerten uns dabei um die Modernisierung, Neukonzeption und Neugestaltung der Web-Applikation, mit der Kunden Sendungen erstellen, verwalten und abholen lassen, sowie um die Erweiterung der App durch den Warehousing-Service. Im Bereich der Lagerhaltung war es byrd besonders wichtig, Transparenz in den Prozess der Einlagerung von Waren zu bringen. Kunden sollen von nun an nicht nur live den Verpackungs- und Versandprozess ihrer Sendungen tracken, sondern auch jederzeit den Lagerbestand ihrer Ware in Echtzeit einsehen können. Ein weiteres Anliegen war es, die Dauer für das Abschließen einer Bestellung zu reduzieren und die Abläufe generell zu vereinfachen.

Neue Features

Produkte künftig unkompliziert Einlagern

Das größte neue Feature ist die Warehousing-Lösung für Business-Kunden. Kunden können ihre Produkte nun nicht mehr nur von byrd abholen lassen, sondern auch ihre komplette Logistik auslagern und ihre Waren in den Lagerhäusern von byrd in Wien und Berlin einlagern und verwalten. Lager-Kunden können online Lagerplätze buchen, einsehen wie viele ihrer Produkte noch im Lager sind und, im Falle einer Bestellung, diese Produkte direkt aus dem Lager fachgerecht verpacken und mit dem günstigsten Anbieter versenden lassen. Neben diesem großen neuen Haupt-Feature kamen Funktionen wie eine Paketversicherung, ein Cash-On-Delivery und Express-Versand hinzu. Außerdem sollten Rechnungen ab sofort automatisch generiert und ausdruckbar sein und Statistiken den Überblick über die Lagerabläufe erleichtern.

Workshop

Einfühlen in das Kerngeschäft

Um den Kunden besser zu verstehen entwickelten wir in einem gemeinsamen Workshop unter anderem eine Empathy Map, auf der schnell ersichtlich wurde, was den Kunden besonders wichtig ist: Werte wie Sicherheit, Klarheit und Transparenz tauchten hier genauso auf, wie auch beispielsweise der Wunsch nach einer simplen Bedienung und Verlässlichkeit. Dafür stellten wir uns unter anderem folgende Fragen: Welche Erwartungen hat der User an byrd? Was denkt er über byrd? Was verschafft ihm Lust und was Frust im Umgang mit dem Tool?

03_workshop

User Flows

Visualisierung des Ablaufs

Basierend auf der Empathy Map und weiteren Insights aus dem Workshop erstellten wir User Flows für beide Sparten (Pickup und Warehousing). Diese halfen uns dabei herauszufinden, ob wir im Prozess nichts übersehen hatten bzw. ob der Ablauf logisch und vollständig ist. Aus den Flows entwickelten wir dann erste klickbare Prototypen.

04_userflow-pickup_v3

Styleguide

Die Basis für die weitere Entwicklung

Im Zuge des Projekts haben wir für byrd einen Styleguide erstellt, mit dessen Hilfe die technische Umsetzung noch schneller und exakter möglich war. Dieser beinhaltet folgende Punkte:

  • Farben
  • Fonts
  • UI-Elemente
  • Tabellen
  • Abmessungen

Um ein konsistentes visuelles Erlebnis zwischen der Website und dem neuen Tool gewährleisten zu können, sind wir von der Grundfarbe – die auch im Logo verwendet wird – ausgegangen und haben die anderen Farben passend dazu ausgewählt. Die dunklen Grautöne helfen dem neuen Tool dabei Kontraste hervorzuheben (zB.: Headerleiste, Quick-Funktionen und Tooltips heben sich von den hellen anderen Elementen gut ab). Als neue Font-Familie haben wir uns für Open Sans entschieden. Diese funktioniert sowohl sehr gut innerhalb von informationsdichten Tabellen als auch für große Titel und Überschriften.

05_Farben 06_Fonts 03_UI-Elemente

Fullfillment leicht gemacht

Warehousing für Businesskunden

Über diesen neuen Geschäftszweig können Businesskunden ihre Waren in Lagerhäusern von byrd in Wien und Berlin einlagern und verwalten. Sie können online Lagerplätze buchen, die Verfügbarkeit ihrer Produkte einsehen und, im Falle einer Bestellung, diese Produkte direkt aus dem Lager fachgerecht verpacken lassen und mit dem günstigsten Anbieter versenden.

12_warehousing-prozess

Real-Time Inventarinfo

Der User kann mithilfe von Echtzeitstatistiken jederzeit den aktuellen Stand seines Inventars einsehen und behält so immer den Überblick. Verkäufe können von der Bestellung bis zur Zustellung nachverfolgt  werden.

Beispiel Sendungen

Wie im Pickup, besteht auch im Einlagerungsprozess die Abfertigung der Sendungen aus mehreren „Angelegt, Freigegeben, In Bearbeitung,Verschickt“ diese Punkte werden jeweils als navigierbare Steps dargestellt.

13_warehousing_sendungen

Pickup

Der flexible Abholservice

07_pickup-prozess

Die Lösung

Ein personalisiertes Dashboard

07-Dashboard-Sendungen@2x

Nach dem Login bzw. der Registrierung wird der User im neuen Tool nun auf ein Dashboard weitergeleitet. Hier hat er einen Überblick über die wichtigsten Funktionen in Form von Widgets. Das Dashboard bietet eine personalisierte Übersicht zu Statistiken, dem Status der Sendungen und gibt Hinweise zu positiven wie negativen Sendungsverläufen. Gerade detaillierte und stets aktualisierte Statistiken stellen für die Benutzer einen Anreiz dar, ihr Dashboard oft zu besuchen. Transparenz und Klarheit spielten hier in der Konzeption die Hauptrollen.

 

Das Anlegen einer neuen Sendung, die Preisschätzung und das Hinzufügen einer neuen Shopverbindung sind (als häufig genutzte Features) für den schnellen Einstieg auch als Quick-Funktionen verfügbar.

 

In der Menüleiste befindet sich neben den Notifications und dem Profil auch die Funktion zwischen Pickup und Warehousing zu wechseln. Diese zwei Grundbereiche sind nicht nur Inhaltlich verschieden, sie unterscheiden sich auch farblich, um immer Klarheit für den Nutzer darüber zu schaffen, in welchem Bereich er sich gerade befindet.

Quick Setup

Der schnelle Guide zum Durchstarten

Nutzt ein Kunde zum Ersten Mal das Tool, lernt er durch einen Wizard die Grundfunktionen kennen. Der User wird dazu aufgerufen, seinen Shop zu integrieren, Zahlungseinstellungen vorzunehmen und sein Profil zu konfigurieren.

08_Welcome@2x 09_Shopverbindung@2x

Neue Sendung

Einfaches Erstellen auf verschiedene Arten

Auf das schnelle und einfache Erstellen neuer Sendungen wurde besonderen Wert gelegt. Dank der neuen UX ermöglichen wir es dem User, mit wenigen Klicks eine Abholung anzufordern und eingelagerte Waren zum Versand freizugeben. Zur Erstellung kann man entweder über das Menü oder über einen prominenten CTA am Dashboard gelangen. Für das Anlegen einer neuen Sendung gibt es mehrere Möglichkeiten: Manuell, über den CSV Import oder bestehende Sendungen aus einem Shop importieren.

10_NeueSendung-SHOPVorhanden-aufgeklappt@2x

Pickup anfordern

Pakete flexibel abholen lassen

Nachdem man eine neue Sendung erstellt hat, kann man dafür einen Pickup anzufordern. Damit die Abholung rasch und problemlos funktioniert, hat der User die Möglichkeit ein Wunschzeitfenster und Zusatzinformationen (mit einer Vorlaufzeit von 2 Stunden) anzugeben.

11_Sendungen-PickupAnfordern@2x

Ausblick

Derzeit befindet sich die neue Logistiksoftware in der Beta-Phase – wird aber ständig weiterentwickelt. Wir von Liechtenecker freuen uns auf die zukünftige Zusammenarbeit und sind gespannt auf zahlreiche neue Features und Herausforderungen, um den Service künftig noch weiter zu verbessern. Byrd, der professionelle Online Logistik Partner für E-Commerce Shops, bringt Innovation in die Logistikbranche und wir sind sehr stolz darauf, sie dabei zu unterstützen.

14_behindthescrenes

Dieses Projekt ansehen

Ein weiteres Projekt von uns