Logo Zewas

gutgereift: Innovatives Shopsystem für traditionelles Handwerk

GUTGEREIFT

gutgereift Tablet

Der Erhalt kleiner Strukturen auf der Produktionsseite und die Direktvermarktung von gut gereiftem Bregenzerwälder Bergkäse ist der Familie Simma schon seit vielen Jahren ein Anliegen.

Nach 20 Jahren im Bankensektor, hat Melchior Simma Entschluss gefasst, auf neue Pferde zu setzen. Mit einem neuartigen und innovativen Shopsystem erfolgt die Vermarktung online über die Website gutgereift.at. Über die eigens entwickelte Bestellplattform können ganze Familien, Vereine, Firmen und Freundeskreise einfach und schnell Gemeinschaftsbestellungen aufgeben. Durch den Aufbau von Communities auf Kundenebene werden auch hier persönliche Kontakte sichergestellt. Auch Einzelbestellungen sind möglich, sofern die Mindestbestellmenge 8kg beträgt. Der Versand erfolgt über ebenfalls bestehende und bewährte Strukturen. Die Österreichischen Post. Der Hauptabsatzmarkt ist aktuell im Osten Österreichs angesiedelt und wächst stetig.

KUNDE

Melchior Simma

WEBSEITE

gutgereift.at

UMSETZUNGSZEITRAUM

4 Monate

UMFANG

- Java Script

- Backend Development

- React

- Wordpress

- GraphQL

Aller Anfang ist schwer

Eine der größten Herausforderungen für unser Team war die Konzeptionsphase. Melchior arbeitete schon lange mit seinem Bestellsystem, dessen Abläufe ausgeklügelt aber nicht selten verschachtelt und sehr umfangreich waren. Deshalb wurden mehrere große Flussdiagramme angefertigt, die von der Registrierung von Kunden, über die Bestellabwicklung selbst, bis zur Erstellung von Etiketten alles abdeckten. Nach diesem Schritt folgte die Aufwandsschätzung und Angebotslegung von Zewas.

