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.
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.
- Research and ideation concept
- Good application of the design process
- Final version of the product
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:
- Today/Tomorrow screen
- Add Protein screen
- Add Sauce screen
- Add Ingredients screen
- Wok Tracker
- Ready screen
- Already eaten screen
- How was it 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.
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.
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.
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.
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.
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
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 😉