Foodpanda is a popular food delivery platform that connects users with a wide range of restaurants. You can order food online, enjoy the convenience, and have delicious meals delivered right to your doorstep. I have decided to revamp their app and make it a more health-conscious food ordering platform.
By implementing changes to the existing UI and allowing more dietary criteria options, we could enhance user experience and cater the Foodpanda app to a wider range of users.
Project Brief 🫴
In the 18-week UI/UX course, I’ll tasked to revamp the existing Foodpanda app based on my persona. From identifying the user pain point to developing corresponding creative solution, I’ll walk you through the whole redesign process of producing an app prototype.
The whole design process was divided into four sprints:
- Research Sprint
- Concept Sprint
- Usability Sprint
- Handover Sprint
Research Sprint
Problem Statement
For busy college students in the creative education sector trying to acquire meals efficiently
Who has issues compromising their dietary restrictions in group orders on the food ordering app
Our product is a dietary-conscious and intuitive food-ordering platform
That provides flexibility and alternatives to allow every customer to enjoy their favourite food intuitively
Unlike Foodpanda app
Our Product solution provides convenience and trust to group food ordering and dining experience, flexibility in meal categorisation in terms of portion or ingredient choice and value and caring service for people within the community of specific dietary criteria
Problem Statement
Research’s Objective
- To understand interviewees’ past and present experience with specific dietary restrictions
- Learn about the difficulties of interviewees when searching for food that matches their dietary criteria
- Understand users’ food ordering experience and purchasing habits on the food ordering app
- Investigate how specific dietary criteria affect interviewees’ consuming behaviour in everyday life
Research Procedure
- To research basic information about food ordering app
- To develop a list of food-consuming behavioural interview questions for the target audience
- To understand user’s food shopping experience and habit
- To find out the unique selling points and flaws for food-ordering apps
- To analyse how clear solutions for specific dietary criteria or food allergies would benefit users
- To revise the data and studies on the app's opinion
- To generate insights and solutions from the interview
Interviewees
Interviewees who have had dietary restrictions of allergies or diet and used food-ordering apps. Food allergies included are G6PD, beans, seafood, kiwi, egg yolk, and grape. Also, an interviewee went on a carbohydrate diet.
Interview Questions
https://forms.gle/R19tAa3WJyJNU1JE9
Insights
- 50% of interviewees are often unsure whether certain dishes or food items include specific ingredients that may clash with dietary restrictions when ordering on a food-ordering app.
- 50% of interviewees would compromise their dietary restrictions due to the limited options available from the app.
- 100% of interviewees have ordered food online. 50% of interviewees prefer to get their food outside while 25% of interviewees have a mix of acquiring food online, offline purchasing and cooking on a daily basis,
- 75% of interviewees will trust the app because of its well-established reputation and trustworthy advertisement.
- 75% of interviewees think their personalities affect ordering and dining experiences
- 75% of interviewees use either one of the FoodPanda or ShopeeFood apps while 50% of interviewees used before ShopeeFood
- 50% of interviewees learned to be more careful when ordering the same food types or from the same restaurant
- 75% of interviewees rarely spot fine visuals or clear details on whether the food contains specific dietary criteria while 25% of interviewees often see clear details in the context of text such as prawn hor fun and hor fun
- 50% of interviewees strongly disagree with the app’s awareness and features on selling food for people with special dietary criteria, while 25% of interviewees disagree and the other 25% of interviewees agree.
- 75% of interviewees could not recall any instances where they could notice the app’s features on selling food for customers that has dietary restriction
- 100% of interviewees would be motivated to order food more frequently on an app dedicated to specific dietary criteria. 75% of interviewees provided the reason for convenience in acquiring meals that cater to their dietary restrictions. 50% of interviewees also provided the reason for adjustments to portions of cooking ingredients
- 100% of interviewees had frustrating experiences related to a lack of sufficient information or options when searching on the food app. 50% of interviewees struggle with a lack of information and the constraint to order their favourite food. 25% of interviewees experience food wastage due to unawareness of additional items that come with their food orders.
- 100% of interviewees think an app catering to dietary restrictions would overall enhance the food ordering experience. 50% of interviewees would be able to enjoy their favourite food while not clashing with dietary restrictions. 25% of interviewees would be able to adhere diet with more discipline.
- 75% of interviewees had struggled to find a suitable option for both parties when doing a group order. 50% of interviewees had to order separately. 50% of interviewees had to compromise their dietary restrictions when doing group orders. 25% of interviewees struggled to get their group order remarks followed.
Problem Statement & User Persona (Validated)
After conducting a user survey, I gained insight into their pain points and needs. I updated my problem statement and user persona accordingly.
For busy college students in the creative education sector
Who have issues with compromising their dietary restriction when acquiring meals online
Our product is a dietary-conscious ordering platform
That provides a comprehensive and optimised ordering experience
Unlike Foodpanda app
Our Product solution provides convenience in optimising search for different dietary intakes and flexibility in meal categorisation in terms of the nutrient portion or ingredient choice
Competitor Analysis
I have researched three different food-ordering apps and listed down some of the features and comparisons between them.
The pros and cons of each app are also identified to understand more about dietary-consciousness and UX design in food ordering apps. I have listed all them below.
Full Research Sprint
Concept Sprint
In this sprint, new features will be designed to cater to our user’s needs.
New Feature Proposal
The existing food ordering app is not dietary-friendly in terms of nutrition intake and dietary restrictions. Thus, we suggested ways to track nutrition intake amount, while allowing users to further customise their meals catering to their dietary needs. Also, the ability to quickly command the app through voice commands and personalised badges that filter out restaurants and food are useful too.
New features:
- Panda Fuel
- Mastery Badges
- FoodPanda Palette
- Panda Voice Chef
First Wireframe Prototype
I’ve developed the wireframes through Figma. There are 6 main tasks to go through before completing a food-ordering process as a new user.
Concept User Test on Wireframe
I did a concept test to try out how the new features favour towards people with dietary restrictions.
Concept User Test
https://forms.gle/2fgo53dYwQKnjxgJ7
Prototype Link
Concept Test Insights
The insight has helped me in validating and improving my proposed features. Participants were keen to have dietary-conscious features such as Palette Customisation or Dietary Badges on the app.
Analysis of Concept Test & Action Plan
I‘ll be making necessary changes after receiving valuable feedback and insight on the dietary features.
Full Concept Sprint
Usability Sprint
Moodboard
Next, I’ll be compiling a mood board with the art style and colour palette that will fit our core experience of the redesign. There are two mood boards below, the previous and refined versions as I have stumbled upon some design solution issues. The overall mood for the redesign sees Foodpanda covered with brilliant and pop colours, with cool icon graphics and dynamic visuals.
The three keywords I will be emphasising on the core experience design are fresh, dynamic & graphical.
Previous Moodboard
User Flow
I’ll be creating 4 main user flows to better show steps and navigation between pages.
Hi-fidelity Screens 1
The screens are designed based on the previous and refined mood board. There were 6 design iterations in the high-fidelity development.
The colours are bland and do not go well altogether. The usage of colours is inconsistent on every page.
Hi-fidelity Screens 3
I have applied more dynamics in colour selection and in differentiating each card section. The spacing and layout of content have been improved while standardising the navigation header for each page. However, the colours are still not interesting enough to be representing a dietary-conscious food-ordering app. I will address the issue by first refining the previous mood board.
Hi-fidelity Screens 4 & 5
I have applied the refined mood board to my subsequent design. Iterations 4 & 5 see more pop colours and introduce 3D graphical coloured icons, rather than just simple illustration icons. Gradient colours are experimented here on a more spaced layout. However, the gradient colours used in design iteration 5 may have been too much in terms of colour theory, which made the layout look messy without a clear hierarchy on where users should be focused.
Hi-fidelity Screens 6
At this stage, I was able to improve the colours with a soft pink and white backdrop with pop colours, especially pink for CTA buttons, and others. The consistency of card layouts and spacings is also refined.
Next, I’ll be conducting a usability test to see if users think the design and concept are suitable for the app. Any feedback is important to validate its usability, hence three modes of the usability test will be carried out.
The three usability test modes are Interior, Moderated and Unmoderated.
INT Foodpanda App Usability Test |
https://forms.gle/aecrP7sNGjzetbRx5
INT Foodpanda App Usability Test |
https://forms.gle/aecrP7sNGjzetbRx5
Moderated Foodpanda App Usability Test | https://forms.gle/zFkSXno4tWFQDsrc6
Unmoderated Foodpanda App Usability Test | https://forms.gle/H4hYmwnibmrnACVJ7
User Testing Tasks
To validate the app’s usability, each user will be given 5 tasks to complete, and provide valuable feedback and insight on each flow and overall design of the app.
Action Plan
An action plan is derived for final changes after receiving comments on the design and visuals for better hierarchy and ease of use within the app.
Full Usability Sprint
Handover Sprint
In this final sprint, I’ll be compiling a collection of graphics and components and setting clear guidance to hand over for future designers and developers to work on.
Final Hi-Fidelity Screen
Style Guide
Here is my detailed style guide on the art style and design for its elements.
Final Screens
These are my final iterations of designs published on device screens.
Mockups
Project Roadmap
Here is a project roadmap for efficiency from Q2, 2023 to Q1,2024.
Full Handover Sprint
Key Learnings
From the introduction to the sprint working method, and experiencing a whole round of user experience design, I have:
- Learned how to conduct detailed research methodology with the right questionnaires.
- Learned how to analyse data to generate meaningful insights and practical solutions.
- Learned how to design solutions to cater and appeal to specific target audiences.
- Learned how to transition design concepts into user experience design.
Final Thoughts
It has been fun and interesting to research, work on and adapt to for redesigning an existing app to cater to and appeal to the specific target audience. I learnt a lot from implementing research methodology and how to create practical user experience solutions from the data and analysis collected. There were many back and forth of interviews, testing, taking of feedback and implementing rounds of changes.
My main challenge was at the High-fidelity design phase as I initially faced difficulties in transitioning the concept with the design of the right fit. I have changed the mood board and did many design iterations to be finally able to grasp the current colour redesigning, with better spacing and content alignment. Lastly, the entire process is fun while learning to observe more around as tiny details in design provide a sense of beauty and ease.