top of page

TACO BELL CASE STUDY

Summer 2023

Adobe Photoshop, Adobe Premiere Pro

As a regular Taco Bell customer, I often place my orders in advance to pick-up. It has many benefits including skipping lines, tracking rewards, customization options, and (ideally) a smooth ordering experience. A minor pain point I’ve hit when ordering on the Taco Bell app is when I add a Cravings Box to the shopping cart. Despite having multiple late nights of mobile orders, I often find myself still making the same silly mistake. In this mini case study, I explore three alternative solutions for this bug.

PROBLEM 

The cravings box, both regular and deluxe, are exclusive online menu items that can only be accessed and redeemed when creating a mobile order. The box is a basically a combo that comes with 3-5 different menu items that you select and can freely customize, as the screen recording to the right depicts.

 

Once any menu item is added to the bag, the “view my bag” button slides up from behind the menu bar. This button to access your order is a similar same shade of purple as the “add” button.

The pain point comes when adding a finalized cravings box to an order that already has items in it. 

The finalized cravings box’s “add” button is at the top of the screen, while my eyes are towards the bottom after finalizing the last selection or exploring the “you might also like” carousal. As I go through and select each cravings box item and scroll down, I assume the “add” button would be under my final selection. This leaves me often instinctively tapping the first purple button I see at the bottom of the page to ”view my bag” directly  rather than clicking “add”. The additional frustration comes from when I am redirected to the bag and try to tap the back button. As the final screens in the screen recording shows, the back button takes you back to the main menu. The back button should direct the user back to the previous screen where you were creating your cravings box thus losing your customizations and selections, leaving you to start your craving's box all over again. 

 

It’s important that the main task flow that is being studied is the following with an item already in the shopping bag so the bag access appears:

OBSERVATIONS

quesadilla.jpg

All menu item pages have same visual consistency and structure for the location of the “add button”. This is successful for other combo options, like the Chicken Quesadilla on the left, because there is a default bundle to order and add directly. Users often do not need to scroll down can use the add button directly at the top of the screen, already in it’s purple active state.

The cravings box page has the same structure, however the “add” button is greyed out at the top until selections have been made as there are no default selections like in a standard combo meal (below, left). After selections are made, the button turns purple (below, right). As the ordering process for a cravings box is unique, the structure of the page should be adjusted accordingly.

IMG_4036.PNG
IMG_4037.PNG

SOLUTION

Though this pain point may not be a common issue for most users, I find it annoying…. 
 

Annoying enough to create this focused case study. For my own practice, I decided to explore three different solutions. 

BACK BUTTON

The most simple solution is to allow the back button to actually go back to the previous screen rather than redirect back to the main menu. Users can then the correct add button correctly and the pain point is relieved, though not necessarily fixed. Users may still tap the wrong purple button, but they will at least not be as frustrated since their customized cravings box has not been lost. 

EXISTING

existingSequence 01_1.gif

PROPOSED

solutionSequence 01.gif

ADD BUTTON 

The next solution proposes a change to the layout of the cravings box screen. Move the add button to bottom of the selections rather than floating at the top of the screen. Now it will be located directly under the last item the user was selecting or customizing where their line of sight is focused.

EXISTING

use to edit.PNG

PROPOSED

IMG-4848_edits solution.png

MENU BAR

The last solution is the most major change. Rather than access to the order only appearing after something is added to the bag, incorporate it into the menu bar. To add access to bag by adding fifth icon in menu bar, eliminates the slide up and the confusion of a second purple button. 

EXISTING

menu bar existing crop copy.png

PROPOSED

menu bar solution crop copy.png

Note, that I am in no way taking credit or ownership for Taco Bell's designs, color schemes, or even this wallpaper background. I created this case study focusing on problem-solving a bug with the influence of their branding style.  

bottom of page