Building FoodPanda 3.0 and reinventing the food discovery experience

Designing an information architecture that improves food discovery for a million FoodPanda users.

PROJECT OVERVIEW

Ola cabs acquired FoodPanda’s business in India in December 2017. The acquisition was supposed to help Ola cabs expand into the food delivery space, an industry Ola has long been interested in, with experiments like Ola Cafe in the past.

FoodPanda India has a massive footprint of 12,000+ restaurant-partners in over 100 cities, launching Ola into an already competitive market with some very solid credentials.

The team

After the acquisition, teams were put together to help build the next generation of FoodPanda. I got the opportunity to design a solution for the problem of food discovery, working directly with some seriously good designers like Sunit Singh and Prashant Jain.

We were calling this Project Unlock that had me working under the guidance of Sunit, along with a product and engineering team.

Our first order of business was to understand where the current FoodPanda app was failing to meet the users’ and the business’ needs.

The FoodPanda design team (missing some folks)

User issues with the old UX

1. Too many choices

Deciding what food to order is one of the toughest decisions of everyday life! The options are infinite, specially in relatively larger micro-markets of Bangalore (Indiranagar) or Mumbai (Colaba), where over 300 restaurants can be serving during peak lunch and dinner hours.

In such overly saturated micro-markets, the old app was too disjointed to allow a good user experience around deeper discovery of cuisines.

Hick’s Law tells us that the more choices we offer a user, the longer it takes for them to decide, thereby increasing the chance they abandon the app.

2. Too few choices

The old app was heavily dependent on horizontal card collections to showcase restaurant options, which failed marginally in smaller micro-markets where the breadth was just not enough to offer a good food ordering experience.

In Tier II and Tier III cities of India sometimes there aren’t more than 50 restaurants serving dinner peak times.

3. One size fits all

Because of technological limitations the old design was unable to scale to meet the requirements of a fast-growing India business. We’d settled for a one-size-fits-all design that was beginning to break at the corners.

4. Unidimensional discovery of food

While a user is overwhelmed by the sheer number of delivering restaurants, narrowing down his/her options takes even more thought — budget or splurge? fastest delivery or no hurry? what cuisine — Chinese, North Indian, South India, Continental, Pasta?

Once a user goes down the first choice (Chinese) it wasn’t very easy to explore and compare offerings in other cuisines (maybe, Thai).

5. Breadth was unknown

While FoodPanda is extremely deals-driven, for a non-deal-seeking user the breadth of options (totality of restaurants) was unknown, thereby leading to drop-offs for that user.

Business requirements

1. Inability to showcase a varied supply chain

Because our homepage was heavily dependent on horizontal card collections, it was difficult to show the diversity of restaurant options on the platform, namely the various cuisines or restaurant offers and so forth. In addition to that, the card collections didn’t allow a deeper discovery experience but rather just skimmed the surface with a handful restaurants under each collection.

Our research showed that 47% of the users clicked on the first few options in a collection whereas only 35% of users were even clicking on ‘View All’.

The old design of the FoodPanda app was heavily dependent on horizontal card collections.

2. Make space to create value for partners

With a one-size-fits-all approach, it was getting difficult for the business to provide value for the restaurant-partner without overcrowding the homepage to look like a deals app. More merchandising elements were required instead of cramming the banner space into an endless slideshow.

3. Need to experiment to create more revenue opportunities

Being a player in the saturated and overly competitive food delivery business requires a constant need to experiment and to create more revenue streams for self as well as for partners. This was a gaping hole in the old FoodPanda design and needed to be corrected to ensure scalability.

Key Deliverables

Having understood our ground realities and the goals for the design team, some of my key deliverables were:

  1. Device a new information architecture
  2. Create a scalable navigation
  3. Regular sync ups with all stakeholders to track progress, share insights or course correct
  4. Work within the design system being setup simultaneously at Ola
  5. Finally, present the new design to all stakeholders

DESIGN PROCESS

We started out with the simple maxim —

How do we make it easier for a user to find food as soon as they come in?

Ordering food for any meal is a task unto itself. There is pain in scrolling into the greatest depths but still not being able to figure out what to eat! Or worse, being unable to simply re-order a previous order.

Our primary undertaking was to rethink the complete information architecture and improve top-of-the-funnel discovery of food.

