TAKING TOO LONG?
CLICK/TAP HERE TO CLOSE LOADING SCREEN.
Do you drink coffee?
Ivan Vasilev

Wok Bar App

What is Wok Bar?

The Wok Bar 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.

The problem

Long waiting times and big queues.

The solution

Creation of mobile application so the users can pre-order their lunch from home or the office

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.

Graphics

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: User Experience (UX), User interface (UI)

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