Screen Shot 2014-08-05 at 5.12.41 PM

Taste Test! What Mobile Food Apps Should Be A/B Testing

Takeout. It’s been an integral part of American life since the invention of the Automat and its decidedly turn-of-century-ish slogan: Less work for Mother. Fast forward about 100 years, and takeout has been made as easy as a thumb tap on a mobile phone. It’s a brave new world, indeed! As we become busier (or maybe just lazier), the whole food ordering process has taken a mobile turn. It makes sense: Eating is often an on-demand thing. To snatch up the quickly emerging mobile food opportunity, all of your favorite food tech companies have been moving quickly to deliver seamless (wink wink) and delightful experiences no matter where you are. Here’s our look at how five of the most popular mobile food apps rank in three different areas: Onboarding, Discovery and Checkout. We highlight what they’ve done right, wrong and where they could be testing changes to turn our little devices into meatier sales and more flavorful experiences.

Seamless

Onboarding: 4/5

Seamless’ onboarding flow is uncluttered and streamlined enough to make it a breeze getting through, while providing just the right context for us to stay oriented as to where we are in the process. In particular, the 3-step breadcrumbs at the top of the dialog have been well adapted for the small screen, and the color scheme is warm and inviting.  

There was a bit of disorientation, however, when we were looking for the ‘Next’ button below the form fields and found it nestled in the top right corner. This felt inconsistent with the rest of the UI, and our guess is it was leftover from an older version of the app or ported over from the Android version. We’d love to have the good folks at Seamless test out this button location and measure it’s impact on tap-thru and abandonment rates at this step of the onboarding flow.

Seamless’ onboarding process is pretty solid - with nice breadcrumbs adapted little screens, and an inviting color scheme. There was a bit of disorientation, however, when we were looking for the ‘Next’ button below the form fields and eventually found it nestled in the top right corner.

Seamless’ onboarding process is pretty solid, but a big red button below the form fields may make it easier to move through the workflow.

Discovery: 3/5

Perhaps the most important part of any food ordering product is the ease of finding something delicious nearby. The Seamless app does a decent job of making this possible: The welcome screen requires users to enter their location and select either pickup or delivery. But this step could be eliminated altogether by just asking users to share their location information, similar to Foursquare’s ‘Browse Nearby’ option. The advantage with this approach is that repeat users accessing the app from different locations won’t need to re-enter their address; the disadvantage is that you may want to order food to a location which is distinct from where you are when you open the app. The latter can be reconciled through a Google Maps-like option to enter either ‘My Location’ or manually input another address. We suggest testing this feature out to make it even easier for users to get started and use the app more often.

Seamless Getting Started View

Just enter your address, zip code, delivery vs. pickup and your good to go! Couldn’t be any easier, right? Wrong.

Beyond this, Seamless does a fantastic job of providing the ability to save addresses for future use, and offers an extensive menu of visually non-intrusive filters and sorting options to narrow down for preferences in cuisine, ratings, price, distance, restaurants offering deals, restaurants which support the food tracker feature, and new restaurants!

Once you scope out an option nearby that appears to be to your liking, Seamless’ default restaurant menu view is a bit overwhelming. A full list of items can be a bit of a headache to navigate (think swiping up and down repeatedly as you’re thinking of dishes from ‘meat’ and ‘vegetables’ to pair together), and while there are hamburger buttons easily available at the top of each menu section which allows you to skip to another section, it may worth testing an abridged default view to give users a high-level view of what their options are.

Seamless Restaurant Menu View

Seamless may want to consider testing their abridged view (right) as the default.

Applying filters and sorting options.

 

 

 

 

 

 

Checkout: 5/5

Once you’ve looked through all of the possible food combinations, and chosen what you want to eat, adding dishes to your order is as simple as the tap of a finger. When you add dishes to your order, there is an open-ended field at the end for special requests. For picky eaters and people with food allergies, you can elect to hold the tomatoes, leave the dressing on the side, or get your hamburger bunless. A wide blue “Add to Bag” button is under the name of the dish, and easy to locate.

Before you can sit down and relax while waiting for your food to come to you, you have to checkout. If you’re back on the menu page, there is a red call to checkout as you scroll – click it, and you’ll be brought to an itemized receipt of your order. In the age of digital, paying for your food is done in-app so that there’s no flustered exchange of money or shortage of change. Tipping is also done in-app. Bonus: if you’re unsure how much to tip, Seamless automatically sets it to about 10% of your order total. If you want to leave a bigger tip, but are unsure of the math, you can choose how much to tip, and the itemized receipt will tell you what percentage your tip is of the order total.

