Jollibee Online Shopping Pathway

  • Role: UX Designer / UX Researcher

  • Timeline: 4 months / 2024

  • Sector: Online Shopping / Hospitality

  • Methodology: Competitive Analysis / User Interview / Ethnography

Jollibee Online Shopping Pathway

Role:
UX Designer / UX Researcher

Timeline:
4 months / 2024

Sector:
Online Shopping / Hospitality

Methodology:
Competitive Analysis / User Interview / Ethnography

Challenges

Ordering food should be easy, but users often hit hidden roadblocks. They spend time building an order only to find out the store is closed or an item is sold out. Unclear payment errors and a lack of real-time tracking cause frustration, especially when users are hungry and rushed. These app issues also cause real-world problems, leading to long waits or incorrect orders at pickup.

Opportunities

  • Show store hours and sold-out items early to stop users from wasting time and reduce abandoned carts at checkout.

  • Place active promotions directly on the homepage to save users from hunting for codes and increase overall order volume.

  • Simplify payments with optional 1-click checkout to ease buying anxiety and lower user drop-off rates.

  • Provide real-time status updates after payment to give users peace of mind and reduce customer support complaints.

Methodology

1) Competitive Analysis - Mapping the Baseline

To understand what users expect from a food-ordering app, I began by conducting a heuristic evaluation of major restaurant platforms. Using Jollibee as the primary focus, I analyzed them alongside two other industry competitors to see how they all handle standard digital tasks, like browsing menus, finding deals, and tracking live orders.

While these platforms manage most of the digital tasks smoothly, I realized there was still room for improvement. I discovered two critical areas where the design fell short on Jollibee’s website: the purchase path and the reward system. These two gaps showed me opportunities to create a more convenient checkout process for users, which could lead to a higher conversion rate for the business.

Source: Images from my Competitive Analysis Report Deck

2) Interview - Listening to the Stories

After the evaluation process, we needed to truly understand the human element by conducting user interviews. I established a foundation by creating an interview plan, discussion guide, and participant consent forms to ensure ethical data privacy. After screening 5 core participants and preparing 2 backups in case of unexpected events, I sat down for 1-on-1 sessions to collect thick data from their personal ordering habits and hidden pressures.

Those interviews revealed that ordering food isn’t just a digital task; it is closely tied to people’s emotions and hunger levels. I listened as users described their regular checkout process and their frustrations at spending time carefully customizing an order, only to encounter generic errors or sudden blocks at the very end, or at how promotions affect their decision to order.

To make sense of all these raw conversations, I used an affinity map to cluster the overlapping quotes, behaviours, and frustrations. Sorting these patterns allowed me to look past the surface and isolate the most critical user pain points. With these clear themes in hand, I built a persona and a journey map (will be shown in the discovery section) to track the user’s emotions from start to finish—translating personal stories into concrete design opportunities.

Source: Images from my User Interview Report Deck

3) Ethnographic Study - Observing the Realities

People say one thing in interviews, but their actions in real life often reveal a deeper truth. To capture real-time interactions, I stepped out of the digital space and into the physical world, shadowing customers in their natural environments as they placed online orders.

This field research allowed me to witness their digital experiences break down in the real world: users encountering hidden operational hours, vague error messages without clear solutions, unclear item descriptions, missing pick-up time or tracking progress, and frustration with rigid customization options that forced them to restart the entire process.

However, the observation wasn’t entirely negative. I also captured what was working well—like the convenience of saving payment methods, flexible pickup windows, instant email confirmations, and a straightforward way to apply promotion codes. Gathering both the friction points and the successes gave me the unbiased blueprint of what to improve and what to protect in the new design.

Source: Images from my Ethnographic Study Report Deck

Findings

1) User Persona

From my raw interview data and field observations, I synthesized them into two distinct personas:

The Interview Persona: A tech-savvy, busy professional ordering for delivery, whose main priority is promotion and speed

The Ethnographic Persona: A busy college student utilizing online ordering for quick and seamless in-store pickups process.

Source: Images from my Ethnographic Study Report Deck

2) User Journey

From those personas, I mapped out two user journey histories to track their emotional highs and lows from the moment hunger strikes to the final handoff

User Journey from Interview’s Data

User Journey from Ethnographic Study’s Data

Visualizing their shifting emotional states—from “hangry” menu browsing to checkout anxiety—allowed me to get where current restaurant apps break down. By charting these friction points step-by-step, I was able to translate their pain points into design opportunities future product’s improvements.

For example:

Pain Point:

User are anxious about losing progress when switching locations

Opportunity:

  • Make the location selection a mandatory part at the beginning of the users’ journey.

  • Temporarily save cart contents and prompt users to confirm cart updates after location changes.

Some details of the Ethnographic Study journey map

Next Steps

When this project transitions to a design phase, the priority will be to improve the checkout journey. I will focus on translating our research insights into a seamless flow and interface that prevents error from the beginning of the process, highlights error messaging, exposes promotions upfront, and simplifies the final payment steps. 

Takeaways

The power of mixed methods

Combining user interviews with physical ethnography allowed me to capture operational details and real-time issues, which are much harder to identify in a heuristic evaluation or a standard interview. Stepping into the physical restaurant for the ethnography study taught me that digital apps are deeply tied to real-world environments. You cannot fully fix an online ordering system without studying how people use it.

Business and user goals are connected

As a researcher, I realized that user frustrations (such as hidden store hours or confusing payment screens) are operational leaks that lead to lost revenue and abandoned carts for the business. Solving one naturally fixes the other.

Research saves time

Investing time in an interview plan, discussion guide, and a clear screening process helps a project avoid wasting time later. It ensures every piece of data collected is high-quality and reliable, creating a strong foundation for future design decisions.