Case study: Redesigning Rebel Foods’s delivery app for drivers

In this case study I am going to share insights on the design decisions I made while redesigning the driver’s app — TRAX.

Vidushi Sehgal
Bootcamp
11 min readMar 27, 2022

--

Overview of the app

About Project

I worked on this project during my tenure in Rebel Foods (Formely Faasos). TRAX was my first project in Rebel among the various others. I was solely responsible for this project and worked on it from start to finish with constant collaboration with my other team mates.

What is Rebel Foods?

Rebel foods formerly known as Faasos is the largest cloud kitchen restaurant chain in India which operates brands like: Faasos, Behrouz Biryani and Oven Story, etc.

You can check more about them here : https://www.rebelfoods.com

What is TRAX?

TRAX is an internal app used by their motorbike drivers for receiving and delivering orders to the customers. This app also serves as a medium between the company and the drivers in order to communicate any new intiatives taken for them.

Why this redesign?

This project started with a single thought from the business team which was : “ TRAX has been in use for various years and with the increasing requirements it seems outdated and hence needs a revamp.”

It was difficult to move ahead with this statement alone. So my team and I started our research.

Team

My team included:

  1. Product Managers: There was one product manager looking after this project and multiple others across different verticals that we made our way to during the solutioning process.
  2. Developer: 3 developers were assigned to this project, 1 android developer and two backend folks. During this project, I discussed the feasibility of various features with them.

Research Phase

Stakeholders of the app

Given TRAX has been in use for four years, we were aware of the major stakeholders involved in this product.

  1. Drivers: The main users of the application, for whom this app is their bread and butter.
  2. Business team: TRAX being an internal app, is also used for business communication and intiatives taken for their benefit. The business team is also responsible for bringing in more orders.
  3. Kitchen Managers: Since the app was built a long time ago, many features have been added since and not all could have been technically implemented due to which many things are taken care of, by them manually in the kitchen.

User Interviews & On-field research

Luckily before covid hit we got to visit our kitchens and interview the drivers and the kitchen managers present there. I had divided the entire app’s journey into two separate process — Order pickup and Delivery flow. I went with a list of questions to ask from them respectively.

The questions list for the drivers included:

  1. Do you feel the app’s pickup process is easy to use and do you see everything you need on the assigned order card?
  2. What are the most relevant features in the app that you use?
  3. Are you able to find the options to these actions easily?
  4. Do you face any problems after picking up the order till going to deliver it?
  5. How smooth do you feel the order delivering process is?
  6. What major problems do you face when you are on your way to deliver the order?

The questions list for the kitchen managers included:

  1. What issues do you face while logging in the driver at the start of the day.
  2. Do you face any hustles while the drivers are picking up their orders?
  3. Do you face any problems while communicating anything order specific to the drivers?

Apart from the interviews, I also observed the environment and other things happening in the kitchen.

Insights gathered from the interviews

The below are the snapshots of the insights gathered from drivers, kitchen managers and my personal observations from the kitchen.

Insights from the drivers
Insights from the kitchen managers
Personal observations made by me

Please ignore my handwriting, I had to write really fast. 🙆🏻‍♀️

Anyways, the insights from these interviews and kitchen visits were presented to the business team and also project managers to finalise the action items for our redesign.

Action Items

From business standpoint

  • Gamification in the app to motivate the driver.
  • Login to be done by driver.
  • Driver- customer communication module.
  • Covid safety measures to be taken by drivers and communication of same to the customer.
  • Different drop-off provision on the front end and hence same on the driver’s end.
  • Help & Support provision.

From technology standpoint

  • The app should be light and navigation should be smooth.
  • The app should drain as less battery and data as possible.

From design standpoint

Apart from all the observations made during kitchen visits, I also analysed the current designs to find grounds for improvements. I will dive right into the visuals and explain my reasoning along the away.

So let’s get started…💃🏻

Splash screen

New visual guidelines were set, which included more vibrant colours which were used in the new app to develop liveliness and trust throughout the app.

Splash screens

The old design was dark and did not align with the rest of the app’s UI. In the new design I added an illustration to trigger connect with the driver as this is how they deliver food on their bikes.

Login flow

Earlier, first time login was not done on the app and was manually done by the kitchen managers. Now the drivers will be able to login directly from the app and hence reducing the load on the kitchen managers. Login will be a one time process performed by the drivers.

Login flow

Moving ahead, I will be explaining the functionality of each tab in the app which constitutes for the navigation of the app.

Home screen/ Duty tab

Lets start with the first and the most important one!

The two majors issues that we solved for on the home screen were the app navigation and order assignment to the driver.

App navigation

Old design —All the action items were hidden in the hamburger menu, which made switching between two tasks tedious.

New design — In the new app, I introduced a tab bar for smooth navigation placing them in the order of their importance and usability as we gathered from the drivers.

Order assignment to the drivers

In order to make the order assigning process flawless we had multiple conversations with the customer care team to understand what were the flags raised by the drivers.