The total price for your food is on receipt, and is also displayed prominently on the “Submit Order” button – a click away from a near-seamless ordering process.

Hooray for in-app tipping!

Hooray for in-app tipping!

image_5

For picky eaters – a seamless touchpoint for special requests!

Check out that beautiful call to check out!

Check out that beautiful call to check out!

Seamless’ Review Order view is great - with an itemized receipt and big red callout to submit your order with the total price displayed right there.

Seamless’ Review Order view is great – with an itemized receipt and big red callout to submit your order with the total price displayed right there.

 

Domino’s

Onboarding: 3/5

Domino’s onboarding flow is confusing – upon opening the app, you’re presented with a “Welcome to Domino’s” page and a question (that is somewhat difficult to see in the blue font), “Is this order for delivery or takeout?” While the question only gives you two options, there are actually four different calls to action on the page: buttons exist for Delivery, Carryout, Sign In, and Tracker. The easiest to buttons to spot are the bright red ones for “Delivery” and “Carryout.” Although these were the most prominent, we were confused by the placement of “Sign in” – should we sign in before ordering? Domino’s should test the prominence and placement of the four calls to action to make it clearer to the user what they should do. Can someone order a pizza without signing in? We thought that signing in was the most logical first step, so we clicked it, and was brought to the Pizza Profile page.

Per the copy, a Pizza Profile allows you to save your credit card and address for future orders. The page has bright, visible red “Sign In” and “New Profile” buttons.

Later on, we realized that you can order from the app without needing to sign in and create a Pizza Profile. If that’s more to your taste, you can opt to choose “Delivery” or “Carryout” without the need to sign in, although your address will not be saved. Domino’s should encourage users to sign in for the added convenience, and display the sign in button more prominently on the first page.

Delivery and Carryout option buttons easy to spot, although confusing - should I sign in first?

Delivery and Carryout option buttons easy to spot, although confusing – should I sign in first?

Pizza Profile has bright, visible sign in and new profile buttons.

Pizza Profile has bright, visible sign in and new profile buttons.

 

 

 

 

 

 

 

 

 

Discovery: 4/5

Once you’ve selected delivery or takeout, you are brought to your cart, which is empty. There are three buttons on the top of the page – “Menu”, “Coupons”, and a Cart icon. The copy on the cart page encourages you to select either “Menu” or “Coupons” to get started.

Domino’s in-app menu is categorized by food type with pictures, with a visible red “Build Your Own Pizza” option for the pizza artiste within us all. There is an odd amount of white space below the button though, and Domino’s may want to consider expanding the size of the food menu, going two across and three down instead of three across and two down.

Clicking “Coupons” will bring you to a list of coupons available for use – no more saving newspaper clippings and remembering promo codes. If you do have a promo code, however, there is a space to enter it on the top of the page. Unlike their menu, the coupon page is devoid of images. It may help to include a search function, so that hungry users can see if there are coupons available that match their preferences.

When ordering on the menu page, every food item has an image that goes along with it, should you feel the urge to drool on your phone. It is easy to customize your order by increasing the quantity, selecting dipping sauces, and choosing how much meat you want on your Italian Sausage pizza. The “Add to Order” button on the top right, however, is not as visible as we would have liked. Unlike the rest of the buttons in the app, the “Add to Order” button is not bright red, and instead blends into the background of the top bar. Domino’s should test different locations and styles of the button, and experiment with matching it to the rest of the call to action buttons, or moving it to the bottom of the page when customizing food orders.

Search address input could have been somehow integrated into Pizza Profile page

Search address input could have been somehow integrated into Pizza Profile page

Pretty simple, visual menu layout, just as if you actually were at Domino's

Pretty simple, visual menu layout, just as if you actually were at Domino’s

Easy to use add/remove options; however, add to order call to action not noticeable and could be tested for placement.

Easy to use add/remove options; however, add to order call to action not noticeable and could be tested for placement.

Who wouldn't want to add a little extra before checkout?

Who wouldn’t want to add a little extra before checkout?

 

 

 

 

 

 

 

 

 

Checkout: 4/5

Checkout is simple and uncluttered. The page displays the delivery or carryout address on the top, and order items below that. Swiping right on an item on the list will prompt you to delete it from the cart. The order total is displayed right above a prominent “Checkout” button.

 

