Janarayson

Tap to Order: queue, order and pay with an NFC tap

Engineering6 min read

For a startup in Singapore we built Tap to Order, an Android app where you tap your phone on an NFC tag to join the queue, tap the menu to order, and pay at the end. It's set up with Ramen Champion, and it's built in PhoneGap.

For the last two months we’ve been building Tap to Order for a startup in Singapore. You tap your phone on an NFC tag at the counter to get a queue number, then tap it on the pictures in the menu to order. It’s an Android app, and we built it in PhoneGap.

NFC payments only went live in Singapore in August, so the timing is good … StarHub launched the first NFC wallet, and SingTel and M1 followed within the month, so with an NFC SIM you can now pay with your phone at EZ-Link and MasterCard PayPass readers. The brief came to us at the end of that month.

An Android phone showing the Tap to Order splash screen, an orange screen with a phone and NFC rings logo and the words Tap to OrderAn Android phone showing the Tap to Order home screen, a list of Ramen Champion, Food Republic and Din Tai Fung with photos, and tabs for Home, Self Service, My Order, Pay Bill and FeedbackAn Android phone showing the Ramen Champion header and an NFC icon with the line To make an order, tap your phone on the menu items
Tap to Order, September 2012.

How it works

Say there’s a long queue outside the restaurant. You tap the tag at the counter and get your queue number, the number they’re serving now and how long you’ll wait, and the app tells you when it’s your turn. If it’s your first time, the tag sends you to Google Play to get the app.

To order, you tap your phone on the picture of a dish on the NFC menu. The dish comes up with its price, you pick how many, and the next dish you tap goes into the same order. Each tag carries the merchant’s ID and the item’s number. When you confirm, the order goes to the kitchen. The app shows what’s still being prepared, and when a dish arrives you tap it to mark it served. At the end you call for the bill or pay with a mobile wallet, and there’s a page to follow the place on Twitter or like it on Facebook.

It works for food courts too. Tap the menu at a different stall and that stall is added to your order, so one order can cover a few stalls, and the bill is split by stall.

A grey wireframe of the home screen: a list of places, Rakuzen, Starbucks, Subway, Food Republic and Asia Cafe, with tabs for Home, Kitchen, My Order, Pay Bill and Feedback above an advertising spaceA wireframe of the tap screen: a restaurant image header, an NFC phone icon and the line To make an order, tap your phone on the menu itemsA wireframe of My Orders: two Soft Shell Crab, one Salmon Sushi and one Green Tea (Hot), each with an X, a total of $28.00 and a Confirm Order buttonA wireframe of the kitchen status for Food Republic: Soft Shell Crab, a row ticked Item served, and Green Tea (Hot), each with an image placeholder
Wireframes, 5 September.
The wireframes joined into one screen flow on a dark background with red arrows: the list of places, the restaurant screen, the NFC tap screen, a food item, the order list, the queue, the kitchen status, the feedback screen and a pay bill section
The screen flow.

Ramen Champion

The app is set up with Ramen Champion, and it’s a good fit. Komars brought Ramen Champion to Bugis last year … ramen shops from different parts of Japan under one roof, competing for your vote, so it’s a food court of ramen. Right now you order at the stall and they give you a buzzer that vibrates when your ramen is ready.

The Ramen Champion screen: ramen chefs from Hakata, Tokyo, Chiba, Toyama and Sapporo with their bowls, and Back, Queue and Order buttonsThe queue screen: current queue number 0430, your queue number 0448 in green, and an estimated waiting time of 00:35, with Back, Refresh and Call buttonsA dish after tapping the menu: King Cha Shu Ramen at $25.00 with a photo of the bowl, minus and plus buttons around the number 2, and Cancel and Confirm buttonsMy Orders: two Soft Shell Crab, one Salmon Sushi and one Green Tea (Hot), each with a red X to remove it, a total of $28.00 and a Confirm Order button
Queue, tap and order.
The kitchen status list: one Cha Shu Ramen, two Gyoza ticked off and struck through as served, and one Hokkaido Style Miso RamenThe bill: Soft Shell Crab, Salmon Sushi and Green Tea (Hot) totalling $28.00, with Bill and M-Wallet buttonsThe feedback screen, Share your experience, with buttons to follow on Twitter, like on Facebook and email
Kitchen status, the bill and feedback.

PhoneGap

We proposed PhoneGap because it costs less and it’s faster to build. The screens are plain HTML and CSS, with a stylesheet for each screen density. It runs on Android 2.3.3 and up, the version where NFC support got better, on phones like the Galaxy S3 and the Xperia S. They’ve asked whether the same app could run on Windows Phone with NFC too … Windows Phone 8, which has NFC, only came out last week.

The kitchen side is theirs, a web page with the list of orders, and the idea is that when the kitchen marks an order complete, the app updates. There’s room for an ad banner at the bottom of every screen, and the whole thing is meant to be a template they can set up for different restaurants. Last week we put in Ramen Champion’s real menu, with a photo of each ramen.