MenuDrive - An online ordering app for restaurants
“
Choose how to get the food, build the order, check out.
MenuDrive
Ordering web app and iPad screens, 2014 to 2015
About the project
MenuDrive is a US company, founded in 2009, that gives restaurants their own online ordering system with loyalty and marketing tools. In 2014 we mapped and wireframed the ordering app its restaurants offer to diners, then designed it for desktop, tablet and phone, with iPad and iPhone screens. Diners choose delivery, pick up, dine in or curbside, build an order and pay.
Project
MenuDrive Online Ordering
Industry
Restaurant Tech
Location
United States
Date
2014 to 2015
“
Client Request
MenuDrive wanted ordering to feel like a good online store, with a page for every item, a clear cart and quick sign up at checkout, and a look of its own.
MenuDrive
Client UX notes, 2014
Design Pillars
Core UX Principles
Delivery, pick up, dine in or curbside is the first choice, and the next steps follow from it.
On larger screens the order sits beside the menu, with the total, the order type and a coupon field.
Sizes and piece counts are large tiles, and sauces and toppings are short lists that are easy to tap.
Client Notes
Ideas We Built Into the Flow
A Page for Each Item
MenuDrive asked for item options on their own page instead of a pop up, so an item can be shared by its link.
Sign Up at Checkout
A first time diner can create an account at checkout by adding a password to the details already entered.
Map or List
The store search switches between a list and a map, so phone users can hide the map.
The Challenge
Problem Statement
The Main Goal: One Ordering App for Many Restaurants
MenuDrive sells one ordering system to many kinds of restaurants. The design had to hold several menus a day, four order types and long lists of options per item, and work on a desktop, a tablet and a phone.
“
Accelerating Restaurants.
MenuDrive Tagline
MenuDrive, 2015
Our Approach
Solution
One Ordering Flow for Every Screen
A functionality map and wireframes, then the final design of the ordering app for desktop, tablet and phone, with iPad and iPhone screens. It is an example of our SaaS Product & Platform Design work.
01 - Map and Wireframes
In August 2014 we mapped every screen and its functions, with wireframes for the landing page and the menu.
02 - Five Design Rounds
Between 18 December 2014 and 18 January 2015 the desktop design went through five dated rounds.
03 - Tablet, Phone and iPad
The final pages were laid out again for tablet and phone, and as iPad and iPhone screens.
Before & After
The Blueprint & Evolution
First Round to Final Menu
The menu page changed most between the first and the last round.
Before: December 2014, with small S, M and L buttons on every item.
After: January 2015, where the chosen item opens into large Small, Medium and Large buttons.
Design
Key Features
Group Orders
Diners can start a group order, name it, such as Lunch Party or Business Meeting, and invite people to add to it.
Points and Offers
Every order earns points, and the account shows points available, earned and used next to coupons that cost points.
Design System
Visual Identity
Typography
Helvetica Neue in light and bold, mixed inside headings such as Start your order.
Color Palette
Coral, blue, teal and green for the four order types, green for every add and checkout button, and dark slate for bars.
Customer Account
Orders, favorites, points and group orders sit in tabs, with settings for the password, profile, addresses and saved cards.
Impact
A Complete Ordering Design
Results for MenuDrive
In January 2015 we delivered the final desktop, tablet and phone designs, with layered source files for every screen.
MenuDrive
Result
By the Numbers
177 Screens
Final desktop, tablet, phone, iPad and iPhone designs.
4 Order Types
Delivery, pick up, dine in and curbside.
5 Design Rounds
Desktop rounds dated December 2014 to January 2015.
Design Rounds
Specs First, Then Pixels
From Wireframes to a First Draft
We started with a functionality map and wireframes, each page marked as new, in progress or approved. MenuDrive added notes from its own research, like a separate cart page and sign up at checkout, and the first visual round followed in December 2014. You can see some of the results below.
Final Showcase
The MenuDrive Ordering App
