Die Sushi Bar Kette negishi trat mit der Bitte deren Website zu überarbeiten an uns heran. Im Verlauf des Projektes stellte sich heraus, dass es mehr neue Herausforderungen zu bewältigen gab, als anfänglich angenommen.

Die stetig wachsende Kette war zu Beginn des Projektes in einer grossen Umstrukturierungsphase. Neue Logistiksysteme, neues Kassasytem und zum bestehenden Take-Away Service ein eigener Kurierdienst, welcher Bestandteil der neuen Website werden sollte, waren gerade im Aufbau. Das Endresultat kann sich trotzdem sehen lassen. Reduziert aber emotional präsentiert sich die voll responsive Lösung. Die hohe Komplexität der Funktionen merkt man nicht und das ist auch gut so.

Die Challenge

All-in-one Icon Negishi bietet Take-Away und Delivery an. Dabei können standortabhängig verschiedene Produkte und Preise existieren. Zudem gibt es Standorte, welche externe Dienste für die Lieferung der Produkte beauftragen. Es galt also, viele Möglichkeiten mit bester Transparenz und Effizienz anzubieten.
Kompatibilität Icon Das System musste mit dem Kassasystem, einem Delivery System, welches zu dieser Zeit noch im Bau war, einem noch unbekannten Reservationssystem und weiteren Systemen kompatibel sein. Zudem soll das selbe Basis-System auch für eine weitere Kette der Gruppe eingesetzt werden.
Responsive Design Icon Eine E-Commerce Plattform im responsive Design sauber und konsequent umzusetzen, ist immer eine Herausforderung.
Emotionalität Icon Bei negishi sind etwa die Hälfte der Besucher online-Besteller. Es galt also, die beste Lösung zwischen Effizienz im Bestellprozess und Emotionalität für andere Teile der Website zu finden.
Online-Marketing Icon negishi ist im Gegensatz zu dieci eher als Restaurant-Kette bekannt, als für ihren Take-Away oder Lieferservice. Es galt daher, negishi's Takeaway und Delivery Service als fester Bestandteil jeder Filiale zu etablieren.
Workshops & Interviews

Anforderungen erheben

Am Anfang mussten wir uns dieser Herausforderungen erst bewusst werden. Hierzu veranstalteten wir Workshops, beobachteten den bestehenden Bestellprozess in einer Filiale und befragten Mitarbeiter und Benutzer in Interviews nach deren Bedürfnissen. In intensiver Zusammenarbeit mit dem Kunden erarbeiteten wir eine erste Featureliste, welche den Umfang der Entwicklung aufzeigte. Ausserdem definierten wir Usability Ziele, welche die Website erreichen sollte.

Breakdown
Breakdown
Breakdown
Breakdown

Erste Lösungen visualisieren

Diese Anforderungen verwandelten wir in mehreren Teilschritten in ein erstes Konzept. Wie gewohnt starteten wir mit Papierskizzen. Nach einigen Feedbackschlaufen erarbeiteten wir aus den Skizzen Wireframes. Diese fokussierten primär auf den Bestellprozess und machen diesen das erste Mal interaktiv testbar.

Look and Feel

Hinsichtlich Look and Feel konzentrieren wir uns darauf, die beste Mischung aus reduziertem, klarem Look und Emotionalität zu schaffen. Die Website unterscheidet hierfür zwischen einem Bestellmodus und einem Informationsmodus. Dabei ist eine aktive Bestellung immer im Blick. Thematisch ist das Design dem Ambiente der neuen negishi-Restaurants nachempfunden – natürlich, warm, aber auch urban.

drag

Entwicklung

Zunächst wurden aus dem Design die verschiedenen Elemente und Templates abgeleitet, welche unser Frontend Grundgerüst (Framework) bildeten. Da bei uns viele Entscheidungen hinsichtlich Verhalten und Design der Benutzeroberfläche während der Umsetzung des Frontends fallen, arbeiteten Designer und Frontend-Entwickler während dieser Phase oft Hand in Hand zusammen. Das Backendsystem basiert auf Contao und Isotope. Es wurden verschiedenste Zubauten gemacht, um dem Kunden die Pflege und Wartung so effizient wie möglich zu machen.

Eine grosse Herausforderung war dabei, die einzelnen Zubauten so umzusetzen, dass eine gute Wartbarkeit jederzeit gewährleistet bleibt. Da das System verschiedene Schnittstellen zu Systemen unterstützen muss, wurde ein spezielles Modul eingesetzt, welches einen individualisierten Datenaustausch über diverse Gateways ermöglicht und flexibel um weitere Schnittstellen erweiterbar ist.
An einem eigens für dieses Projekt organisierten Drehtag haben wir zusammen mit Guave Motion verschiedene Videoloops für die Website gedreht.

Beim Videodreh

Das Ergebnis

Das neue System und die neue Website entsprechen dem Stand moderner heutiger E-commerce Systeme mit responsive Design. Durch das konsistent gestaltete Frontend merkt der Benutzer nichts vom Zusammenspiel verschiedenster Systeme und kann effizient durch den Bestellprozess geführt werden. Offene Fragen, welche während des Bestellprozesses auftauchen, wie Öffnungszeiten der Filialen, Lieferkosten, Mindestbestellmengen, Zahlungsmöglichkeiten, etc. beantwortet das System möglichst dort, wo sie bei den meisten auftauchen automatisch.
Die Pflege neuer Artikel ist für den Kunden in einem Bruchteil der bisherigen Aufwands möglich. Durch die Verkettung mit den verschiedenen System ist die Datenübertragung bei Bestellungen und Reservierungen durch automatisierung zudem nicht mehr fehleranfällig.

development_protoype

Gefällt dir diese Casestory?