17 Jan 2025
foodpanda

Categories Navigation

Categories Navigation

Categories Navigation

Summary

Project overview

Project overview

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.

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.

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

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.

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

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

  1. Increase the no. of distinct categories user visits per session

  2. Sessions that made a transaction after visiting the category page

  3. Increase average amount spent by users (ABV)

Explorations

Explorations

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

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

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%

The end.

Thank you for reading this. 😊

For the best experience, use a desktop browser.