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
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.
Current Checkout Screen
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
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.
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.
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.
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.
First Round Location Screens
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.
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
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.
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.
