DISH Order

Redesign des Bestellvorgangs

<b>Zehn</b> Research-Interviews

mit Restaurantbesitzern um die Probleme mit den existieren Lösungen besser zu verstehen.

<b>Regelmäßige</b> Nutzertests

alle zwei Wochen, um den Industriestandard zu übertreffen.

<b>Flexibles</b> modulbasiertes Layout

erlaubt einfache Anpassung basierend auf das Individuelle Restaurant

DISH Order by Metro AG

Visit website

BRANCHE

Food Delivery Tech

Zeitraum

2021

TEAM

Project Consultant
UX / UI Designers
Illustrator

Produkt-Design Web Mobile

Über das Projekt

DISH Order ist ein Online-Bestellsystem, das in jede Website integriert werden kann. Es macht kleine Restaurantbesitzer unabhängig von den großen Lieferplattformen und deren hohen Provisionen. Das Admin-Portal bietet eine einfache Verwaltung für Restaurants mit flexiblen Anpassungsmöglichkeiten.

Unsere Aufgabe war es, ein intuitives, Bestell-System für Endbenutzer zu entwickeln, dass auf Mobil- und Desktop-Geräten funktioniert. Dazu gehörten die Erstellung einer umfassenden UX-Map, das Design der gesamten User Experience und die begleitende Entwicklung eines Designsystems.

