DISH Order

Redesigning the order experience

<b>Ten</b> research interviews

with restaurant owners to understand their struggles with existing solutions.

Regular <b>bi-weekly</b>

user testings with end customers to exceed industry standards.

<b>Flexible</b> module based layouts

for easy customization based on restaurateurs individual setups

DISH Order by Metro AG

Visit website

INDUSTRY

Food Delivery Tech

Timeframe

2021

TEAM

Project Consultant
UX / UI Designers
Illustrator

About the project

DISH Order is an online ordering system that can be integrated with any website. It provides small restaurant owners with independence from food delivery platforms and their large commissions. The restaurant's management portal offers easy administration and customization.

Our task was to design an intuitive, error-proof meal ordering system for end-users on mobile and desktop. This included creating a comprehensive UX map, designing the full user experience, and developing an accompanying design system.

<section class="padding-largest no-padding-bottom module-portolio-detail-headline"> <div class="wrapper"> <h2 class="l-text center"> <span class="color">Meal ordering just got easier –</span> <br class="not-on-s">Ordering system for take away & delivery </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>What’s on the menu?<br> Orientation with ease</h3> <p>Appealing and quick to scan vs. customizable and heavy on informations - to bridge the gap between end customers and restaurant owners requests for the menu we came up with a flexible item structure which can depict informations and item status on different hierarchy levels - with and without photos.</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>No dish is the same –<br> order customization</h3> <p>No restaurant is the same was one of the major learning from our expert interviews. Especially the menu detail pages needed a wide range of flexibility to consider each possible case. We developed an easy to understand logic for extras, sizes and combination items.</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>Dinner is ready –<br> designing the full journey</h3> <p>Customer expectations are high for a flawless experience with an ordering app - thanks to the continuous improvement of major market players. We had to meet competitors' features and surpass them in desirability while adding a few flexible specials: Delivery or pickup process with timed steps, nudging user to tip or creating an account to earn loyalty points, magic-link checkin and maintenance mode.</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>Anything else?<br> Pickup, delivery and payment</h3> <p>Restaurateurs need full flexibility when it comes to pickup and delivery. Some switch the offered options based on lunch or dinner service - some have own delivery fleets while others just accept cash at the door (but getting tips is great for everyone). We created a module based, guided checkout process to lead the user as frictionless as possible to their targeted objective: the placed order.</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/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>Managing Director</a> </div> <div class="flex-item-right"> <div class="text"> <div class="headline l-text"> <span class="color">Let’s talk about</span><br>your project. </div> <div class="teaser n-text text-grey-60"> We can help reduce complexity and identify quick wins upfront. </div> <div class="actions"> <a href="https://boanastudio.com/contact" class="button primary">Get free consultation</a> </div> </div> </div> </div> </div> </section>