Internationaler Relaunch der Franke B2B E-Commerce-Plattform

Über Franke

Franke ist ein weltweit führender Anbieter von Produkten und Lösungen für private Küchen und Badezimmer, die professionelle Systemgastronomie, die Kaffeezubereitung sowie halb- und öffentliche Waschräume. Die Gruppe besteht aus fünf Geschäftsbereichen.

Mit Hauptsitz im schweizerischen Aarburg beschäftigt die Gruppe rund 9.200 Personen in 68 Niederlassungen auf fünf Kontinenten und exportiert in über 100 Länder. Die Franke Gruppe erwirtschaftete 2016 einen Umsatz von CHF 2.1 Milliarden und gehört der Artemis Group an.

Die Beauftragung

Nach einem Screening entschied sich Franke Foodservice für die Berliner React Experten Ventzke Media als neuen digitalen Agenturpartner in Deutschland. Der B2B Webshop, den die großen Akteure in der Systemgastronomie weltweit täglich benutzen, sollte neu konzipiert und als React Single-Page-Applikation umgesetzt werden.

  • Branche

    Foodservice
  • Auftraggeber

    Franke Foodservice Systems
  • Services

    Prototyping & UX-Design / Agile Engineering (Frontend Entwicklung) / Tech Consulting / Team as a Service
  • Features

    Mehrsprachigkeit / Produktfilter / OnePage Checkout / Progressive-Web-App
  • Technologien

    React / TypeScript / Express / Node.js
  • Projektzeitraum

    2017 - 2021

www.franke.com/euro/de/fs.html

Franke

Projektarbeit in internationalen Teams

Bei einem international vertretenen Unternehmen wie Franke Foodservice Systems sind zahlreiche Teams in den Entwicklungsprozess involviert. Die Herausforderung bei dem Projekt war das Zusammenspiel des neuen Web-Frontends mit dem bestehenden Backend (ERP-System), welches in Echtzeit weltweite Lagerbestände aller Franke Warenhäuser abruft. Unsere Entwickler arbeiteten kollaborativ mit dem Lead-Entwickler-Team von Franke zusammen. Das Projektmanagement seitens Franke wurde aus den USA geleitet. Durch die agile Vorgehensweise haben wir ein hohes Maß an Flexibilität und schneller Abstimmung gewährleistet.

Franke

Unsere Services

  • Durchführung von Workshops
  • Agile Vorgehensweise mit überlappenden Sprints für schnelle Abnahmeprozesse
  • Konzeption, Optimierung der UI/UX Architektur
  • Erstellung von Desktop, Mobile Wireframes und klickbaren Prototypen (MVP)
  • Entwicklung der Interaction Designs für Desktop und Mobile
  • Entwicklung des Frontends als Single-Page-Application (SPA) & Progressive-Web-App (PWA)
  • Langfristiger Support, Beratung und wöchentliche Code Commits
  • Bereitstellung von Entwicklungsressourcen / Remote Teamintegration

Agile Vorgehensweise und ein Cutting-Edge Tech Stack

Basecamp
Slack
Gitlab
React
Redux
Typescript
Node
Yarn

Die einzelnen Projektphasen wurden in Sprints aufgeteilt. Für jeden Sprint gab es einen Wireframe- und einen Designprozess. Wurden die Sprints freigegeben, ging es direkt in die Entwicklung der React Frontend-Templates. Parallel dazu begann bereits der nächste konzeptionelle Sprint. So haben wir sichergestellt, dass kurz nach Erstellung eines Prototyps, dieser im Anschluss direkt umgesetzt und zum Testen freigegeben wurde.

Moderne Tools für die Kommunikation - über Zeitzonen hinweg

Anstatt des üblichen E-Mail-Verkehrs greifen wir auf moderne Kommunikation-Tools, wie Basecamp, zurück. Vorteil daran ist, dass sich verschiedene Themen zur besseren Übersicht anlegen lassen, in denen kanalisiert kommuniziert werden kann, ohne Management Overhead entstehen zu lassen. Ein weiterer Aspekt ist, dass alle Stakeholder stets über Updates informiert werden, ohne aktiv kommunizieren zu müssen.

Kontinuierliche Weiterentwicklung - wöchentliche Updates

Auch nach der Entwicklung des letzten Sprints war das über die letzten 15 Jahre gewachsene E-Commerce Portal noch längst nicht fertig. Nach dem ersten Release für den deutschsprachigen Raum wurden sukzessive weitere Länder freigeschaltet. Unser Konzept und Entwicklungs-Team arbeitet weiterhin an neuen Features, um diese schnell zu releasen und wöchentlich neue Code-Updates zu pushen.

Konzept - Prototyp - MVP

In der Konzeptionsphase erarbeiteten wir die neue UX der E-Commerce-Plattform. Dabei wurden bisherigen Strukturen und Klickwege komplett überarbeitet. Durch die neue UX-Architektur erreicht der User die gewünschten Produkte zukünftig deutlich schneller. Anhand von Filtermöglichkeiten und der Darstellung wichtiger Informationen, wie Verfügbarkeiten und Lieferzeiten, ohne die Produktdetailseite betreten zu müssen, wird ein optimiertes Nutzererlebnis sichergestellt.

Den Checkoutprozess haben wir deutlich verschlankt um die Conversion Rate zu steigern. Kombiniert wird die neue UX mit dem performanten Frontend, welches dank dem Einsatz der React JavaScript Bibliothek alle Inhalte ohne Ladezeiten bereitstellt.

  • 4 Wochen bis zum ersten Prototypen
  • 16 Wochen bis zum fertigen MVP
  • 100+ entwickelte views
  • 5000+ investierte Arbeitsstunden bis heute