Das Design für die Website lieferte Sonja Mathees (https://sonzilla.de). Wie schon in der Konzeptphase war auch beim Design das einfache Darstellen der Bestellabwicklung die größte Herausforderung. Ihr Können bewies Sonja schon beim Design der statischen Unterseiten, die sehr gelungen sind. Auch die Bestellseiten wurden zum einen einfach und verständlich und zum anderen auch technisch sinnvoll gestaltet. Durch kurze Kommunikationswege stellte sich die Zusammenarbeit zwischen Melchior, Sonja und unserem Team meist sehr einfach dar und auf Probleme einer Partei konnte schnell reagiert werden.

gutgereift web overview

Die Technologien: Mal was Neues!

Bei der Umsetzung des Frontends setzte das Projektteam auf unser Steckenpferd ReactJS, doch beim CMS (Content Managment System) und dem Shopsystem probierte das Team eine neue Kombination. Das Shopsystem verwendet eine (headless) Wordpressinstanz mit WooCommerce. Diese Kombination kannten wir zwar schon von kleineren Projekten mit einfachen Buildern, headless arbeiteten wir bisher aber nur bei Praktikas mit dem CMS.

Mit Wordpress wurde die Verwaltung von Benutzerkonten umgesetzt, die „Erweiterung“ WooCommerce übernahm die Bestell- und Produktverwaltung. Um das Shopsystem auf die Anforderungen zu adaptieren war Handarbeit gefragt. Das Plugin wurde an einigen Stellen umgeschrieben und verbessert. Auf die Standard-REST-Schnittstelle von Wordpress wurde verzichtet und auf eine GraphQL Schnittstelle zurückgegriffen.

gutgereift tech stack

Die Umsetzung und das Bestellsystem

Im Frontend wurden unterdessen die statischen Seiten (Home, Über Uns, etc.) umgesetzt. Durch die Vorarbeit von Melchior und Sonja war dies auch in kurzer Zeit und ohne größere Komplikationen möglich. Auch die Ansichten auf Tablets und Smartphones war bereits im Design vorhanden. Herausfordender wurde es, als die Bestellseiten an der Reihe waren. Die Anbindung der Schnittstelle nahm einige Zeit in Anspruch. Um die folgenden Punkte einfacher zu verstehen, haben wir die Bestellabwicklung in einer Graphik dargestellt.

Das Bestellsystem kurz erklärt:

1. Registriere dich bei gutgereift.at.
2. lade FreundInnen, KollegInnen und Familie über gutgereift.at ein, mit dir zu bestellen.
3. Schicke die gesamte Bestellliste an gut gereift im Bregenzerwald ab.
4. Erhalte den bestellten Käse gesammelt in einem Paket. Die einzelnen Käsestücke sind mit Namen beschriftet.
5. Informiere deine FreundInnen und KollegInnen, dass der Käse abholbereit ist oder bring ihn persönlich vorbei.
.

gutgereift bestellabwicklung grafik

Kleiner technische Exkurs: Ein großes Problem war, dass eine Bestellung zum einen über mehrere Seiten verteilt war und zum anderen über mehrere Tage nicht abgeschlossen wird (die Zeit in der Subbesteller der Bestellung beitreten). Trotzdem sollte das Navigieren zwischen den einzelnen Seiten ohne lange Ladezeiten möglich sein und die Daten zwischengespeichert werden. Deshalb wurden die Daten bei jedem Weiternavigieren für das nächste Einsteigen zwischengespeichert. Dafür war ein eigenes Backend nötig, da WooCommerce nur abgeschlossene Bestellungen speichert.

gutgereift benutzerdaten screenshot

Die Bestellabwicklung wurde Schritt für Schritt abgeschlossen. Zuerst war der Screen für die Benutzerdaten an der Reihe. Dafür wurden zuerst die bereits vorhandenen Benutzerdaten von Wordpress geholt und angezeigt. Bei Änderungen wurden diese Daten wieder an Wordpress gesendet.

gutgereift bestellcommunity screenshot

Bei einer Gruppenbestellung folgt nun die Verwaltung der Bestellgruppen. Auf dieser Seite können verschiedene Gruppen angelegt, verwaltet und eingeladen werden. Das Einladen von Subbestellern ist über zwei Arten möglich. Zum einen können Besteller in der Oberfläche per Mail eingeladen werden, zum anderen kann ein Link generiert werden, der auch auf anderen Wegen versendet werden kann. Bei der ersten Einladung wird eine maximale Bestellzeit angegeben. Diese ist die Zeit, die eingeladene Subbesteller haben, um sich der Bestellung anzuschließen. Bei einem Klick auf „Weiter“ werden wieder alle Daten zwischengespeichert.

Die Subbesteller, die per Mail eingeladen wurden, können ganz einfach ihre Produkte hinzufügen und abschließen. Da der Bestellinitiator in den Gruppen bereits Namen angegeben hat, sind keine zusätzlichen Informationen zum Subbesteller notwendig. Bei den Subbestellern, die über den Link eingestiegen sind, ist eine kleine Registrierung nötig, um den Namen speichern zu können. Der restliche Prozess bleibt der Gleiche.

gutgereift bestellübersicht screenshot

Der nächste Schritt ist die Übersichtsseite des Bestellinitiators. Auf dieser Seite kann er seine eigenen Produkte hinzufügen. Zudem ist es auch möglich, händisch einen Subbesteller mit Produkte hinzufügen. Auf der rechten Seite sieht der Bestellinitiatoren all seine Listen mit bereits getätigten Bestellungen von Subbestellern und kann diese verwalten. Mit einem Klick auf „Weiter“ kommt der Subbesteller auf eine Bestellübersichtsseite und kann die Bestellung abschließen.

Bei einer Einzelbestellung wird der Bestellcomunity-Schritt übersprungen. Die Mindestbestellmenge muss trotzdem erfüllt sein.

Nachdem die Bestellung implementiert war und funktionierte, kamen weitere Herausforderungen auf uns zu. Zum einen wurde ein eigenes Rechnungslayout erstellt und zum anderen wird dem Bestellinitiator eine Liste mit allen Subbestellern und Listen zum Download zur Verfügung gestellt. Im WooCommerce Dashboard stehen zudem bereits alle Etiketten zur verfügung, die einfach gedruckt werden müssen.

Um das System zu vervollständigen, wurde noch eine Seite für alle vergangenen Bestellungen und eine Profilseite für die Kunden erstellt. Hier wurden externe Service zur Prüfung von Adressen, Postleizahlen und Telefonnummern eingebunden.

Alles in allem war es ein sehr herausfordernder Projekt, dass uns in vielen Bereichen geholfen hat, uns weiterzubilden. Zudem haben wir mit der Umsetzung eines headless Systems unseren Techstack erweitert und setzen bei größeren Projekten nach wie vor auf die headless-Entwicklung mit verschiedensten CMS. Auch in der Zusammenarbeit mit einem Kunden haben wir viel neues gelernt. Ein großes Dankeschön gilt dabei Melchior, der zu jeder Zeit erreichbar war und (obwohl er genau wusste, was er wollte) immer auf unsere Meinung hörte.

Haben Sie noch weitere Fragen?

AGB'sDatenschutzImpressum
Copyright 2023 - Zewas GmbH