IA and UI design on iOS app

Order Tracking System

Rethink the whole process of order tracking system to decrease the willingness to cancel the order during long waiting time in rush hour.

  • Category / AI, UI, IxD
  • Published / 2015.4
  • Creater / Julio Huang
  • Site / spoonrocket.com
  • Client / SpoonRocket
Overview: SpoonRocket is a food delivery company servicing in SF. People can order meals via the app or website to get the them in fast speed. The current problem we encountered was that some of users cancel the order while in rush hour because they have to wait for more than 20 mins, and during this time, the order tracking screen doesn't show anything until a driver takes the order.

Current problem

In rush hour customers may experience more than 30 minutes waiting time after they confirm order. Approximately half of customers will cancel the order if they have to wait that long time, which effects our reputation and sales a lot.


Delivered (Blue) + Cancelled (Red)

Cancelled Only (Red)


Main Purpose

Rethink the whole process from confirm order to receive meal and make it more interactive and joyful instead of a plain screen in order to make customers keep their eyes on, interact with, and feel less bored during long waiting time.


How does it work in back-end after users confirm order?

After users place order...

Back-end perspective Estimated time
Stage1 Submit the order to server.
Confirm the order.
5 -10 s
Stage2 Confirm the credit card.
Start order initialisation.
0 - 2 mins
Stage3 All drivers are still delivering other orders.
The order is not taken by a driver yet.
0 - 30 mins
This is the main factor that makes customers want to cancel orders.
Stage4 A driver takes the order. 3 - 10 mins


Previous order tracking screens

Strictly speaking, our current app just have three different screens for 4 stages' process in order tracking.
Stage1 is in first screen (just a default iOS loading spin)
Stage2 and Stage3 are combined in 2nd screen.
Stage4 is in the last screen.



Which part can be improved better?

  1. Default loading spinner -> its own loading screen

    The current loading spinner is ok, but if we have enough time and resources, it's acceptable to create our own loading screen stead of the default one (ex: a rocket launching animation) Because if there's a catchy and animated loading animation that also match the branding, it will impress the users and accelerate their intolerance for waiting the meals.

  2. Interactive animation during rush hour (in Stage3)

    For some cases that there will be no driver available and the pin won't show in the map in rush hour although the server already assigns an order to a driver, it's not necessary to place a map with only your location pin itself in the screen. So maybe we can create a series of motion graphics instead, which is more vigorous and active. Add some little microinteractive elements on it would be much better.

  3. Visualize the waiting time and delivery process

    Since I separate the order tracking to 4 stages, I can also visualize the delivery process (ex: a timeline with 3-4 goal pins on it, and a car icon is run running on the timeline...) It makes the original design more attractive and interactive, and it also make users feel that the process is running (not just a map with a pin like the previous one)

  4. Add drivers profile and driver rating system (Stage 4 and after)

    Humans are visual-conscious, so seeing a driver's profile pic and name will make users feel the driver is caring their meals and feel the connection between them. Adding driver rating system after users receive meals also increase the interaction between users and drivers.


How to improve user experience?

-> Add transition and animation
-> Visualize text information
-> Add interactive element (ex: give feedback when user tap on an item)


Rethink order tracking flow

After discussing with back-end developers, we clarified that it needs 4 stages to complete the delivery process, but customers don't know that, and they don't need to know, either. One of better ways to "present" to users is to pretend their meals are made on the spot, freshly, just like customers ordering meals in restaurant.

That's how the process looks like in back-end and customers:


Order Tracking Flow Chart

Back-end perspective customer perspective Estimated time
Stage1 Submit the order to server. Confirm the order. Confirm the order. 5 -10 s
Stage2 Confirm the credit card. Assign order to a driver. The chef is arranging my meal list. 0 - 2 mins
Stage3 All drivers are still delivering other orders. The order is not taken by a driver yet. SpoonRocket is preparing my meal. Maybe there are some other orders they are still preparing. 0 - 30 mins
Stage4 A driver takes the order. My meal is ready. The meal will arrive soon. 3 - 10 mins

The main purpose is to let users feel that their meal is made on the spot.

Mockup

1. Rocket is about to lauch!

Stage 1 mockup - when user submit the order

After users tap "confirm order" in checkout screen, the order will be submited to the back-end system to check if the users' credit card is valid and the food supplies are adequate.

Deliver the corporate's main thought

Instead of inheriting mobile system's default loading spin, using the rocketing lauching animation as submitting transition perfectly coinsides with the SpoonRocket's core positioning - good, food, fast.

Click me!

2. Arranging your order list

Stage 2 mockup - checking the credit card

When the order is confirmed, the progress will go forward to stage 2 - system has to confirm the credit card and assign the order to a driver, and it usually take only less than 1 mins at this stage. I set this stage as "chef is arranging the order list" to users.

Interesting interation

The crucial touch in this project is that I create some interation between users and the app during waiting time. Like this stage, the chef's mustache in the center is slightly tilting. If the user taps the chef, he will jump and show show his barehead. It is a great experience to make the users less intolerant so that they will be unlikely to cancel the order - Goal fulfilled!

Progress bar

Instead of placing text, showing animated progress bar with three goals offer the non-changed screen more vigorous elements.

3. We are preparing your meal

Stage 3 mockup - waiting for a driver to take the order

Once the credit card is confirmed, this order will be officially established, then the order is going to the waiting list until a driver take it. This stage is set as we perparing the customer's meal.

You're in the food preparing process!

Given that sometimes it takes long for a driver to take the order when in rush hour, I designed more interactive illustrations at this stage. The user can also tap the illustrations to get their feedback as if they are preparing the food themselves!

The motion graphic of every icon lasts 30s then changes to the next one. If all of them are played, starts from the first one and repeat still this stage is over.

Click me!

Meal is about to arrive

As soon as a driver takes the order, the translucent red cover will fade out then to show the map with the driver's current location and the user's location.

By adding stage2 and stage3 interative screens before this stage, the user who confirm the order will no longer experience a map without location pins or any other information when there's no driver taking the order yet. Now, we won't show the map until a driver takes the order.

Julio Huang

  • As a Taipei born designer and illustrator specializing on branding, UX and UI, I aim to communicate strong ideas with well-visualized images and better user experiences while maintaining style consistency and intuitiveness between people and design.

Follow Me

  • Name:Huang, Han-Ching
  • E-mail:julio53640@gmail.com
  • Place:Taipei, Taiwan