17 Jan 2025
foodpanda
Summary
I enhanced the grocery category navigation on the Foodpanda app, making it simpler for users to switch between categories.
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 initiated this design effort, secured full stakeholder support, and led a workshop in Turkey to align the global team on the final solution.
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
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.
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.
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.
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)
Variant A - Bottom sheet navigation
Pros
More streamlined layout that reduces cognitive load
A dropdown that provides an instant category overview
Saves 44px of vertical space
Better accessibility
Cons
Requires an extra tap to access the full category list
Page swipe to change category becomes less intuitive
Variant B - Floating pagination
Pros
Allows users to anticipate the next or previous category
Offers a clear visual cue for swipe-able navigation
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.
User testing
Control v.s. Variant A v.s. Variant B
Round 1
Control
% completing the task
60%
Average click to reach goal
4
% of misclick
53%
Average time to complete tasks
46s
Variant A
% completing the task
70%
Average click to reach goal
5
% of misclick
37%
Average time to complete tasks
29s
Round 2
Control
% completing the task
70%
Average click to reach goal
4
% of misclick
49%
Average time to complete tasks
44s
Variant B
% completing the task
30%
Average click to reach goal
6
% of misclick
60%
Average time to complete tasks
55s
Our collective decision
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.
Existing Navigation
New Navigation
We also conducted a usability test on the bottom sheet, focusing on two distinct styles: a grid and a list view.
Grid View
List View
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.
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.
Overlay Tooltip
How might we ensure users notice and understand the new dropdown feature in the category navigation during their first visit?
Category Transition
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.
Future initiatives
This project serves as a foundation for future initiatives and improvements.
Project 1
How might we help users quickly find the items they need?
Project 2
How might we efficiently manage a growing inventory while organizing categories for better usability?
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%