We discovered that there were constant concerns from the drivers that even though they were in the kitchen still no orders were being assigned to them and they had no visibility of the location that the system was fetching.

The only understanding of this scenario was that the system was lagging behind to identify the driver’s correct location due to which a particular driver was not available and hence not eligible for order assignment.

We did two things to rectify this:

  1. On tech front: The tech worked diligently to make the GPS tracking system efficient.
  2. On design front: I gave provision of displaying live GPS location on the app for drivers visibility. Now drivers will know every-time the location isn’t correct and can refresh it when not displaying the exact location.

Along with these, we also introduced help & support feature in the app. For now, there will be a calling provision for the drivers in case they face any difficulties.

Now lets look at the differences between the old and new designs.

Home screens

Break state

There is a option to take a break, on the top navigation. I am sure you must be wondering, what is this for?

Let me explain the need of this feature.

An observation was made by the analytics team that some drivers intentionally switched their internet off to avoid receiving orders. When observed, we realised the scorching heat was the reason some of them got extremely tired and needed break from delivering orders.

This was recognised as a serious pain-point and thus we introduced a Break State in the app. This state will allow the user to take occasional breaks when tired in between the working hours.

Break state — active

Order pickup flow

A major component of the pickup flow is the assigned order card.

The major problems thats drivers faced while picking up the order were:

  1. They could not check the order status at any time and unless the kitchen manager called them out they could not know when the order was ready.
  2. With every assigned order there is a predicted delivery time (PDT) that we communicate to the customer and the same has to be achieved by the driver, but there is no way for the driver to track this.
  3. Instructions per order could not be memorised by the driver.
  4. If ever the order delivery was delayed, the drivers could not explain it to the customer as he did not have the visibility of the order timeline.

To rectify these issues:

  1. I introduced a time tag which would be available on the card, in different colours depicting the time left for the PDT so that the drivers are always on their toes and do not miss the timeline.
  2. Also I added the total distance till the destination and the estimated arrival time for the same on the card, so that the driver can calculate better.
  3. For all the detail related issues, I introduced a detail section in the card which would provide all the necessary details regarding the order.

Let’s compare the visuals of the old and new version of the app.

Order pickup flow

Another observation that was made during the kitchen visit was that the driver knows the delivery routes better, which means our system was still catching up, so till our order assigning logic becomes error proof, we have given a provision for shuffling the sequence of the assigned orders for timely delivery.

Once the order is accepted or picked up by the driver, the shuffling can be done. All the necessary details of the order will be visible in the collapsable view for rearranging the delivery sequence of the assigned orders.

Sequence Rearranging Flow

The shuffling of the card can be done simply by holding and dragging the card to the desired place.

Order delivery flow

A few safety measures had also been added taking in account the current circumstances as a business requirement, once all the orders are picked up. The driver has to upload his picture wearing a mask and PPE kit, only then he will be able to deliver the order.

PPE Kit Flow

An AI algorithm will detect the probability of the driver wearing a PPE Kit and reflect the same for the driver too.

Delivery flow

The driver will have access to all the order details at this stage too, solving for information transparency.

Once the driver has reached the location, he has to take a picture of the place where he has kept the order or to whom he has delivered the order to and mark the same in the app to complete the order delivery process.

Driver- customer communication

This module will have few pre-defined messages that the driver can use to perform the necessary actions during

. The need for this module is to encourage the driver to communicate basics things to the customer via message than calling him/her.

Chat Flow

Reports tab

With this we move to our second most used page by the drivers to check the incentives earned.

  1. As mentioned in the beginning, we introduced gamification in the app, to communicate a daily target to the driver of a certain number of orders that will earn them a defined incentive.
  2. With every order completed, he will be notified of the percentage out od the total target which he has achieved.
  3. This will be shown everyday at the beginning of the day on the main screen, and all the further details will be visible in the reports tab.
  4. Earlier not all the relevant data related to delivered orders was shown in the reports, but now int he new app we clearly show the all the information along with the incentives earned breakdown.
Reports Screens
  • We also show day wise details and previous delivery history.
Delivered orders summary for drivers

Notifications tab

  • In the new app, we added a notification section which will be used for communicating all business initiatives, or any other important updates to the drivers.
Notification screen

Profile tab

  • This section, which is the profile tab will contain a brief detail about the driver, training material in form of videos and the level details.
  • These level details are part of the gamification experience which will motivate the driver to achieve more and climb the the badge ladder.
  • Since this app is used in various states, we are also giving multi-language support. This provision was not provided in the old app.
Profile screen

Help flow

The help section can be accessed by the driver from the top navigation, anytime during his journey.

Help feature expanded

Apart from redesigning the experience of the app, being the only designer I was also responsible for putting together all the illustrations for all the empty states, confirmation dialogs, error states etc along with the copy for each screen.

Intermediate screens

Learnings

  • In core business driven projects that involve too many stakeholders, one should never compromise on the user experience. In these cases, the best design option is not to shock the users with too many changes, yet work with the users to understand them and then refine the experience.
  • With changing times, we have to figure out optimal ways to work around in a project.

--

--