Food Ordering Website – User Experience (UX) Case Study

Panda Express Online Ordering

I wrote up a case study a couple of years ago on the Panda Express online ordering system, after a frustrating experience with it. You may watch the SlideShare below in full-screen to see all the notes, or just scroll down to see all the slides on one page.

Skip to where I re-imagined the process


Easy Beginnings

The green circles represent where I clicked/interacted on the page.

So far, everything up to this point had been self-explanatory: starting an order, continuing as a “guest,” selecting a location.

Tricky Timing

After choosing a restaurant location to order from, I had to choose what time I wanted my order to be made. The choices were either “As soon as possible,” or a specific date and time in the near future. I selected the “As soon as possible,” which had the estimated order time next to it (in parentheses). However, this estimated time kept becoming longer as I continued my order and was one reason I left the site.

The slide below is part of the same screenshot above, just a close-up of the right-hand side of the page.

Ordering Food – Not So Easy

Now was time to actually start ordering some food. This should have been fun, and at first, it was quite simple.

UX Food Ordering Case Study - Linda Albertini

Here came the frustrating part. I had finished building my first plate and wanted to order a second one. My eyes gravitated towards the “Add More” button. I assumed that this was where I needed to go to order another plate.

So, I was surprised to find that “Add More” was an invitation to make my first plate bigger (by adding a 3rd entree). I fumbled around in frustration for a while before resigning to clicking “Finish Plate.” I thought this meant the same as “Finish Order” and that I was only able to order one plate.

UX Food Ordering Case Study - Linda Albertini UX Food Ordering Case Study - Linda Albertini

Again, I thought for a moment that my order was done with only one plate. This page looked nearly identical to the page I saw when I first started ordering food. A simple heading such as “Continue building your order” could have helped clear things up.

UX Food Ordering Case Study - Linda Albertini

The slide below is part of the same screenshot above, just a close-up of the right-hand side of the page.

When I first saw the “Order Details” area, I thought my order had already been placed. The “Checkout” button wasn’t very prominent. Some people might miss it and leave before submitting their order.

UX Food Ordering Case Study - Linda Albertini

I added another menu item to my order before clicking “Check Out.”

Wrapping Up

When I was done selecting my food, the call-to-action button read “Check Out.” Although, when I clicked it, I was directed to a page to review my order, which also had a “Check Out” button.

I wonder how many people think they’re done and leave after clicking only the first of the two “Check Out” buttons? Clearly, the first button could be renamed something more fitting, such as “Review Order.”

UX Food Ordering Case Study - Linda Albertini UX Food Ordering Case Study - Linda Albertini

I stopped at this point, not wanting to accidentally trigger an order.

Nice touch: the placeholder text under “Order Instructions” reads, “One soy sauce packet…”  I usually forget to ask for sauce at the restaurant, and the cashier is the one who brings it up. This simulates that in-store interaction.

UX Food Ordering Case Study - Linda Albertini


Re-Imagining the Order Process

Here are some changes I would make within the ordering process, starting from the point after a customer has selected a restaurant location.

Building Food Order

First, I would suggest switching steps “2” and “3,” such that a customer can order food items before selecting a pickup time. This is to avoid the distraction of the original pickup time changing as you add more items to the order.

Food Ordering UX Wireframes - Linda Albertini

The “plate building” screen would be similar to the current one, though I might add an expandable “Order Details” icon.

Food Ordering UX Wireframes - Linda Albertini

The screen below simulates the first plate being completed, with options to add a 3rd entree or drink. The “Add to Cart” button is close to the plate icons, instead of the lower right-hand corner of the screen.

Food Ordering UX Wireframes - Linda Albertini

After a customer adds a plate to their cart, they will have the option to add more items if desired. At this point, the “Order Details” sidebar will be populated with the items in their cart so far.

If the customer is done choosing their food items, they will continue to “Select Time.” Again, the call-to-action button is within easy reach, rather than tucked away in a corner.

Food Ordering UX Wireframes - Linda Albertini

Pickup Time & Payment Preference

Now the customer can select a pickup time. If he or she chooses “As soon as possible,” the estimated time will not change due to the order size. This is because the food order step will have already been completed.

Food Ordering UX Wireframes - Linda Albertini

Here, the customer can choose whether to pay in store or online. If he or she selects “Pay now,” a form with billing information will appear below the radio button. The final call-to-action button is clearly labeled “Submit Order.”

Food Ordering UX Wireframes - Linda Albertini

Confirmation

The customer sees a confirmation of his or her order, along with a reminder of the pickup time and location.

Food Ordering UX Wireframes - Linda Albertini


In Conclusion

Although I no longer dine at Panda Express, out of curiosity, I went to their website to see how they have changed their online ordering system since 2014.

Some of the visual elements have been updated, and the process for building a plate is similar. But, when it comes to continuing to add to your order, it’s just as confusing as before. In fact, more confusing. Whereas previously, the appropriate button to click if you wanted to add more plates to your order read “Finish Plate,” now it just reads “Finish.”* That could be misinterpreted to mean “Finish order,” which would be frustrating if you wanted to place a larger order.

*Update 3/23/17: They changed the button text from “Finish” to “Add to Cart;” much clearer!

What did change was the checkout step. Before, clicking on “Checkout” led to a screen to review order details, where you had to click another “Checkout” button. Now, clicking “Checkout” leads to a form that prompts you for your name, email, and optional password and newsletter opt-in. The next call-to-action button is labeled “Continue.” That seems to make more sense. However, that’s as far as I explored the new ordering system, since I didn’t want to accidentally place an order.

I’m curious as to what kind of feedback the folks at Panda Express are getting with regards to their online ordering platform. I would think a company of that size would have the resources to track metrics such as abandoned cart rates and at which step in the ordering process people give up. Hopefully they will use that data to continue improving their website.



View Portfolio to see more, or Contact Me to schedule an interview.

Comments are closed, but trackbacks and pingbacks are open.