Lately, Taco Bell has been at the forefront in digital experiences for Quick Service Restaurant(QSR) industry. Earlier this year, they took down their website as part of a marketing blitz around their new mobile app. They are at it again, with a new domain ta.co and newly revamped website. The site was designed by Deutsch L.A..
We will be testing the following list of experiences:
- Locations search
- Quick Order Single Item Add to Cart
- Single Item Add to Cart
- Combo Add to Cart
- Drink (variable size item) Add to Cart
- Edit Account
- Add Card
- Add Payment Method
The homepage has fixed (parallax like) banners that slide in and out of view as users scroll down the page. At times, it is buttery smooth, but the section changes felt a bit jumpy. They use the same effect on mobile which I found to be problematic. The animations were slow and choppy which detracted from the experience (Moto X 2nd Gen). My preference for mobile is utility over experience. Meaning, don't sacrifice performance and usability for a complex experience.
The artwork and photography are top notch. Taco Bell has chosen for a more energetic, in-the-moment/friendly approach for their visuals. This stands out from the staged & solid color background imagery that most QSR's are employing now.
They have set a pattern for mobile navigation which slide out from the left. While user/cart related alerts/actions slide out from the right. Another interesting feature that sticks out to me is the search bar. Doing a search on a restaurant page feels a bit out of place, but it is a refreshing change. A search is quicker than clicking around and trying it find an item. There is a definite benefit to it, just seems out of place, but in a good way.
The experience is definitely skewed towards ordering over informational. Every item prompts users to add to order. This is piggybacking off the mobile app. They know users who ordered via the Live Màs App, on average spent 20% more than those who ordered in person. They are trying to do the same with desktop/mobile web.
If a user is on the mobile website, chances are high they are searching for the closest location and want to know store details 1. When doing a search the experience is fairly standard fare. Users can search by zip code and city and a list of locations will be returned. Each location returns store hours, phone number and some icons that represent location features:
One thing to note is the call to action for Set Pickup Location. When a user chooses a location it becomes their pickup location and the button copy changes to Start Order. These are subtle reminders that you can order online or through the app.
Once users start selecting menu items the fun part of the experience kicks in. They employed a card grid, which has become a standard for showing several items on a page. It is a simple layout but does a great job showing the items and available actions for each. One concern I have is with food names and space around them. If they had to translate those to Spanish for instance, how would the card expand or the text adjust?
Taco Bell did a great job handling the customization feature, which is hard to do when you have 10+ options. They use the same card grid that they used for the food items and it is quite effective. This setup works well when you are modifying items that do not need to be quantifiable, such as adding more onions or removing something altogether. The customization grid has a nice pop in/stagger effect which helps lead users down the page where they see available options. To add or remove an item, click/press on it. It is a simple solution for a complex problem. If a user clicks the cart button, the chosen item gets added without any customizations.
The first ordering experience could be dubbed as a quick order. Users don't have to drill down into an individual item, which is helpful for getting through the experience quickly.
The second ordering experience happens when a user drills down into an item. The item page shows the customization grid and a description of the item 2. The only notable change from quick order is that users can now choose a quantity before adding to cart.
The combos experience is well done. Users can not quick select a combo, they are lead into a combo specific page. I like the solution they chose. Combos are incredibly hard to work with, as there are variable sizes and items that users can combine for their combo. On top of that, each item can be customized, increasing the difficulty even more. They did a great job keeping the experience simple and usable while allowing complex decisions to be made. Once on a combo page, users can pick a drink if applicable and customize items that come with it. In this example, I customized a taco and then swapped the last two tacos for a different type. The swapped idea is implemented nicely. It handles a difficult problem by showing a narrowed down list of available items.
The final ordering experience I tested revolves around items that have a variable size. For this experience, I chose a drink. The experience is the same as ordering an item. The only difference being, that users can choose a size and quantity if they are on the item page.
Overall, I would say the ordering experience is quite pleasant. It was easy to add, remove and customize items. The design makes it easy to flow through the experience as it only shows you what you need when you need it. Quick select and search are perfect examples of this. Now that we have a cart full of items, we'll check out 3.
When users hit checkout, they will be prompted to select a location (if they have not done so already). The process is pretty straightforward though I do questions some of the decisions made in the design of the form 4 . The pay screen tells users they can order at any time, which is an interesting suggestion 5.
Once a user pays for their meal, they are sent to a select pick up method screen. When users click Directions on the previous screen, they taken to a bing map that will direct them to the chosen location.
Here is where the experience starts to fall apart. The accounts section is an eye sore. There was so much of a focus on making it a mobile experience, that they made everything 100% wide on a desktop. The tabs stick out like a sore thumb. They are large and overpowering, which takes my attention away from the forms and offers they house.
A major issue I have relates to form design. In particular, the error messages, they are so small that I have to zoom in to read them. These errors could have been displayed as a toast message (banner) that would appear across the top of the screen. It would be far more effective/readable. There is also a lack of proper messaging in their alerts. I tried to enter a phone number (405XXXXXXX) and the form returned an error asking for a valid phone number, but it never defines or tells the user what a valid phone number is. They could really use some Proactive Messaging that defines what the form is expecting. It was a frustrating minute or so as I had to guess what a valid phone number was. As far as legibility is concerned, the type size should be increased by at least a few points. The decision to leave it at the current size is baffling, it's just not readable. There is also some odd behavior on mobile, at least on android:
The month/year input defaults to a calendar picker which has incredibly hard small touch points on android. The picker is utterly unusable. It works perfectly fine on a desktop with standard dropdowns, so I am going to guess that it was an oversight, but definitely something that should be fixed ASAP.
The most glaring problem I noticed with the cards section was the SSL Connection. I am no security expert, but if I am entering card data on your site, I feel safer when I see the green lock icon. Taco Bell's site displays a yellow lock indicator:
Lock icon with yellow warning triangle
Google Chrome can see the site’s certificate, but the site uses a weak security setup (SHA-1 signatures), so your connection might not be private.
Proceed with caution. These are common mistakes in websites' configurations, but that doesn't guarantee that your connection is secure.
This error may be something or nothing at all, but I won't risk putting my card data on a site can not keep my data secure. In an age when user data can be stolen with little effort, why not take the time to make sure the connection is secure? Adding and removing cards was relatively easy. Nothing stands out, which is good, it means I was able to perform my tasks without any major problems.
The rest of the account section is fairly standard. Users can view their past orders and do a quick reorder. The mobile app has an interesting reorder trigger, turning the phone sideways. You can't do that on a desktop (for obvious reasons) so they supply users with a Reorder button. Again, the cards area is a bit lackluster as the tables are 100% wide and do not match the design or column layout of the mobile view. If you are going to optimize the mobile experience why not the desktop version? Maybe it will be part of the next iteration.
A cool idea, in concept, is the Most Ordered items feature. In reality, it is just another push to ordering, but there is potential to make it so much more. Could a favorites feature be released in their next iteration?
The design is a bit of a mixed bag. There is a great sense of hierarchy when clicking around. The colors used are appropriate and friendly. Form design is the site's greatest weakness. Error states and messages need some work. The photography is stellar and gives content a social feel, which is a welcomed change to QSR food shots.
The user flows are very effective and make for a great overall experience, but I have to take some points off for the forms. If your key feature is ordering, then the forms and everything they entail, should be top shelf. The parallax sections are a nice touch, but I could do without them. They end up being a distraction if the connection slows down or if users attempt to scroll too fast. I was able to work through the ordering/locations flows we established with little to no difficulty. The account flows were another story. Undecipherable error codes and tiny type make the experience maddening. Hopefully, they will work these issues out.
At times, the site is very aware of what it needs as far as information so that the user can proceed to next step. A great example is when it forces a user to select a location prior to check out (if they have not done so already). But, yet it fails when it could help users along in filling out the forms. Inline errors that appear as the user makes a mistake would go along way in preventing frustration for the users.
The new Taco Bell is experience is quite good, if you can ignore the form & SSL issues. The decision to focus on mobile hurts the desktop experience which is disappointing. Using elements that span the full width of the screen causes fatigue. Users have to scan the full screen for what they need. The attention to details lacks a bit when it comes to overall design and forms. This is baffling as they are pushing orders as the key feature. If the supporting design and architecture fails, abandonment rates will increase. The biggest takeaway: sending money should be the easiest task a user does and it should always be done on a secure connection. Taco Bell fails at making it easy or secure. These issues can be fixed with some minor adjustments. Overall, I enjoyed the experience and I look forward to seeing what they do next.
Thank you for reading.
Walter Colindres, is an experienced and opinionated UX designer and developer. If you have comments or questions, you can reach him by email.
- And yes, looking at the menu/nutrition. Will get to that soon ↩
- I found these to be a bit wordy and they seemed to be more for SEO than anything else. ↩
- The nutritional info was a bit boring, but you can find it on each item page. ↩
- We'll get to that soon. ↩
- Personally, I don't know if I would wake up and plan to pick up lunch from a QSR. Just saying. ↩