Redesigning Jollibee Delivery: The Overview (Part 1)

An unsolicited redesign project because I love Jollibee so much

Yup, it’s another unsolicited design article. Before anybody complains about it, please take some time to read the constraints and considerations that I faced with for this case study. ✌️😁

Being hungry after midnight can get difficult sometimes so I tend to order at Jollibee when I’m awake during the wee hours. As much as I like their brand and their selection of food, their current online delivery system really needs some major tweaking in my opinion because the website’s just a visual and functional disaster.

Introduction

Objective

Let’s pretend I work for Jollibee as a UX Designer or Consultant, my goal for this case study/unsolicited redesign project is to review the current Online Delivery System and give approaches to make the overall experience better.

On a personal note, I want to learn better methodologies in UX while I level up the things that I already know so I might as well consider this as a mental exercise.

Scope

Here in Part 1, I’ll focus on the “Problems”, the Constraints and the Website Flow while discussing my Experience on the site.

I’ve divided this case study into 2 parts to segregate my thoughts more effectively while making it into readable, bit-sized chunks of information. I know no one wants to read an article that’s more that 10 minutes; I’ve learned my lesson from my previous case study.

Constraints

Here are some of the constraints that I faced while I was conducting this study. I believe that there are more but these are some that I can think of off the top of my head:

1. I’m not affiliated with the organization so there’s a chance that I might run into some trouble for doing this. (Crossing my fingers I won’t)
2. I don’t have any business objectives, web statistics, users’ feedback and/or testing data on hand hence everything I’m sharing are only my assumptions.
3. I’m not aware of what the stack/tech of the website is so I have no idea what the site is capable of doing inside out.
4. I don’t have access to the brand guidelines so I based the copy and the identity on my interpretation and what’s available online.
5. I have no idea what the whole sitemap is since I’m limited to seeing the pages that I’ve traversed while ordering online.
6. I had to skip some pages because the site did not have a secure connection — must be an SSL certification issue. There are some pages where I got stuck when I was traversing through the pages.
7. I’m limited to what I know now on all things UX so there’s a chance that I might do unnecessary steps or I might miss a one or two so it’d be much appreciated if anyone can point those things out to me.

Now that that’s settled, let’s move on to the more interesting parts.

Overview (Current Website)

The “Problem/s”

After going through the site, here are some “problems” that I think were most evident throughout the online ordering experience:

• The visual design is all over the place. Like fo real!
• Some of the copy are somewhat alien or ambiguous.
• A lot of pages are either inconsistent and/or redundant.
• A number of functions in the site aren’t working properly.

Website Flow

I generated a flowchart (Figure 1.1) after going through the available pages. I don’t think the chart I made covers all the pages within the site but I believe it has all the major pages that a customer can go through when ordering.

FIGURE 1.1 — Current website flow

There are a number of redundant pages in the site so I squashed the recurring ones into one process e.g. the Customer Profile process. You can try referring to the flowchart while you traverse the site on your own, though I won’t guarantee that the chart that I made will have the same flow as what you will experience.

My Experience

I’d like to share my experiences after walking through the site and ordering more than 5 times over 4 days. Yup. That’s a lot or ordering but I got a few insights out of that plus my tummy’s happy.

FIGURE 2.1 — Landing page (©Jollibee Food Corporation)

• Upon landing on their page, I was bombarded with over-saturated elements and high contrast images that made the viewing itself an eyesore. It’s even worse with a non-Retina screen.
• The overall visual design is hard on the eye across all pages because of how the information hierarchy, layout, palette, and typography was executed or lack thereof. P.S. Vag Round Bold is definitely not a good UI font.
• The only call-to-action apart from going to the links on the footer is the “Select Location” input. The previous version of the website did not ask for the location. During later processes, the items that are available on the menu are reflected in the location that you will input.

FIGURE 2.2 — Passcode and email confirmation errors (©Jollibee Food Corporation)

• I tried making a new account but the passcode verification through text message doesn’t work at all while the link in the email verification only sends me a blank page that says “Invalid Access!”. The only way I got to log in is by using my old account.
• The “Forget Password” function in the landing page just does not work AT ALL. All you get after putting in your email is a loading button and that’s about it.
• After logging into my old account, I was immediately prompted to add a new address to my address book. All the entries I had in my old account were gone. Bummer.

FIGURE 2.3 — Profile page (©Jollibee Food Corporation)

• There’s no way to change the impotant information in your profile so you’re pretty much locked in to your account with no way of changing your phone, email, nor vicinity. There’s no visible option to delete your account too.
• Just for kicks, I tried clicking on the logo to see where it’ll take me but lo and behold, I was immediately logged out of my account which meant I have to start at the Landing Page all over again.

FIGURE 2.4a — Menu Selection page (©Jollibee Food Corporation)

• The menu categorization is decently sorted but a little bit of card sorting can organize things better. Categories such as Breakfast and 24–7 items can be shown during designated time slots instead of it being shown every time.
• I appreciate the site’s ability to let you view what you have in your “Cart” while choosing items by toggling the “Show Order Cart” button at the top-right corner but how it expands kind of adds more traffic to the already content heavy page; there’s no form of separation among elements.

FIGURE 2.4b — Item options modal (©Jollibee Food Corporation)

• A modal pops out when you’ve selected an item to let you know that there are options that you can choose. Some of the functions like the dropdown gets wonky in other browsers like Safari. Also, what the heck is “DGL”? (I know it’s Double Go Large but still.)

FIGURE 2.5 — Checkout page(©Jollibee Food Corporation)

• When you choose to Order/Checkout as a Guest, you won’t be asked for your Delivery Address and Contact Details until after you’ve chosen the items that you want to order. Since the Delivery Address dictates the availability of the items, there’s a possibility that you’ll encounter an item that’s not available when you’re already in the Checkout page which means you’ll have to go back to the menu to choose another item.
• In the Checkout page, you can choose to pay in Cash, by using Gift Certificates, by using a combination of both, and by using your Jollibee Happy Plus card. There’s an option to order your food in advance too; just put in the date and time.
• What I don’t understand is the Jollibee mascot in the Checkout page. Other than it being a distraction and it covering some buttons, it serves no functional purpose to the overall experience.

FIGURE 2.6 — Unfinished orders even after delivery (©Jollibee Food Corporation)

• After ordering my food, I was updated throughout the process from Order Processing up until the food was delivered but it only occurred during my ver first order. All orders succeeding the first one just stayed in the My (Pending) Orders page. One of my orders is already over 48 hours late LOL.
• Cancelling the order is not an option within the site. In my opinion, there should be at least a 2–3 minute grace period for when a customer wants to cancel the order upon checking out or at least until the order status is “Cash Complete”.

That’s about it for my experiences. I still have a lot of experiences that I can mention but I highlighted the parts that I think are relevant as an ordering Customer of the site.

Initial Thoughts

Based on only the landing page, it kinda looks like it’s for promoting new products instead of actually ordering online; I mean look at how large the carousel is! Not just that, with a buggy and convoluted system, I doubt that people will be enthusiastic with ordering through the site.

With how the site is currently running, I’m not sure what the company’s goal for the site is right now. I’m not convinced that they tested this with actual target customers as well.

To be continued…

Thanks for reading through the first part of the cast study! I’ll end the first part here and continue reviewing the major pages of the system and sharing some of my personal approaches to make the experience a bit better on the next post.

On Part 2, I’ll be focusing on the Challenge, sharing some Approaches, giving a Conclusion, and recommending Other Topics that can be researched — maybe giving some notes in the end.

Thanks again and see you on the next installment!