Das Dashboard - Personalisierte Customer Experience

Kollaborativ mit dem internationalen Projektteam von Franke haben wir alle Templates des alten Webshops besprochen. Dabei haben wir uns Fragen gestellt, ob existierende Inhalte notwendig sind und wie Klickwege verkürzt werden können. Anhand von Datenanalysen konnten Entscheidungen validiert werden.

Die Anforderungen an das Dashboard waren:

  • Einfache Menüführung
  • Prominente Darstellung der Produktsuche
  • Darstellung von Promotions in einem Slider, optimiert für den Sichtbereich des Nutzers
  • Personalisierte Ansprache des Nutzers
  • Quicklinks anhand von Tile-based Boxen

Die Produktkategorien

Durch die neue Darstellung von Produktkategorien gelangt der Nutzer schneller an sein Ziel. Durch eine intelligente Vorfilterung wird eine lästige Suche erspart. Je nach Kundengruppe, z.b. Franchisenehmer, werden andere Produkte angeboten.

Immer über dem Footer präsent; die zuletzt besuchten Produkte.

Die Suchergebnisse und die Produktdetailseite

Am linken Bildschirmrand bleibt weiterhin die Möglichkeit zu filtern. Rechts erscheinen die Produkte in einer Listenansicht. Der Nutzer sieht vorab wichtige Produktinformationen, wie Lieferzeiten. Immer präsent, die Funktionen zum Bookmarken.

Die Merkliste

Auf der Merkliste stehen dem Nutzer alle Bookmarks bereit. Hier hat er die Möglichkeit Produkte direkt in seinen Warenkorb zu legen, um seine Bestellung abzuschließen. Je nach Produkteigenschaft werden zusätzliche Produkte in den Warenkorb gepackt, die notwendig sind.

Alles im Überblick - der Checkout

Entscheidet sich der Nutzer den Einkauf abzuschließen, erscheint von der rechten Seite ein Slide-In. Hier wird abgefragt in welches Restaurant geliefert werden soll. In der Regel sind die Kunden von Franke die großen Akteure in der Systemgastronomie.

Die Checkout-Seite haben wir nach dem OnePage Konzept aufgebaut, d.h. alle Inhalte finden auf einer Seite statt. Der Clou an der Seite ist, dass die Sektionen in Accordions versteckt sind, so hat der Nutzer die Möglichkeit alle relevanten Inhalte zu verstecken. Immer fixiert am rechten Rand ist das Element, der die Conversion erzeugt, der C2A Button.

Responsive like a Mobile App

Das mobile Konzept des Sliders wurde von uns für verschiedene Produktarten neu entworfen. Dabei haben wir auf die unterschiedlichen Auflösungen, besonders für mobile Endgeräte, geachtet. Slider-Dots, Text und Call-To-Action sitzen hier unter dem Bild.

  • Der Slider wurde auf das Sichtfeld des Nutzers optimiert
  • Bottom Navigation wie in einer mobilen App
  • Optimale Usability mittels Daumennavigation
  • Sandwich Navigation oben mit der kompletten Seitenstruktur

Bottom Navigation

In der Bottom Navigation werden die 4 primären Menüpunkte am unteren Bildschirmrand angezeigt. Jeder Punkt wird mit einem Icon und einem Wording dargestellt. Der größte Vorteil dieser Darstellung ist, dass der User sich nur mit der Bewegung des Daumens durch die Seite klicken kann.

Am rechten unteren Rand ist der Support Button fixiert. Hier kann der Nutzer mit dem Franke Support in Kontakt treten, und zwischen E-Mail, Telefon oder dem Weg per Chat entscheiden.

Mobile Checkout Prozess

Scrollt der User in seinem Warenkorb nach unten, fixieren sich die Endsumme mit Produktanzahl und der Button zum Bestellen am oberen Bildschirmrand. Somit hat er immer einen direkten Überblick über seine Bestellung und kann sie sofort abschicken, ohne bis ans Ende der Seite scrollen zu müssen.

Zur besseren Übersicht des Checkouts, ist die jeweilige Auswahl der Adresse, des Versands, der Bezahlung und der direkten Lieferung der Produkte, in einem Akkordion dargestellt.

Franke berichtet über uns

Franke

„Für uns ist Ventzke Media damit nicht mehr nur eine Agentur, sondern ein Partner.“

Dani Rayford, Business Systems Analyst, Franke Management Inc.

„Franke hat für die Neugestaltung der globalen E-Commerce-Plattform Ventzke Media ausgewählt. Mit den Ergebnissen sind wir sehr zufrieden. Die Designer und Entwickler nahmen sich die Zeit, um unser Geschäft wirklich kennenzulernen. Das Team war sehr aufgeschlossen gegenüber unseren Anforderungen und haben diese mit großem Engagement erfüllt. Es wurde ein modernes und gradliniges Design geschaffen, ein Design, das zudem einfach für unsere Kunden in der Anwendung ist. Entsprechend haben wir ein sehr positives Feedback nach dem ersten Release unsere E-Commerce-Plattform erhalten. Für uns ist Ventzke Media damit nicht mehr nur eine Agentur, sondern ein Partner. Wir freuen uns darauf, unsere Geschäftsbeziehung mit Ventzke Media in der Zukunft zu stärken."