The Project Unlock team synced every week to track design progress and share insights or feedback from the last 7 days. Next iterations were made on the basis of these timely sync-ups. Apart from these, design check-ins were made regularly between me and the design managers to ensure we were on the right path.

Identifying the problem statement

Over the first couple weeks, I studied and understood the information architecture of content apps across all domains, from entertainment to e-commerce and music, so that we could start finding answers to some of our basic questions:

  1. How do we solve the problem of food discovery through a flexible navigation on the basis of intent and push a user to selection?
  2. How do we build an information architecture that will immediately appeal and reduce the anxiety of making a decision?

Competitive and comparative analysis

I undertook a comparative study of content-heavy apps like Apple App Store, Netflix, Spotify, Amazon, Instagram and AirBnB as well as food ordering apps in other geographies, to identify the patterns at play that lend to the ease of use of each of these apps.

I studied the information architecture of all content-heavy apps like Spotify, AirBnB and Wish.

What we learnt was that most content-heavy apps reduced their entire offering to a handful of top-level super-categories. These were the primary touch-points of content discovery opening up a much deeper experience behind each.

Most content-heavy apps could break-down their entire offering into a handful super-categories. What could be the super-categories for food?
Take away #1 — Find the top-level categories for food

For us to be able to do the same we needed to first understand how people ordered food.

How do we categorize food?

A user’s decision to order food is influenced by two straightforward criterion:

Time

What time of day are you ordering food at — breakfast, lunch, snacks or dinner?

Mood

What would you like to eat today?

‘Time’ and ‘mood’ greatly influence the food ordering subconscious.

Let’s suppose a user is ordering breakfast on a Sunday morning. The options are endless from English to American breakfast, South Indian, Parathas or maybe something local like a Vada Pav?

Or at dinner a user could want anything from Biryani, North Indian or Parathas to something as niche as Thai or Indonesian.

Another criterion that superimposes the time and mood of food ordering is your geo-location. For a user in Bangalore, India, time and mood will be influenced by the diversity of restaurants around them while a user in Indore may not have the same breadth of options.

Region

Where are you ordering from?

The 3 factors that influence food ordering are time, mood and geo-region.
The time and mood of food ordering is further influenced by the ‘location’ of the user.

Synthesising our findings

We now understood that we needed to find the top-level touch-points for the food ordering psyche. And that time, mood and geo-region influence the decision making.

And so we could begin to design a scalable navigation that bettered the discovery of food while being time sensitive, personalised and region-appropriate.

A montage of explorations made over a period of a month

Understanding our users

While user personas are revealed after a more extensive research, we did some user surveys to find out what the food ordering patterns of users in India. Post which we were able to define our 4 types of users who order food online. We also had to find a way to prioritize these needs while allowing a faster and better discovery of food.

User A

The user who knows exactly what they want and will reorder 7 out of 10 times.

After getting home dog-tired, Priya doesn’t have the time or the patience to figure out what to eat. She has a set choice of 3–4 items that she rotates between, from a popular local cloud kitchen, FreshMenu.

User B

The user who is price conscious and needs to receive the order quickly.

Rishabh orders lunch to his plush startup office everyday and but is usually busy, left with a small break in between meetings to have lunch. He wants to get his order quick and hot and hates spending too much on food.

User C

The user who has a broad preference in mind, like a cuisine or a particular dish.

Shreya is always confused when it comes to ordering, afterall the options are endless. But she narrows down her cravings by atleast knowing whether she wants chinese or desi (Indian) food.

User D

The user who is hungry but wants to try something new.

Supriya and Vinay are a newly married couple living in Bangalore and Sundays usually are their chill day. Which means, more leisure time can be spent trying to come up with what to order today, so that both tongues are satisfied.

The different pieces of content

Primary banners

They are the primary merchandising unit often used to promote restaurants or FoodPanda campaigns.

Dish lead-ins

A dish lead-in is an exposed list of selected dishes from every restaurant leading to an express checkout. The user flow is optimum for single meals.

Examples being ‘Delicious burgers @ 99’ or Iftar meal for two @ 159’.

Restaurant lead-ins

These are a collection of restaurants either machine-generated or curated editorially.

Examples could be, ‘Top brands’, ‘Crave legends, ‘Order again’ and ‘Lightning fast delivery’.

Collection lead-ins