<section class="padding-largest no-padding-bottom module-portolio-detail-headline"> <div class="wrapper"> <h2 class="l-text center"> <span class="color">Essen bestellen wurde gerade noch einfacher –</span> <br class="not-on-s">Bestell-System für Lieferung und Abholung </h2> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container reverse-order"> <div class="flex-item-left img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/02._tile-image-1-3/dishorder-whats-on-the-menu--1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/02._tile-image-1-3/dishorder-whats-on-the-menu--1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/02._tile-image-1-3/dishorder-whats-on-the-menu--2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/02._tile-image-1-3/dishorder-whats-on-the-menu--1x.jpg"> </picture> </div> <div class="flex-item-right"> <div class="vertical-middler"> <h3>Was steht auf der Karte?<br> Schnell orientieren können</h3> <p>Ansprechend und schnell zu verstehen vs. anpassbar und mit vielen Informationen. Um eine Brücke zischen den Wünschen der Konsumenten und den Anforderungen der Restaurantbesitzer zu schlagen, haben wir eine flexible Struktur aus Menü-Elementen geschaffen, die Informations-Ebene und Status des Elements durch verschiedene gewichtete Informations-Hierarchien balanciert darstellen können. Und mit oder ohne Bild funktionieren.</p> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container"> <div class="flex-item-left"> <div class="vertical-middler"> <h3>Kein Gericht ist identisch –<br> individuelle Darstellungsmöglichkeiten</h3> <p>Kein Restaurant funktioniert wie das andere war einer der wichtigsten Erkenntnisse aus unseren Experten-Interviews. Gerade die Detailseiten der angebotenen Gerichte benötigen eine große Flexibilität, um jeden Fall abdecken zu können. Wir haben eine einfach verständliche Logik entwickelt, wie sich die benötigten Elemente miteinander kombinieren lassen können.</p> </div> </div> <div class="flex-item-right img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/02._tile-image-1-3/dishorder-order-custom--1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/02._tile-image-1-3/dishorder-order-custom--1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/02._tile-image-1-3/dishorder-order-custom--2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/02._tile-image-1-3/dishorder-order-custom--1x.jpg"> </picture> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container reverse-order"> <div class="flex-item-left img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/02._tile-image-1-3/dishorder--dinner-is-ready--1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/02._tile-image-1-3/dishorder--dinner-is-ready--1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/02._tile-image-1-3/dishorder--dinner-is-ready--2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/02._tile-image-1-3/dishorder--dinner-is-ready--1x.jpg"> </picture> </div> <div class="flex-item-right"> <div class="vertical-middler"> <h3>Essen ist fertig –<br> Design des vollständigen Nutzererlebnisses</h3> <p>Die Erwartungen an ein tadelloses Nutzererlebnis mit einer Bestell-App sind hoch - dank der ständigen Verbesserungen der großen Marktteilnehmer. Unser Ziel war, die Funktionen der Mitbewerber noch besser abzubilden, während wir gleichzeitig ein paar flexible Besonderheiten hinzufügen: Liefer- oder Abholfunktion mit prozessbasierten Updates, smarte Aufforderungen zum Trinkgeld geben oder zum Anlegen eines Kontos, um Treuepunkte zu sammeln, Magic-Link-Checkin und Wartungsmodus.</p> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="headline-large-image"> <div class="item-wrapper"> <div class="item"> <div class="image img-mobile"> <picture> <source media="(max-width: 767px)" srcset="" /> <source srcset="https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/03._full-width-no-margin-image-3/DIshorder-full-width-mood--1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/03._full-width-no-margin-image-3/DIshorder-full-width-mood--2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/03._full-width-no-margin-image-3/DIshorder-full-width-mood--1x.jpg}"> </picture> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container reverse-order"> <div class="flex-item-left img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/04._tile-images-4/dishorder---pickup-payment-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/04._tile-images-4/dishorder---pickup-payment-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/04._tile-images-4/dishorder---pickup-payment-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/04._tile-images-4/dishorder---pickup-payment-1x.jpg"> </picture> </div> <div class="flex-item-right"> <div class="vertical-middler"> <h3>Darf es noch was sein?<br> Abholung, Lieferung und Bezahlung</h3> <p>Gastronomen brauchen volle Flexibilität, wenn es um Abholung und Lieferung geht. Manche wechseln die angebotenen Optionen je nach Mittag- oder Abendessen - manche haben eigene Lieferflotten, während andere nur Bargeld an der Tür akzeptieren (aber Trinkgeld zu bekommen ist für alle toll). Wir haben einen modulbasierten, geführten Checkout-Prozess entwickelt, um den Nutzer so reibungslos wie möglich zu seinem Ziel zu führen: der Bestellung.</p> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list no-padding-sides no-padding-bottom"> <div class="headline-large-image"> <div class="item-wrapper"> <div class="item"> <div class="image img-mobile"> <picture> <source media="(max-width: 767px)" srcset="" /> <source srcset="https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/05._full-width-no-margin-image-1/Dishorder-all-mobile-grid-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/05._full-width-no-margin-image-1/Dishorder-all-mobile-grid-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/dishorder-ux-ui-design/05._full-width-no-margin-image-1/Dishorder-all-mobile-grid-1x.jpg}"> </picture> </div> </div> </div> </div> </section> <section id="cta-your-project" class="section padding-largest modular-call-contact "> <div class="wrapper"> <div class="flex-container"> <div class="flex-item-left"> <picture> <source media="(max-width: 767px)" srcset="/user/themes/boanastories/img/sales/s-profile-j2-mobile.jpg" /> <source srcset="/user/themes/boanastories/img/sales/s-profile-j2-1x.jpg 1x, /user/themes/boanastories/img/sales/s-profile-j2-2x.jpg 2x" /> <img src="/user/themes/boanastories/img/sales/s-profile-j2-1x.jpg" alt="Johannes Holl" /> </picture> <a href="https://boanastudio.com/de/team/johannes-holl" class="xs-text text-grey-60 image-caption"><b class="bold text-grey-40">Johannes Holl</b> <span class="not-on-s">• </span>Geschäftsführer</a> </div> <div class="flex-item-right"> <div class="text"> <div class="headline l-text"> <span class="color">Sprechen wir über</span><br>Ihr Projekt. </div> <div class="teaser n-text text-grey-60"> Teilen Sie Ihre Ideen mit uns, wir helfen gerne! </div> <div class="actions"> <a href="https://boanastudio.com/de/contact" class="button primary">Kostenlose Beratung</a> </div> </div> </div> </div> </div> </section>