UXing Panera’s Desktop Menu

BACKGROUND

So the other day I went on the Panera desktop website. I wanted to find something to eat so I could give my lunch order to someone else to place. I scrolled the You Pick Two page and when I found a menu item I was interested in, of course I had to find out the name to give to the person ordering. I always looked at the image first but I found the name I associated with the image wasn’t correct, the item name was actually above the item image.

Even once I realized this and continued scrolling the page I still incorrectly associated the item image with the wrong name. I had to stop and conscientiously remind myself of this every time I scrolled the page. My thoughts tended along, “Oh, that’s not the right name, it’s up here” or “That’s name does match the picture!”

Did anyone else have this problem? I don’t know and I didn’t check, my initial reaction was to click the feedback link and let the design team know the problem, which I did. After doing that I thought “Hey, I presented a problem to the design team and some solutions…what if I tested out those solutions and wrote about the experience!”

DEFINE

Upon further inspection of the website I noted that the proximity of the item name for next item below was in closer proximity than the item image I was focused on which caused me to repeatedly group the wrong information together.

Now if I didn’t know any better or wasn’t paying closer attention I could have very well ordered something I hadn’t intended to, which would’ve been really bad. It’s not hard to mix up a soup and salad, but what if I wanted a Frontega Chicken sandwich then ended up ordering a Cuban sandwich? Every had your mouth fixed for one thing only to find out you got something else? Frustrating. So I thought how can this problem be corrected? HMW provide a better browsing experience and reduce ordering errors for users through a clearer UI?

I thought of two possible solutions to solve this problem

1. Move the menu item name between the image and the action buttons
2. Keep the menu item name above the image but decrease the space between it and the image to improve the proximity

(I had recently finished Joe Natoli’s UI Design course Design Rules: Principles + Practices for Great UI Design so I was actually excited to apply the rule of Proximity to improve the interface.)

Now, my assumption was that people would prefer the item name between the image and action buttons because the most prominent aspects of the page are the images. I also assumed that people would decide on a meal in the following order of importance 1) what’s visually appealing to them, 2) look at the name and 3) place an order. I thought that one of these solutions would prove better than the current implementation and wanted to test these assumptions using an A/B test.

DESIGN & TESTING

Using screenshots from the site I reorganized the site content to fit each proposed solution and then created a Chalkmark Test.

I tested:

A- the current layout

B- the item name between the image and action buttons

C- the item name in closer proximity to the image with added space between rows

To help participants get into the testing spirit I also recreated a scenario similar to my encounter and then asked a follow up question to gain insight into why they choose a particular option.

Test Content

Scenario

You and a couple of co-workers are ordering lunch from Panera. Your co-worker Kathy is going to place your order so you need to let her know what you would like. You visit the Panera site to check out the menu.

Task question

Which menu design do you prefer?

Task Options

A — Current layout

B — Menu item name between image and actions

C — Menu item name placed closer to the images

Follow Up Question

Why did you choose the design you selected?

Full disclosure: I know that Chalkmark is used for first click task based testing. My goal was to provide the three options and have a record of which option was selected and get feedback explaining why participants made their choices. I had access to Chalkmark and it was easy to set up the test based on the purpose I had in mind. Of course I know how to use it accurately.

RESULTS

My goal was to get at least 5 valid results and shared the test link on my social media networks. I ended up having 13 participants complete the test over 2 days, but as a free user I can only see the results for ten.

So how did the options stack up?

Option A — Selected 3 times

Option B — Selected 5 times

Option C — Selected 2 times

(There was supposed to be a nice little chart)

Feedback for participants choosing A

• “I liked the pricing on top of the image”

Feedback for participants choosing B

• “It was easier to see which titles and prices went along with their respective images and buttons.”
• “I can see what I’m going to order, then I see the product details”
• “I like the description and selection option being underneath the picture of each item.”

Feedback for participants choosing C

• “The content was in the appropriate order: heading; price detail; image; actions. unlike (a) with the same order, (c ) had better spacing between rows to differentiate which image belonged to which detail”
• “I like that the description was at the top, then the image, then the choice to choose. It was like going through the motions of a decision. Seemed a more natural flow.”

I was actually surprised by the number of people that chose option A, however the feedback that I got, if any, wasn’t very clear in telling me why people made that choice considering that C also had the pricing at the top of the image so there is room to probe this further, if necessary.

I actually expected option B to be the more popular layout of the three so I was happy to have my assumption validated by at least 6 people. The first two pieces of feedback for option B clarify why participants chose that option, however the third piece of feedback I would definitely like to probe further and understand what was it about having the item and action below the image that resonated with them.

While option C was selected the least number of times I believe it received the most salient feedback that helped me understand why people chose this layout as opposed to the others.

NOW WHAT?

With the results presented, I think I would be in great opportunity for Panera’s design team to improve it’s website UX. I also wonder if Panera’s design team actually had the chance to test layout variations to find what worked best. If I’m not mistaken, I believe that in the past option B was their norm so I’m also wondering what made the design team adopt the current layout. While there are many UX issues to solve, I believe this a small enough fix to to eliminate a lot of unwanted orders and frustrated customers.