Jenine Marquez

Taco Bell noticed that the checkout page on their website (both mobile and desktop) experienced a high drop off rate. When users were asked to choose a store location on the checkout page, the first step on the checkout page, they expected a reduction in user abandonment during checkout of 20%.

Therefore, we were asked to make design adjustments to decrease the checkout drop off rate.

Why the Large Dropoff?

When entering the site, there was a banner at the top encouraging you to choose your restaurant, but you were not required to choose the location until checking out. This would cause users to experience issues like their price suddenly increasing, or items being taken out of the cart because they were unavailable at that location.

Once the user got to the checkout page, users had to scroll through a long screen and choose 1) their location if they hadn’t already, 2) whether they would like to pick up their order now or later (and if they choose later, their pickup time), and 3) their payment method.

The payment method section listed all possible forms of payment listed: (credit/debit card), gift card, Apple Pay/Google Pay, and Visa Click to Pay, so users had to scroll through even more buttons and links to get to the end.

If the long checkout screen didn’t already deter users from checking out, there were also a few links, like Log In or Edit Order, that gave users the chance to leave the page without completing their order.

Our main goal with the CXO web redesign project was to

• Reduce the drop off rate on checkout by asking users for their store location, pickup method, and pickup time at the beginning of the experience, and gating checkout if a user has not selected their location

• Simplify the checkout page to increase the conversion rate and reduce the amount of server calls

  While overhauling the web checkout experience, we also redesigned the UI to meet ADA compliance according to WCAG AA standards.

Design Constraints

For this project, we were given a tight timeline of 2 weeks (which was extended to 6 weeks) to quickly address the location flow. The developer team was also understaffed, so we were asked not to make any complicated design changes.

My Role

My team consisted of the design director (Brandon Mulloy), the senior UI designer (Katie Powell), and a UX designer (Meosha Jupiter). As UI designer, I assisted Katie with making UI updates to the screens that the UX designers touched and keeping the designs consistent and ADA compliant. I also collaborated with Meosha in problem-solving edge cases and scenarios that came up.

For developer handoff, I made sure the files were ready for export to Zeplin. I also helped out with building user flows and the functional specifications document.

Location Module

The first step to overhauling the Locations experience was to overhaul the Location module at the top of the page.

The old Location module had an unclear CTA, so we wanted to make the messaging clearer and use the Locations module as a gateway into path selection.

The location module is dynamic, depending on which step of the path selection process you are on. The screen on the left shows the first location module you see when you first enter the website. As you go further down the path selection process, the location module updates with more information.

Locations Page

We simplified the Locations page and updated the styles to meet ADA guidelines.

• Removed Filters and Favorites to simplify the experience

• Updated icons to be more in line with the brand

Once the user chooses a location, this triggers path selection.

Path Selection

After choosing a location, the user has two more steps in the path selection process: pickup method and pickup time.

Once the user has selected a location, pickup method, and pickup time, the pickup details screen summarizes the choices the user has made. 

After the user leaves the page, the user can click back on the location module to change their pickup details.

Cart

We mostly kept the cart screen intact, but updated the styles to meet ADA guidelines and added a Remove button.

This is the last screen where users can change their pickup details. Once they enter the checkout screen, users have to go back to the Cart page to edit their order or pickup details. This is also the last chance for users to log in before checking out.

Checkout

We stripped almost every single aspect on the existing checkout page and only left the payment details. We removed the pickup restaurant selector, pickup details, the Login link, and the Review Order section, so the only thing the user has to do is pay and place their order.

Instead of having multiple sections within the Payment Method (adding credit cards, adding gift cards, separate Visa Pay button), we condensed everything to a dropdown menu. Users just have to click on the dropdown menu to select their payment method, and the necessary buttons or text fields will expand.

The drop off rate on the checkout page has reduced, since users are being funneled to the locations page instead of straight to the checkout page. The high drop off rate has transferred to the locations page, especially when users are redirected from the Proceed to Checkout page on the cart into the locations page. However, less people are leaving the checkout page, and users have reported less frustration and quicker checkout times.

Our work on web checkout helped inform UX research and explorations for Taco Bell delivery, where we had more time to redesign the checkout experience on the app.

Credits

UX Director: Brandon Mulloy

Senior UI Designer: Katie Powell

UX Designer: Meosha Jupiter

Content Strategist: Maxwell Williams