Chick-fil-A One

I worked as a UX designer on the customer-facing ordering app at Chick-fil-A. My primary responsibilities were the cart, checkout, and order fulfillment. (Basically the cart and your whole experience after that!)

My Role & Responsibilities

• User Research
• User Interface Design
• User Testing

Software & Tools

• Sketch
• Invision
• Amplitude

1. Customers knowing exactly what they ordered. When it comes to people’s food, it’s important that their order is correct. Not just on the restaurant side, but that the customer themselves doesn’t think they ordered a Sprite when they actually selected a Hi-C in the app. The existing cart shows you the basics, but you have to dig quite a bit for specifics. It shows that you ordered a meal but it’s not immediately obvious what’s part of that meal. Getting everything up front because there’s nothing more stressful than trying to add to your order and make sure everything is correct as your husband is driving too fast towards the drive-thru lane. Ask me how I know.
2. Improving reward redemptions. What is that toggle on the cart? No one knows. The app says I can redeem an item in my order, but I don’t know how many points I have to redeem which item until I click that bar at the top.
3. It’s…meh. The good thing when you’re designing for a food-related app is that there are so many engaging visuals to include, and the other designers and I were not shy about adding photos and icons and colors to really draw your eye. The cart doesn’t do much of that. Even the images we do have here are small and don’t get you excited about what you’re about to eat.

There is a feeling that other designers know when you make something, sit back and look at it and say “Look how pretty it is.” This was one of mine.

I kept the Show/hide details button for really specific order information (lite ice, extra salt, etc.) but if you’re just confirming you selected the right drink or side there’s no need to tap. I also changed it to a button, to help differentiate it from all the text on this screen.

I was able to surface calories, too. It was present on item pages when you’re making the order but the fact is more and more Americans want to know what they’re eating as a whole, and I don’t want to have to do math to figure out how many calories my meal is.

The rewards though I am particularly pleased with. We will only show you the button to redeem a reward if you currently have enough points, AND it’s in context so there’s no guessing which items from your cart you’ll be able to redeem. The previous toggle confused a lot of people (new staff included) so I made it a longer toggle to show exactly what the options are. Plus a display of how many points you currently have, so you can decide if you want to use your points now or potentially save up for a bigger item.

But what I am the most proud about on this page is the hierarchy. We wanted to show a lot of information and do so many things, and I believe I was able to organize it to make everything clear and easily understood at first glance.

It’s always nice when the developers look at designs and say they look easy to implement. Most of what I did here were UI and hierarchy changes, nothing that really needed much dev effort.

We implemented the inline button for redeeming rewards as part of a phase 1, and reward redemption increased 13%.

Unfortunately I left before I could see this fully implemented, but as a user of the Chick-fil-A app myself I saw it when it went live.

As for how successful it is, the cart still has the UI I made – 4 years later!