Ivan Vasilev

Wok Bar App

What is Wok Bar?

At the university we have an in-house canteen, Tim’s Diner, which serves a range of delicious meals. An option we have is the Wok Bar. It is a place where you can choose your ingredients, sauce, protein, and it’s cooked up in front of you. One day it could be curry, another stir fry, another pasta.

This has proven to be a very popular option, with queues building up and waits that feel like a lifetime. 

The problem

To help with wait times and diffuse the lunchtime rush, Tim’s Diner have asked for a mobile application so that the employees can pre-order their lunch. They are flexible in regards to suggested features, however the application must allow employees to:

  • Know what type of Cuisine it is today (Curry, Stir-fry, Pasta…)
  • Allow employees to choose their ingredients, sauce, protein…
  • Inform employee when they can pick their meal up

User can pay for their meal directly in the canteen with their credit card.

The deliverables

  • Research and ideation concept
  • Good application of the design process
  • Final version of the product

The research

First I started with the competitors

In the search of similar apps I stumbled on three canteens in Germany (so called “Mensa”)

I also checked some bulgarian version of popular food delivery apps:

User Flow diagram

Then based on the description in the task I try to build initial flow

After several tries I decided on 8 major screens:

  1. Today/Tomorrow screen
  2. Add Protein screen
  3. Add Sauce screen
  4. Add Ingredients screen
  5. Wok Tracker
  6. Ready screen
  7. Already eaten screen
  8. How was it screen

1.Today/Tomorrow screen

As you can see on the Flow diagram I directly start with “What’s on the menu today/ when to order” – screen

For simplicity reasons the usual Login/Sign Up screen is not used here. The user is presented with info – what is on the menu today. Recommending the user the best time to order so that she will wait the least solves the problem only with UX power. Directly CTA point to the “AHA – moment” of the app – “Save time ordering online”!

Posible pain points:

The user should be geo located (asked to allow GEO location while using the), so the system can prevent ordering from places within radius around the Wok Bar.

2-3-4. Add … screens

In the process I decided to combine the 3 Add screens into one overlay

This approach makes much more sense because the actions are very similar and there is no need of putting them on different screens. The additional prices are located next to each item to add with “+”/“-” sign.

Posible drawbacks:

The user may not notice that the price (located in the button) has changed while adding more ingredients.

5. Wok Tracker screen

Here I was inspired by “Dominos™” Pizza Tracker

The pizza tracker is good, but I wanted more movement and some extra value for the user while waiting: nutrition facts about the meal, interesting quiz, or some simple wok game – why not?

Emphasizing again on the AHA – moment of the app, I considered showing how much time the user has saved ordering online instead of waiting on the line.

Posible drawbacks:

There should be additional app (most likely made for tablets), so the cook can handle the orders. In order to function properly the Wok tracker will need a helper of the cook. This will be extremely useful.

6. Ready screen

Informs the user that her order is ready

Additionally to the reminder function this screen should tell the user the exact number of her order, so she can easily pick it up.

Posible drawbacks:

This screen should support timer and if the user doesn’t pick her order the next day she should pay for it somehow.

7. Already eaten screen

This screen has two purposes

First if the user does not finished with the meal – to say “Bon appetite” And second to remind her to review the food.

Posible drawbacks:

If the user didn’t pick up the meal – to remind her to pay for it.

8. How was it screen

This is the review screen

If the user opens the app after an hour or more this screen will remind her to review the food and if she want to make an order for tomorrow.

The colors

The colors of the Wok App

Psychology of colors, especially of food colors is something really interesting. There is a lot of RED, ORANGE and Yellow. Because in the Chinese kitchen there is a lot of fresh greenery I added this blue green mix.

Fonts and UX writing

Popular and eye-catching

Helvetica Neue Condenced is my font of choice. There are a lot of different font sizes. I used also underlining in order to emphasise on the particular word. Font weight – bold / black. Character spacing: – 40.

Some CTA’s need correction

Call to action buttons are very important part of the app. So I picked the blueish accent color.


Because I am not an illustrator I used free graphics from freepik.com.

The final result

First screen and the overlay

First (Home Screen) and Selection of ingredients screen

Wok Tracker 😉

First the order is sent, then the cook has to tap “I am starting order #674” and the timer starts.

“Already eaten” screen

If the user opens the app after she picked the meal she receives some “Bon appetit” message.

“How was it” screen

If the user opens the app 1 hour or more after she ate, she get the questionnaire and a … good flavour 😉

Final video

Thank you

Category: App Design, User Experience (UX), User interface (UI)

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Food delivery app | Ivan Vasilev (reply): […] first attempt to analyse the digital food delivery scene was the WokBar App. There I looked at only the one aspect of the business: the order online and pick up by yourself […]