IA and UI design on iOS app
Rethink the whole process of order tracking system to decrease the willingness to cancel the order during long waiting time in rush hour.
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.
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)
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.
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|
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.
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.
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.
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)
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.
-> Add transition and animation
-> Visualize text information
-> Add interactive element (ex: give feedback when user tap on an item)
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:
|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|
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.
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.
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.
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!
Instead of placing text, showing animated progress bar with three goals offer the non-changed screen more vigorous elements.
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.
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.
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.