Collection lead-ins are restaurants clubbed together under the same theme, the theme maybe machine-generated or editorially curated. Another way to look at it would be that collection lead-ins are nothing but restaurant lead-ins clubbed together.

Some examples being ‘Sumptuous english breakfasts under ₹299’, ‘Restaurants with 50% off’, ‘Vegetarians only’, ‘Parathas only’.

Restaurant list

The exhaustive list of all restaurants serving in that location.

These collections are made either by a single criteria like budget, delivery time or rating. Or are thematic collections like Friday evening orders or lunch order in a specific geo-location. A restaurant list is also always Search and Sort/Filter compatible.

Identifying the different pieces of content that make up FoodPanda

SOLUTION

Solving the discovery of food with a scalable navigation that is personalised, time sensitive and regional

A cross-sectional view

Breaking down our information architecture completely we have our building blocks, namely,

Components

Components are the different types of content that can be put together to create n number of experiences.

Components are modular elements that allow a user an immersive food discovery experience.

Templates

Templates are frameworks governed by certain rules, each offering a unique food discovery experience.

When components are put together in any combination, they create a template, which is a mini food experience unto itself.

Primary navigation

A user can navigate between the different Templates through the Primary Navigation.

Primary navigation is the key that ties the smaller food experiences together and lets a user easily navigate between each.

In conclusion, it can be said,

Components make up Templates. Templates are unique category experiences bound together by the Primary Navigation.

Introducing a new way to discover food

Our new primary navigation is made up of ‘super-cuisines’ — the top-level cuisines like Asian, Italian, North Indian, that are identified by their popularity and order volumes in every micro-market.

These super-cuisines change according to time of day and geo-location (and will ‘learn’ to take order history into account).

Super-cuisines on the primary navigation change according to time of day, mood and geo-location.

The idea is to retire the salutations in the title bar once the user learning has happened and the context is successfully tied between the tabs and the time of day.

Each tab in the primary navigation is a different food experience completely unique to the time and location of the user and will be different for every micro-market.

There are a couple guidelines of what can constitute a super-cuisine:

  1. A super-cuisine can be big enough to have sub-cuisines of its own — example, Pan-asian can have Thai, Malay, etc.
  2. A super-cuisine should have at least 10 restaurants serving in a location to be on the primary navigation

The Primary Navigation is not just limited to Super-cuisines. It can also be Seasonal, Festive or just really Popular!

Primary Navigation is not just limited to Super-cuisines. It can also be Seasonal, Festive (Navratri) or just really Popular (Pizza)!

The first look at a scalable food discovery experience — revealing the outcome of Project Unlock!

WHAT LIES NEXT?

Building the rest of the app

With the primary navigation squared away, we are completing building the rest of the new FoodPanda app (in staged sprints). We conducted user interviews and observed the process of ordering food to prioritize what’s most important to the user. We deep dived to understand the ordering frequency in some of our biggest micro-markets across India. All that collective knowledge has driven the design and user experience of the new FoodPanda app.

The new UX is being pushed out in sprints over the old design, all while we user test and iterate to improve as we go along.

Migrate to Ola’s universal design system

While we were busy building the new FoodPanda 3.0, Ola’s design team was creating a new design language for all the apps in the Ola universe (Money, Play, FoodPanda).

Alongside building the new information architecture within the new design language, we ran a quick sprint in September to launch FoodPanda within the Olacabs app — an exercise that has helped us quickly improve the old UX while implementing new UX changes.

The new FoodPanda is already integrated with the Ola cabs app and we are in the process of building a standalone PWA.

Test and iterate

Our next order of business is to aggressively test our new designs and user flows and iterate quickly. Initial user testings have been in favour of the new primary navigation, we now need to concentrate on extensive user interviews and focus-group testing.

Improve rider experience

Plans to begin work on the redesign of the rider app is underway. Prioritizing the right information at the right time would be our utmost challenge when improving rider’s food pickup and delivery experience.


Acknowledgements

Support from teams across Ola

Rajat Shikhar, Chief Product Officer, FoodPanda
Nikhil Jain, Associate Director, Product
Jay Visavadia, Senior Product Designer
Atul Kaushal, Product Designer
Iram Javed, Product Designer

Guidance at every step

Prashant Jain, Director of Design
Sunit Singh, VP of Design