Artboard 1.png
Redesigning Taco Bell's checkout flow.
Project Summary

Taco Bell noticed a significant drop off (about 20-30%) of users once they reached checkout on both web and mobile web. 

 

Taco Bell also mentioned they wanted to enhance their overall branding to be more ADA compliant.

Team
Group 34.png
Group 33.png

Content Strategist, UX Designer (Me), UI Designer (x2)

Opportunity

To better understand the problem I began looking at the current checkout page and location flow. The first thing I noticed with the current checkout page is how long it is and how it makes the process seem arduous. The location flow seemed to show more information than what was needed.

Untitled-2.png

Current Checkout Screen

Untitled-1.png

Current Location Flow

Design Constraints

After reviewing the current status of location and checkout, we met with our client and the Taco Bell development team to address design constraints.

ADA Compliancy

The current color selection is not ADA compliant.

Development Restrictions

Taco Bell’s developer team was understaffed at the time and moving the site from one platform to another. Our team was asked to not make any complicated changes.

Timeline

Originally 2 weeks.
Later extended to 6 weeks.

Diving into research

To get a better understanding of different ways to configure our checkout flow, I started to audit similar apps. I took a look at UberEats, Grubhub, and Doordash. These are all apps that users currently order Taco Bell from for delivery.

I quickly noticed that these apps go through a similar process as our current Taco Bell flow, but the information is given in a step y step format so its less taxing on the user.

Competitor Audit

Group 71.png

Test Kitchen

To better understand the problem I began looking at the current checkout page and location flow. The first thing I noticed with the current checkout page is how long it is and how it makes the process seem arduous. The location flow seemed to show more information than what was needed.

Frame 1.png
Proposed Solutions

After our research and meeting with the client again, we proposed three solutions that would answer our problems.

Prompt location Sooner

It was inconvenient for users to get all the way to checkout, select a location, and notice that their total has changed.

Separate Location 

Compared to competitors that chunked their checkout process, Taco Bell’s checkout is just one long strip that can feel arduous.

Enhance Color Contrast

Some users didn’t even notice you could select a different time for order pick up. There were also some complaints the visual look/layout of the page.

Cart Pathing

When designing the new screens, it was important for me to make sure that we wouldn't disrupt the cart flow. To prevent this, I worked threw adding our new ideas for screens into the flow to get an idea of how everything worked.

CartPathingTBCXO
New Feature

To tackle the issue of prompting location sooner, the concept of a location module was created. The Location module follows users quietly at the top of the web page. When clicked it takes users through the location flow where they can add or update their location and ordering preferences.

LocationModuel.png
Round One Screens

With only two weeks to work on the entire project, we spent most of that time focused on the UX. When it came to designing, we couldn't solve all of the ADA compliancy issues. These are the screens we presented to the client.

Initial Location Flow.png

First Round Location Screens

Initial Location Flow-1.png

First Round Checkout Flow

Updating the Design System

While reviewing screens with the client, we highlighted potential design changes we would have made if we had more time. 

As a result, we were able to extend our time frame and get a few more weeks to focus on solving for ADA compliancy.

Update.png
Final Screens

Once being able to spend more time with the screens, we're able to update them in a manner that solved ADA compliance issues. This included some aspects such as increased color contrast, larger buttons, and more detailed descriptions.

Final Location Flow.png

Final Location Flow

Final checkout Flow.png

Final Checkout Flow

Design System Lite

We took inspiration and some elements from the app to start building parts that could be applied across the ecosystem.

Since this project had a tight deadline, we weren't able to flush out a design system as much as I had liked to, so we made something we could build off of in the future.

Design Lite.png
Reflection

If I were to have more time with this project I would have loved to spend more time on the design system and apply the redesign throughout the website.

I would've also loved to include more micro interactions to add more of Taco Bell's personality to the site.

CXO_CartAnimation.gif