Empowering Users to Earn: A Clearer Path to Foodpanda Rewards
Improving the user experience with a strategic onboarding flow was key to demystifying a core feature, boosting user confidence, and driving engagement with the loyalty program.
This project was driven by a core user problem: customers felt confused by Foodpanda's "Challenges & Rewards" feature and were consequently missing out on its benefits. As the lead Product Designer, my focus was to transform this user frustration into an experience of clarity and empowerment. I led the end-to-end design of an intuitive onboarding flow, navigating the additional challenge of a feature with concurrent releases. Through a process of user research, internal collaboration, and iterative design, we created a simple, step-by-step guide that was validated directly with users. The final solution gives customers the confidence to understand the program, earn rewards, and get the most value from their loyalty, directly addressing their initial pain points and making loyalty fun and easy as intended.
Introducing
Loyalty’s New Onboarding
Presentation Deck
The Context and Challenges from the Project Journey
Understanding the context in which it unfolds is key to appreciating its complexities. In this deep dive, we explore the unique challenges faced throughout the project journey—highlighting obstacles, decision points, and lessons learned that shaped the outcome. By dissecting these details, we gain valuable insights that can guide future initiatives toward greater success.
Understanding the Current Challenge
This project began with a fundamental question: "How might we convey loyalty program mechanics in an easy-to-understand manner?"
Foodpanda's "Challenges & Rewards" program, a key feature for fostering customer loyalty, was underperforming. Despite high traffic, we saw low click-through rates and minimal interaction. This was compounded by an additional layer of complexity: the feature itself was a moving target, with multiple versions and new releases being developed concurrently. This meant our onboarding solution had to be flexible and adaptable.
The core problem, confirmed by analytics, was a critical disconnect: users were not engaging with the program because they didn't understand how it worked.
The current user journey to engage with the loyalty program via the FAB is disjointed. From the Restaurant Listing Page, a user’s only entry point is the floating FAB. Tapping this takes them directly to the 'Challenges & Rewards' page. This abrupt transition interrupts their primary task of browsing for food and forces them into a separate part of the app without clear context or incentive, which our data suggests is a primary contributor to the high drop-off rate.
Quantitative Data: The user funnel reveals a critical problem. Out of 1.7 million users exposed to the loyalty program, 492,000 clicked the FAB entry point. Of those, a staggering 309,000 users (63%) dropped off immediately without taking any further action. This proves the majority of clicks are not intentional. Furthermore, A/B testing shows the presence of the FAB correlates with a drop in our key health metric, mCVR2, by 0.5% to 1% across all segments, which is driven by a decrease in users visiting other menu pages from the RLP.
Qualitative & Ergonomic Insights: User research confirms the FAB's design and position interrupts the core browsing experience. One user's feedback encapsulated this perfectly: "I actually accidentally discovered it... Everytime that I open the app it's there and it blocks the screen." This is further supported by thumb zone mapping analysis, which shows the FAB's static position lies directly within a natural, high-interaction area for both left- and right-handed users. This ergonomic insight proves that most clicks are accidental and not driven by user intent. The button's design also fails to portray a loyalty/rewards product, adding to the confusion.
Hypothesis
We believe that by giving the flexibility to remove & dismiss the FAB icon, we will increase the customer browsing experience. We also trust that by introducing a relevant FAB design and positioning on the screen, we will decrease the accidental taps & increase the quality of leads entering the loyalty flow, improving the FAB experience.
Product Requirements
To solve the identified issues, the core product requirements are:
Updated FAB Icon Design: The FAB icon must be redesigned to better communicate its purpose and align with our brand identity.
Temporary Dismissal: The system must allow users to temporarily dismiss the FAB from the Restaurant Listing Page for an uninterrupted browsing session. The FAB should reappear on subsequent app visits.
Permanent Hide Option: A toggle switch must be implemented within the Settings page to allow users to permanently hide the FAB.
Confirmation Modals: The permanent hide/show functionality in Settings must be accompanied by clear confirmation modals to prevent accidental changes.
Business Impact and Goal
The primary goal of this initiative is to improve the core browsing experience and the quality of user engagement with our loyalty program. By reducing user frustration caused by accidental taps and intrusive design, we aim to decrease the high drop-off rate on the Restaurant Listing Page. This will lead to a better overall user experience and ensure that clicks into the loyalty program are intentional and come from genuinely interested users. The long-term business impact will be increased customer satisfaction, better quality leads for the loyalty program, and a more positive perception of the app's usability.
Success Metrics & Indicators
The success of these enhancements will be measured by:
Decrease in Drop-off Rate: A measurable reduction in the 63% drop-off rate from the Restaurant Listing Page.
Improved Engagement Quality: An increase in the conversion rate of users who intentionally tap the FAB and proceed to engage with the loyalty program.
Feature Adoption: Tracking the number of users who utilize the permanent "Hide floating button" feature in Settings, providing insight into user preferences.
Qualitative Feedback: Positive feedback from user testing and app store reviews regarding the improved browsing experience and control over the interface.
Design Exploration, Ideation & Execution
Areas I led in:
Benchmarking & Market Analysis
Design Exploration
User Research: Perception & Comprehension
Asset & Copy Request
Design Handoff
Final Alignment
Benchmarking & Market Analysis
To inform our design strategy, we conducted benchmark research on how leading e-commerce and social media apps like Trip.com, Shopee, Shein, and Facebook Messenger implement Floating Action Buttons. Our analysis revealed several key interaction patterns and opportunities:
Movability is a Standard Feature: Many best-in-class apps (like Shopee and Facebook Messenger) allow users to move the FAB around the screen, preventing it from permanently blocking content in one area. This directly addresses our users' feedback that the current static FAB "blocks the screen."
Dismissal Mechanisms Vary: We observed different methods for dismissing FABs. Facebook Messenger, for example, uses a clear "drag to dismiss" interaction, offering a temporary way to remove the button. This validated our hypothesis that providing users a way to hide the FAB is a common and user-friendly pattern.
Animation & Context are Key for Engagement: Successful FABs, like those on Shopee and Shein, use subtle animations and clear text descriptions (e.g., "shopee prizes, win big prizes") to add context and elicit curiosity, turning the button from a potential distraction into an informative discovery point. This highlighted a key weakness in our current icon, which lacks context.
Thumb zone mapping analysis: To understand why our current FAB underperforms against these benchmarks, we conducted a thumb zone mapping analysis. This ergonomic insight revealed that the FAB's static position lies directly within a natural, high-interaction area for most users, providing the crucial 'why' behind our quantitative data. This proves that the high click rate is accidental and that providing the flexibility seen in competitor apps is essential to fixing the core usability issue.
Design Exploration
Our design process involved several rounds of exploration to ensure the final solution was well-considered and robust.
Visual Concepts & Composition: I began by exploring different placements for entry points and integrating our unique 'Joy (panda)' shapes to create a strong brand connection. This was followed by deep explorations into color palettes and compositions to find the most attention-grabbing yet user-friendly combination. During this phase, it was noted that our initial concepts felt too "in a box", and that a better solution would be to use illustrations that combined the panda with universal elements like coins to look less like a chatbot and give more context.
Interaction & Context: I explored the FAB's behavior, testing versions with different animations and text labels (e.g., "Earn Points" vs. "Challenges & Rewards") to see which best set user expectations. This included creating prototypes to test floating text labels versus static ones to find a balance between providing information and avoiding distraction. We also considered practicalities like ensuring the design could handle two-line titles for language translations.
Edge Cases: I designed clear UI states for users with zero points and created specific error messages for scenarios like attempting to use an already-redeemed voucher.
As this project is very visual-heavy, with the FAB's appearance being central to solving the problem, I focused my attention heavily on user research. This was critical for moving beyond assumptions and gathering concrete data on how users interpret different visual and copy treatments. This research-first approach allowed me to craft a more effective and data-driven Asset & Copy Request for the branding team, ensuring our final design was based on proven user understanding, not just aesthetics.
User Research: Perception & Comprehension
To validate which of our new FAB designs best set user expectations, we conducted an unmoderated design evaluation survey.
Objective: To compare the user perception and accuracy of two different entry-point designs ("Earn points" vs. "Challenges & Rewards").
Methodology: We ran a remote, unmoderated design evaluation survey using the UsabilityHub panel. To avoid bias from existing users, we targeted two groups of non-foodpanda users. We chose Singapore (n=20) and the Philippines (n=20) as our test markets because both are large, English-speaking markets where we suspected there might be some cultural or regional differences in understanding, which we wanted to capture. Each group was shown only one of the two design variations.
Key Survey Questions:
Which screen do you think this icon brings you to? (Multiple Choice: Loyalty programme, Games, Vouchers, etc.)
What about the icon makes you think you will be taken to that screen?
What action/activity do you expect to do on that screen?
Findings
Our user research compared two new FAB designs, "Earn points" and "Challenges & Rewards," across Singapore and the Philippines. Both designs were an improvement over the original icon.
The "Earn points" variation was clearly understood as a "loyalty programme," particularly in Singapore where 7 out of 10 users made this association.
The "Challenge & Rewards" variation was more closely associated with "playing mini games" to get rewards in both markets.
We also received consistent visual feedback that the pink icon could be hard to see against pink banners, with users suggesting a different color to highlight it.
Insights & Actions
Clarity is Key: The key insight is that while the "Challenge & Rewards" copy sets a gamified expectation, the "Earn points" copy provides the clearest and most direct link to a traditional loyalty program.
"Earn points" is the Safer, Clearer Direction: For our initial MVP, clarity and straightforwardness are paramount. While the gamified aspect is interesting, the "Earn points" variation more reliably sets the correct user expectation for a loyalty feature. Because we are launching in 11 different countries, using the most universally understood concept is crucial for easier translation and consistent comprehension across all markets.
Actionable Design Direction: This insight was crucial. It gave us a clear direction to select the "Earn points" copy for the final design to ensure maximum clarity for users. This also informed the Asset & Copy Request to explore different colors to ensure the FAB stands out against the background.
Asset & Copy Request
A formal request was made to the branding team to create two variations of the new Loyalty FAB, each with single-line and double-line title capabilities.
Asset Guidelines: The new visual must address concerns that the old FAB looked like a chatbot. It should include elements like badges or coins from the "Challenges & Rewards" page to create better visual association, and the top-right corner must be kept clear for a dismissal button.
Copy Guidelines: The title must be a minimum of 10pt for visibility and accommodate both single and double-line lengths for translations.
Design Handoff
To ensure a smooth and accurate transition from design to development, a comprehensive handoff package was prepared. This included high-fidelity mockups and detailed design specifications.
Notification Flowchart
The solution introduces two primary user flows to manage the FAB:
RLP Flow: A user on the Restaurant Listing Page can tap and hold (or a similar gesture) to dismiss the FAB. The FAB will be temporarily hidden for that session and will reappear when the user next visits the app, allowing for a focused browsing experience without permanently losing access. Educational modals will guide users on how to permanently hide the button after multiple dismissals.
Settings Flow: A user can navigate to the Settings page via the side menu, locate the "Show floating button" toggle, and turn it off. A confirmation modal will appear to hide the button. If they later wish to re-enable it, they can return to the same toggle, which will trigger a different modal confirming their choice to show the FAB again.
To ensure the dismissal and hiding logic was clearly understood, I created a detailed FAB Dismissal Notification Flowchart. This crucial document served as a blueprint for developers, mapping out the entire user journey and its conditional logic. It specifies when to show the educational modal (e.g., after the second dismissal in a session) versus the more direct confirmation modal (in Settings), and clarifies the session-based rules for when the FAB should reappear. This flowchart was vital for preventing ambiguity and ensuring the final implementation matched the intended thoughtful and non-intrusive user experience.
Screen Flow
To provide a complete picture of the user journey, the handoff also included comprehensive screen flow diagrams. These visuals mapped out the end-to-end experience for both the main Restaurant Listing Page (RLP) flow and the Settings flow. They illustrated every step, from a user first entering the RLP and dismissing the FAB, to navigating to the Settings page from the side menu, toggling the FAB off, and interacting with the subsequent confirmation modals, ensuring the development team had a clear visual guide for the entire feature.
Design Specifications & Movability Logic
The design handoff included a detailed set of specifications to ensure screen parity and functional clarity. This involved providing final FAB specs, including assets designed to cater for language translation which may require more space. A key part of the handoff was defining the logic for the FAB's movability. I created a Protopie prototype to demonstrate the interaction and provided visual specs outlining the proposed start point, the defined movable zone (anywhere on the screen below the search bar), and the boundaries for the highest and lowest points the FAB could be dragged to.
A/B Testing Plan
To quantitatively measure the impact of the new FAB's flexibility, we will conduct a live A/B test with the winning design from our perception test.
Goal: Assess the relevance of the FAB by identifying the percentage of dismissals versus movements.
Hypothesis: We hypothesize that users prefer the flexibility of moving and eliminating the entry point, and that this new interaction model will reduce accidental taps.
A/B Test Setup:
Control Group: Users will see the new FAB design but without the ability to move or dismiss it.
Variant Group: Users will see the new FAB design with full movability and the option to dismiss it.
Metrics: The primary metric will be the percentage of users in the variant group who dismiss the FAB versus the percentage who move it. Health metrics like mCVR to the "Challenges & Rewards" page will also be monitored to ensure no negative impact on performance. This quantitative data will be supplemented with qualitative observations from UXCam recordings.
Final Alignment
Before proceeding to development, I facilitated alignment sessions to present the complete, data-backed design solution to key stakeholders and the wider design team. This meeting was crucial for showcasing how the proposed enhancements directly address the initial problem statement and business goals. By walking through the research findings, design explorations, and the final proposed user flows, we secured the necessary buy-in and ensured the entire team was aligned on the vision and ready to move forward into the development phase.
Final Thoughts
This project is a perfect example of how a seemingly small design detail can have a major impact on the user experience and the business. While it started as "fixing a button," it became a fun and complex exercise in understanding user behavior and using data to make informed decisions. My role as the product designer was to champion the user's voice, simplify the problem for our development team, and create a solution that turns a point of frustration into an opportunity for delightful interaction.