Über Lorberg - Baumkultur seit 1843
Die im Jahr 1843 gegründete Baumschule Lorberg hat sich in den vergangenen Jahren zu einer der führenden Baumschulen in Deutschland und Europa entwickelt. Lorbergs Pflanzen prägen die Projekte renommierter Landschaftsarchitekten, sie wachsen in öffentlichen Anlagen, begleiten Überlandstraßen und gestalten Gewerbeobjekte sowie Privatgärten.
Das Projekt
Die Baumschule Lorberg kam 2018 mit einer neuen Anforderung auf uns zu. Es sollte eine B2B E-Commerce Webapplikation entwickelt werden, welche das komplette Pflanzensortiment Lorbergs als Online-Katalog abbildet. Ziel war es, einen performanten und intuitiven Produktkatalog zu entwickeln, der es Gartenlandschaftsbauern ermöglicht ihre Pflanzen bei Lorberg online zu bestellen.
Das Ergebnis
Die performante Single-Page-Applikation bietet den Kunden von Lorberg in Zukunft eine optimale E-Commerce Experience. Durch das 3-spaltige Konzept, welches von links nach rechts alle wesentliche Inhalte darstellt, ist unnötiges Seiten wechseln überflüssig geworden. Auch nennenswert ist die UX auf Smartphones, welche es dem Nutzer erlaubt alle Navigationselemente mit seinem Daumen zu steuern.
Branche
GartenbauAuftraggeber
H. Lorberg Baumschulerzeugnisse GmbH & Co. KGServices
Prototyping & UX-Design / Agile Engineering (Frontend & Backend & Web-App)Features
3-spaltiger Produktkatalog / Intelligente Suche & Filter / schneller Checkout / Guided Tour / Anbindung WarenwirtschaftTechnologien
React / TypeScript / Node.js / Express / LoopbackProjektzeitraum
2018 - 2019
Klassischer Webshop - nicht bei Lorberg!
Wer kennt sie nicht, die klassischen Online-Shops? Ein wiederkehrender Seitenaufbau mit einer Startseite, Slidern, Contentelementen, Favoriten-Listen usw. All das haben wir bei der neuen Lorberg E-Commerce Web-App infrage gestellt. Denn warum dem Nutzer mit überflüssigen Inhalten überfluten, wenn es doch eigentlich nur um eines geht: schnelles Auffinden der Produkte sowie Performance.
Das 3-Spalten-Konzept bietet dem Nutzer eine optimale Übersicht über die Kernfunktionen eines Webshops: Produktsuche, Produktansicht, Warenkorb.
Ladezeiten ade! Die performante React Single-Page-Anwendung bietet dem Nutzer eine Experience der neuen Generation: Produkte werden direkt geladen, ohne dass ein Page-Reload notwendig ist.
Im Checkout kann der Nutzer seine Bauvorhaben (Projekte) anlegen. Bei weiteren Bestellungen hat er später dadurch die Möglichkeit, mehrere Artikel auf ein Projekt zu legen, um eine bessere Übersicht zu erhalten.
Die Mobile UX
In der mobilen Ansicht der Progressive-Web-App werden die 3 Spalten als einzelne Seiten dargestellt. Unten am Bildschirmrand entsteht die Bottom-Navigation, mit welcher der Nutzer die Möglichkeit hat, durch alle Bestellprozesse zu navigieren. Die Icons in der Navigation sind intuitiv gestaltet und benötigen keine zusätzlichen Wordings.
