Making Foodpanda a more Personalised Experience
Introduction
The prevalence of food apps these days made sure we could have anything we wanted, delivered to our doorsteps, without having to take the “step” out of the “door”. I will never forget the anticipation and joy whenever I use food apps — akin to a young kid running into a big endless toy store where delight is everywhere and possibilities are boundless. It is by design and no accident that we (at least myself) feel this way.
Competition between food apps is intense, which is why apps like Grabfood, Deliveroo and Foodpanda have user experience that feels almost impeccable and similar across the playing field — it is hard to find problems. However, any business would like to stand out amongst its competition. Our team decided to focus not only on problems, we look for opportunities. We launched a case study on Foodpanda. Here is what we have to share.
Research
We started off with Foodpanda users in mind. Knowing their painpoints and desires helps the team make informed, targeted design decisions that address our users’ needs in the subsequent stages of product development. We employed a variety of user research methods stated below to understand our users:
Contextual Inquiry
Actions speak louder than words. We conducted a contextual inquiry with several users to observe what they do as opposed to what they say. Users were asked to order something on Foodpanda without instructions that were specific or leading — to avoid biases. The following things we looked out for were:
- Irregular user behaviours
- Motive behind certain interactions / behaviours.
- Challenges faced by users.
User Interview
To understand our users from a larger context (especially aspects that are not observable from their interactions with Foodpanda), we also conducted user interviews to find out:
- Why users prefer a certain brand of food app over another.
- How users feel about certain features of Food Apps
- What users like or dislike about their ordering experience.
Questionnaire
Our team also prepared a series of questions aimed towards validating and backing our findings gained from the preceding contextual inquiries and user interviews.
Findings
With data gathered from user research, an affinity map was created to consolidate, organise and analyse our findings on users’ painpoints. Dot voting was used to prioritize painpoints:
The team picked the top three painpoints and placed them side by side:
Painpoints:
7 in 10 Users take longer than 10 minutes to place an order
Taking more than 10 minutes to make an order on Foodpanda may or may not seem like a painpoint, depending on the context the user finds him/herself in. For example, a user who is busy and is just looking for a quick bite may appreciate spending lesser time on Foodpanda finding something he/she likes to eat.
Growing need for tailor-made UX
Data gathered from our user research surfaced the desire for a more personalised UX — displaying options that are aligned and targeted towards the user’s preferences.
Ambiguity of Foodpanda’s Price Filter
How much does $, $$ and $$$ cost? The price filter in Foodpanda does not sufficiently communicate a price range.
Problem Statement
With a clearer understanding of our users’ painpoints, the team came up with problem statements that brings us a step closer to possible solutions:
We arrived with the following problem statement:
“How might we create a personalised experience for each Foodpanda user?”
Persona
For the team to have a clearer understanding of who we are designing for, a persona was derived based on the aggregate of behaviours, expectations and demographics from all participants in our user research. Hence Gary was “born”.
Customer Journey Map
The team went on to map the persona, along with his behaviours and expectations onto various touchpoints from a typical Foodpanda user flow (the ordering process), for the purpose of identifying opportunity gaps.
Design Iterations
Based on the opportunity gaps identified in Gary’s journey map, we recommend the following design iterations for the Foodpanda app:
- Add a new feature called “Manage Homepage” — this allow users the option to customise their homepage by creating customised categories that pushes out recommendations that are aligned to their preferences (E.g. cuisine type, price range, delivery time, or a combination of the aforementioned parameters).
- Replace the “$, $$, $$$” price filter with a slider that is denoted by numerical values — so users can set a clear, definite price range.
- Adding a filter in the search results page based on the user’s preferences — this helps the user sieve through hundreds of search results, showing only the ones that fit their preferences.
Information Architecture (Existing)
We looked at the existing information architecture of Foodpanda app to determine where we should place our solutioning:
Information Architecture (Proposed)
In our proposed Information Architecture, we did the following:
- Placed the “Manage Homepage” feature under the Menu panel.
- Revamped the Filter feature to include a price slider instead.
Ideation: Sketching
This is how “Manage Homepage” looks like during the initial stage of sketching:
Ideation: Style Guide
To make sure our solutioning is visually consistent with Foodpanda during wireframing, we needed a reference from their style guide. Since Foodpanda has not made their style guide available for circulation, we took on a reverse approach and created a provisional style guide after identifying current visual elements from the app:
Proposed Solutioning (Wireframing)
S1 : Manage Homepage
With the “Manage Homepage” feature added, users can now customise their homepage. Under the “Default Category” subsection, users can toggle the appearance of default Foodpanda recommendations. Under the “Customized Category” subsection, users can create a unique category that pushes out recommendations according to their preferences.
S2 : Price Filter
The current “$, $$, $$$” filter is replaced with a slider that clearly communicates a price range using numerical values.
S3 : Filter in the Search Results Page
Filters through hundreds of search results and shows only relevant results that fit the user’s preferences. Save users the time and effort of going through the results.
Proposed Solutioning (Full Mockup)
Results
Implementing our proposed solution flow onto mobile and desktop platforms
Next Step
In the next stage of product development, our team will go on to conduct usability testing on our new design interation to make sure our users’ needs are being addressed and will make further iterations if applicable.
Thank you for taking the time to read through this article and we look forward to your feedback! :)