Once you click it, an additional offer pops up, with a recommendation from their menu. “You may also enjoy…” the photo on the offer page, and the hungriest of us will struggle to resist adding cheesy parmesan bread bites to their order.
The checkout page seems to answer our signing in question from earlier – here, we are presented again with an option to sign in at the upper right so that we can save our address and credit card for future orders. Domino’s may want to push this sign in more on users, because of its added convenience, and may look to test different options for the button’s placement and color. As it is now, it is not the most visible or prominent thing on the page.

On the very top of the checkout page, there is the order total, followed by a checkout form. Domino’s does encourage users to save their name, address, and order details to a new Pizza Profile, so that users can skip the checkout form next time and simplify the process of checking out. This is great, but like the sign in button, should be tested for more prominence.

Unlike other food ordering apps, Domino’s app lets you select your payment option. You can choose to pay with either cash or your credit card. This is handy; depending on the delivery type you selected (delivery or carryout), you may want to pay differently. Note, however, that there is no in-app tipping option. At the very end of the checkout page, Domino’s encourages you to “reward your driver for awesomeness” and note that drivers carry less than $20 with them. Plan your change accordingly! There is also no special requests option. Sadly, this means that you can’t request a special drawing on your pizza box.

 

Pretty simple checkout form, although sign in option could be tested for visibility and placement.

Pretty simple checkout form, although sign in option could be tested for visibility and placement.

GrubHub

Onboarding: 4/5

