17 Jan 2025
foodpanda
Categories Navigation
Categories Navigation
Categories Navigation
Summary
Summary
Project overview
Project overview
I enhanced the grocery category navigation on the Foodpanda app, making it simpler for users to switch between categories.
I enhanced the grocery category navigation on the Foodpanda app, making it simpler for users to switch between categories.
My role & contribution
My role & contribution
I oversaw the entire design process—from data analysis and research to workshop facilitation and final design details—working closely with product managers, business teams, product analysts, developers, researchers, and other designers.
I oversaw the entire design process—from data analysis and research to workshop facilitation and final design details—working closely with product managers, business teams, product analysts, developers, researchers, and other designers.
Key highlight
Key highlight
I initiated this design effort, secured full stakeholder support, and led a workshop in Turkey to align the global team on the final solution.
I initiated this design effort, secured full stakeholder support, and led a workshop in Turkey to align the global team on the final solution.
Key Activities
Key Activities
Data Analysis
Data Analysis
Stakeholder Buy-In
Stakeholder Buy-In
Workshop Facilitation
Workshop Facilitation
A/B Testing
A/B Testing
Usability Testing
Usability Testing
Motion Design
Motion Design
Situation
Situation
At the beginning of 2023, each designer was tasked with proposing a design initiative to enhance Foodpanda’s products. While combing through our internal analytics dashboard, I stumbled on a trend in the category browsing page
At the beginning of 2023, each designer was tasked with proposing a design initiative to enhance Foodpanda’s products. While combing through our internal analytics dashboard, I stumbled on a trend in the category browsing page
The deeper a category is buried in the list, the fewer visitors it draws.
The deeper a category is buried in the list, the fewer visitors it draws.
With over 40 categories and a massive SKU range, it’s easy to dismiss this as normal—naturally, higher-priority categories appear first.
But I saw an opportunity. If I could make those lower-visibility categories easier to reach, perhaps user exploration would increase. They might visit more categories, boosting their average basket value in the process. That was the core hypothesis driving my work.
With over 40 categories and a massive SKU range, it’s easy to dismiss this as normal—naturally, higher-priority categories appear first.
But I saw an opportunity. If I could make those lower-visibility categories easier to reach, perhaps user exploration would increase. They might visit more categories, boosting their average basket value in the process. That was the core hypothesis driving my work.
The problem
The problem
The current horizontal scrolling navigation on foodpanda's shopping page limits visibility to just 3 to 4 out of 40 categories at a time.
The current horizontal scrolling navigation on foodpanda's shopping page limits visibility to just 3 to 4 out of 40 categories at a time.
This limitation resulted in hidden categories receiving much less user engagement and interaction.
This limitation resulted in hidden categories receiving much less user engagement and interaction.
Difficult to learn how to navigate
Inefficient
Overwhelming
Hypothesis
Hypothesis
By refining the navigation experience, we can spotlight under-explored categories and motivate users to delve deeper into our product range—ultimately helping them find the items that best match their needs and interests.
By refining the navigation experience, we can spotlight under-explored categories and motivate users to delve deeper into our product range—ultimately helping them find the items that best match their needs and interests.
Success Metrics
Success Metrics
Increase the no. of distinct categories user visits per session
Sessions that made a transaction after visiting the category page
Increase average amount spent by users (ABV)
Increase the no. of distinct categories user visits per session
Sessions that made a transaction after visiting the category page
Increase average amount spent by users (ABV)
Explorations
Explorations
Variant A - Bottom sheet navigation
Variant A - Bottom sheet navigation
Pros
Pros
More streamlined layout that reduces cognitive load
A dropdown that provides an instant category overview
Saves 44px of vertical space
Better accessibility
More streamlined layout that reduces cognitive load
A dropdown that provides an instant category overview
Saves 44px of vertical space
Better accessibility
Cons
Cons
Requires an extra tap to access the full category list
Page swipe to change category becomes less intuitive
Requires an extra tap to access the full category list
Page swipe to change category becomes less intuitive
Variant B - Floating pagination
Variant B - Floating pagination
Pros
Pros
Allows users to anticipate the next or previous category
Offers a clear visual cue for swipe-able navigation
Allows users to anticipate the next or previous category
Offers a clear visual cue for swipe-able navigation
Cons
Cons
Users may need time to adjust their navigation habits and eye movement
New interaction pattern may require user education.
Tapping to open the bottom sheet isn’t immediately intuitive, potentially causing confusion.
Users may need time to adjust their navigation habits and eye movement
New interaction pattern may require user education.
Tapping to open the bottom sheet isn’t immediately intuitive, potentially causing confusion.
User testing
User testing
Control v.s. Variant A v.s. Variant B
Control v.s. Variant A v.s. Variant B
Round 1
Round 1
Control
Control
% completing the task
% completing the task
60%
60%
Average click to reach goal
Average click to reach goal
4
4
% of misclick
% of misclick
53%
53%
Average time to complete tasks
Average time to complete tasks
46s
46s
Variant A
Variant A
% completing the task
% completing the task
70%
70%
Average click to reach goal
Average click to reach goal
5
5
% of misclick
% of misclick
37%
37%
Average time to complete tasks
Average time to complete tasks
29s
29s
Round 2
Round 2
Control
Control
% completing the task
% completing the task
70%
70%
Average click to reach goal
Average click to reach goal
4
4
% of misclick
% of misclick
49%
49%
Average time to complete tasks
Average time to complete tasks
44s
44s
Variant B
Variant B
% completing the task
% completing the task
30%
30%
Average click to reach goal
Average click to reach goal
6
6
% of misclick
% of misclick
60%
60%
Average time to complete tasks
Average time to complete tasks
55s
55s
Our collective decision
Our collective decision
The user testing results reinforced my confidence that Variant A was a promising approach worth refining further. These insights were shared with the stakeholders, and together, we agreed that it should be developed and tested in a A/B testing experiment to validate its impact.
The user testing results reinforced my confidence that Variant A was a promising approach worth refining further.
These insights were shared with the stakeholders, and together, we agreed that it should be developed and tested in a A/B testing experiment to validate its impact.
Diving deeper
Diving deeper
We've redesigned our category browsing interface, transitioning from the horizontal scrolling system to a dropdown menu that reveals a bottom sheet. This change allows users to view more categories at a glance and easily explore those that were previously hidden.
We've redesigned our category browsing interface, transitioning from the horizontal scrolling system to a dropdown menu that reveals a bottom sheet. This change allows users to view more categories at a glance and easily explore those that were previously hidden.
Existing Navigation
Existing Navigation
New Navigation
New Navigation
We also conducted a usability test on the bottom sheet, focusing on two distinct styles: a grid and a list view.
We also conducted a usability test on the bottom sheet, focusing on two distinct styles: a grid and a list view.
Grid View
Grid View
List View
List View
How does it work?
How does it work?
Upon clicking on the dropdown, users will be greeted by a bottom sheet that smoothly slides upward, revealing the list of categories. Each category text is paired with its respective image, delivering a visually-appealing and intuitive browsing experience.
Upon clicking on the dropdown, users will be greeted by a bottom sheet that smoothly slides upward, revealing the list of categories. Each category text is paired with its respective image, delivering a visually-appealing and intuitive browsing experience.
Motion design
Motion design
In this project, integrating motion design has been a key strategy for educating users about new features and the changes implemented on the page.
In this project, integrating motion design has been a key strategy for educating users about new features and the changes implemented on the page.
Overlay Tooltip
Overlay Tooltip
How might we ensure users notice and understand the new dropdown feature in the category navigation during their first visit?
How might we ensure users notice and understand the new dropdown feature in the category navigation during their first visit?
Category Transition
Category Transition
How might we use motion design to subtly indicate the presence of the swipe gesture without overwhelming users with extra components?
How might we use motion design to subtly indicate the presence of the swipe gesture without overwhelming users with extra components?
Each time the user changes the category, it mimics a swiping motion—subtly reinforcing the existing swipe feature and helping users naturally discover it.
Each time the user changes the category, it mimics a swiping motion—subtly reinforcing the existing swipe feature and helping users naturally discover it.
Future initiatives
Future initiatives
This project serves as a foundation for future initiatives and improvements.
This project serves as a foundation for future initiatives and improvements.
Project 1
Project 1
How might we help users quickly find the items they need?
How might we help users quickly find the items they need?
Project 2
Project 2
How might we efficiently manage a growing inventory while organizing categories for better usability?
How might we efficiently manage a growing inventory while organizing categories for better usability?
Result
Result
User average category visit jumped from 2.2 to 4.42
Sessions that made a transaction after visiting the category page increased by 0.22%
User average category visit jumped from 2.2 to 4.42
Sessions that made a transaction after visiting the category page increased by 0.22%