Grubhub’s welcome page is fun and quirky (“Tap whatever you’re hungry for. And dream big. Remember: #YOLO). What other app regularly sprinkles in hashtags to encourage you to order? The “What’s GrubHub” walkthrough for a new user, shows features and options, and asks for your location on the last page. Once given, or auto-located, the homepage shows you a very happy hamburger, and warm, inviting copy: “Time to eat, friend.”

A sign-in option is not visible on the home page, however, and users must navigate to “Your GrubHub” first. GrubHub should think about testing this call to action, and place the sign in option somewhere more visible, such as their home page.

Walkthrough welcome screen

Walkthrough welcome screen

More info, with a bit of humor.. #YOLO

More info, with a bit of humor.. #YOLO

Delivery walkthrough.

Delivery walkthrough.

Use current location call to action - time to eat!

Use current location call to action – time to eat!

 

 

 

 

 

 

 

 

Discovery: 4/5

On the home page, there is an option to choose what type of food you want, but if you’re the kind of person who internally panics every time this question is asked – you can just click the “Find Restaurants” button. There, you’ll be shown an array of restaurants that are open now…yet sorted in no particular order. Or so it seemed. Clicking “Refine” on the top bar, however, lets you choose a bunch of options, including delivery or pickup, and lets you sort restaurants. We weren’t sure what the default “Standard Sort” is, but the other sorting options were clear. Among others, there were Top Rated, Newest, Delivery Minimum, Delivery Fee, and Distance. Although the “Refine” option is there, it was not as visible as we would have liked, and could be tested for visibility.

Choosing a restaurant brings you to some quick information about the restaurant, including their delivery minimum, delivery cost, and user rating. However, the more button on the right hand side is not as prominent – and should be, because that is where a user has to navigate to in order to read restaurant reviews. GrubHub should consider testing the button for increased visibility, and perhaps increase size of the button.

If you feel like it, you can also “heart” restaurants to mark your favorites, which are accessible later for future orders. If you haven’t signed in yet, GrubHub prompts you to sign in once you’ve clicked the “heart” icon.

Back on the restaurant’s menu page, “popular items” show up on top of the menu list. There is an option to include special instructions, and the “Add to Order” button is bright and extremely visible. The font is large, and the price of the food item is displayed prominently.

Search results filter automatically based on location and open now, with ratings and other restaurant information.

Search results filter automatically based on location and open now, with ratings and other restaurant information.

"Refine" button could be tested for better visibility; filter easy to use otherwise.

“Refine” button could be tested for better visibility; filter easy to use otherwise.

Restaurant page allows you to favorite restaurant, view ratings, and pick your order. However the "More" button is not that visible and contains key information.

Restaurant page allows you to favorite restaurant, view ratings, and pick your order. However the “More” button is not that visible and contains key information.

 

 

 

 

 

 

 

 

 

Checkout: 5/5

Once you’ve selected what you want to eat, adding an item to your order prompts you to choose if you want delivery, or if you want to pick it up (in case your order doesn’t meet the delivery minimum or you’re bound to walk by it). If you’ve forgotten the restaurant’s location, and are debating walking out to pick up your order, the third call to action on the page opens up a map to display the restaurant’s location.

Once you’ve chosen either delivery or pick up, the app prompts you to sign if, if you haven’t done so already, or to create an account.

Back to your order page, you can easily see an itemized receipt, where you can choose to enter free promo codes and view subtitles.

There is a bright, clear “Start Checkout” button, which brings you to a plethora of payment options. You can pay for your food with cash, your credit card, and even your Paypal. There is an option to enter a tip in-app, which updates your order total.

When you’re ready, click the “Place Your Order” call to action, which has the best call to action copy ever. “Deliciousness awaits” – and we couldn’t be more excited.

Add promo codes, view subtotals, and an awesome "Start Checkout" call to action!

Add promo codes, view subtotals, and an awesome “Start Checkout” call to action!

Different payment methods and "Deliciousness Awaits" - one of the best food call to actions we've seen.

Different payment methods and “Deliciousness Awaits” – one of the best food call to actions we’ve seen.

Chipotle

Onboarding: 3/5
Opening Chipotle’s app brings you to their start screen, which is focused on location for quick ordering. Here, you can choose to a location by manually entering the city and state, or by clicking “Nearby”. This brings you to a map of nearby locations, which is a great visual, and users can choose to toggle between map view and list view to find the nearest Chipotle location. Clicking one of the pins will bring you to a “Restaurant Details” page, which provides information like the address and hours. Here, you can also choose to get directions or call, or simply select the location and continue to order in-app.

Since the app starts with location queries, signup doesn’t take place until later, after a location has been chosen – Chipotle may want to test the call to action to signup. The “Sign Up” button’s location on the order page is not prominent enough. As with all the other call to actions, the red of the button seems to blend in with the red background of the app. Colors of the button should be tested so that they are easier to spot and more visible to the user; the white “Register” button on the signup page is a good example of a clear call to action.

Chipotle's start screen, intended to start with location.

Chipotle’s start screen, intended to start with location.

Map of locations - good visual!

Map of locations – good visual!

Signup page - good color and placement of Register button.

Signup page – good color and placement of Register button.

Discovery: 4/5

After you’ve chosen a location, you’re brought to the Order page, which is empty save for the address of a Chipotle you’ve selected. If you decide not to go with this location, there is a “Find” button on the bottom of the screen that is easy to access.

Clicking the “Food” button at the bottom of the screen brings you to a quick walkthrough of Chipotle’s different food options, with a short description. Each card that you swipe right has a photo of the food, a description, and three call to actions: Order Now, Nutritional Information, and Allergen Information. A big thumbs up for providing this in the app.

“Order Now” brings you to a menu, where you can choose which entree you want, and how you want to customize it – as if you were at the actual restaurant. This is simple and intuitive, and the white continue buttons on the lower right are clearly marked and visible. Once you’ve added all the toppings you want to your burrito, you can choose sides and drinks, and then add them all to your bag. Upon pressing “Add to Bag”, you’re prompted to name your meal (“Glorious steak and avocado burrito number 12”) and input any special instructions. The popup, however, has a design that does not match the rest of the app, and looks like it was left over from pre iOS7 days. Chipotle may want to test a different variation of this popup screen, that fits the newer, minimalistic style of the app.

Once you’ve named your order (and you must!), you are directed to the order page. The page does not show what you are ordering, and only displays the location you selected. To check your order, you have to click the Bag button on the upper right, which is numbered with the total amount of items in your order. This button is hard to spot; Chipotle should consider including the itemized order summary on the order page proper.

What would you like today? Just like the restaurants!

What would you like today? Just like the restaurants!

Add/Remove options - could test Bag and Continue buttons to optimize placement and color.

Add/Remove options – could test Bag and Continue buttons to optimize placement and color.

Checkout: 3/5

“Checkout Now” is a nice, bright white button that brings you back to the Bag page, where you can view your order summary and edit it if you’d like. On the bottom of the page is a white Continue button. Clicking it brings up another iOS6-styled popup, which prompts you to either “Register” or “Sign In”, which you must do before you can order.

Once you’ve signed in, you’re prompted to pay in-app or in-store. If you’re paying in-app, you can do so with either your credit card or a gift card. Returning users can check their saved payment options and choose their card there.

There is no open-ended field for special requests on this page. While the “Continue” and “Place Order” buttons at the bottom right are not difficult to find, these call to actions don’t stand out. Chipotle should test different colors and styles to use for the important call to action buttons on their app so that they don’t blend in with the background.

The final Order Summary page has a clearer call to action, with a white button that fits almost the width of the screen.

Overall red/white color makes call to action buttons less visible.

Overall red/white color makes call to action buttons less visible.

Payment - in-app or in-store.

Payment – in-app or in-store.

Order summary with decent "Place Order" call to action at bottom of screen.

Order summary with decent “Place Order” call to action at bottom of screen.

Eat24

Onboarding: 4/5
Eat24’s home screen is bright and to the point. You can either manually enter an address, or use the location search to find restaurants that are good near you. There are big, bright “Pick Up” and “Delivery” buttons just below the location input.

The Login button, however, is not visible on the home screen, and instead is located on the bottom menu. Eat24 should test different locations for the button on the home screen that might make it more visible to the user. Once you’ve located the button, logging in is simple with signup through Google, and there is even a guest checkout option.

Simple start screen with bright pick up and delivery buttons.

Simple start screen with bright pick up and delivery buttons.

Easy login with Google!

Easy login with Google!

 

Discovery: 4/5

Once you’ve given the app your location, it automatically displays a list of popular restaurants in “What’s Good” that are close to you. You can toggle between “Restaurants” and “What’s good” easily. There is also a filters option –  but users may not notice the filter icon at first glance, and the location of the filter can be tested for visibility, perhaps placing it on a different location (the right side of the screen).

If you’re on “Restaurants”, you can filter the recommendations by cuisine type. If you’re on “What’s good”, you can filter restaurants in various ways, including by distance, cuisine, and price. The “What’s good” list view also allows you to sort by Top Rated, Distance, Newest, and Delivery Minimum. There is no way to combine these list sorting options (eg., if you wanted to browse the Top Rated restaurants that are closest to you), and Eat24 should test different interfaces to see if allowing a combination of sorting options increases engagement.

If you’re on the Restaurants toggle, Eat24 shows you cards of food from different restaurants. Included on these cards are giant photos of the food, which all look delicious when displayed like this, the name of the food item, the restaurant it’s from, and the price. Selecting a card will bring you to an “Add to Cart” page, which shows you a picture of the food again, and a short description of the dish. If you’d like to jump on the bandwagon and order popular dishes, the app also tells you how many people have ordered this dish. Social sharing is also implemented, so if you’re ordering for a group, you can click the icon on the upper right, and text your friends about it.

When you’re ready to order, the Add to Cart page has clear additional options that you can adjust, and includes an input box for special instructions. You can also read other people’s notes and reviews about the food, if there are any.

 

What's Good? A huge, inviting picture of a falafel, that's what's good.

What’s Good? A huge, inviting picture of a falafel, that’s what’s good.

Different sorting options; however, can't combine sorting options into single search.

Different sorting options; however, can’t combine sorting options into single search.

 

 

 

 

 

 

 

 

Checkout: 5/5

Adding an item to your cart is simple, with a bright blue button on the bottom of the screen that takes up the width of the page.

Here, you can see what restaurant you’re ordering from, and you have the choice to choose either pickup or delivery. If you haven’t met the delivery minimum, the button on the bottom also will tell you how short you are from it. From the checkout page, you can also go back to the restaurant’s menu. The menu button, however, is not very visible. It’s red color blends in with the rest of the red bar, and Eat24 should test different variations of the button that will make it easier to find.

Clicking Checkout prompts you to login, if you haven’t done so already, and to enter address information. You can choose from a list of saved addresses, and also include special delivery instructions. Here you can schedule when you’d like the order to arrive, and add any condiments for your food.

Upon paying, there are different payment options that you can save to the account (Credit Card, Google Wallet, Paypal, Cash). There’s also a button to input promo codes that is clear and visible due to it’s size on the top banner. Here, you can tip-in app, made simple with the addition of pre-determined percentages of 10%, 15%, and 20%. When you’re ready to submit your order, click the green call to action button at the bottom. And you’re done!

 

image_7

Beautiful flat design with an easily accessible “Add to Cart” action!

Chat support - great feature with great call to action.

Chat support – great feature with great call to action.

image_8

Pickup or Delivery options can be tested for best placement.

Love the consistent call to action at the bottom.

Love the consistent call to action at the bottom.

Ready to order? Bam, green call to action.

Ready to submit? Bam, green call to action.

Summary

Looking at these five food delivery apps, we have a lot of takeaways (pun intended) from an app developer’s standpoint. Different interfaces and button styles affect the user experience from onboarding to discovery to final checkout. Sure, the number ratings of each app is subjective; however, by testing the features we highlighted, we can gain better insight on user behavior and use data to better design our apps.