Improving Chipotle’s Mobile Ordering Experience
Designing for Chipotle is every bit as fun as you could expect. Working with a company as passionate about fresh food as it is about sustainability made this project a designer’s dream.
Chipotle is a company that’s always raising the bar to make their customers (and environment) happy; it’s no wonder that they’re one of the top ten fastest growing restaurant chains in America. That’s why when something can be done better, Chipotle is the first to make it happen.
I worked alongside Chipotle’s e-commerce team and the Sequence design team in the role of interaction design intern.
Most of the time, customers using Chipotle’s mobile ordering app opted to “pay in-store” instead of paying with their credit cards. This slowed things down both for customers who had to wait in line to pay, and crew members who had to stop what they were doing to help them checkout.
The chief financial officer came to Sequence for a solution to encourage customers to pay with credit cards when they ordered using the Chipotle mobile app.
I worked closely with Andrew Afram, a senior interaction designer, to ideate, iterate, and design potential solutions for this problem. Andrew and I had worked on over eight projects for Chipotle previously, so we were at a point where we had a deep understanding of the Chipotle brand, the personalities of the stakeholders, and each other. All of this contributed to finishing this project ahead of schedule. We also worked with Jeff Tsang, a visual designer who created the screens for our prototype. Go team!
Following the project kickoff with stakeholders, the team got back to the whiteboard, made a fresh pot of coffee, and clarified the project goals. They were:
Increase percentage of orders that use credit card as the payment method.
Streamline order pick-up experience in restaurants.
Improve ease of adding a credit card to your account.
Streamline the checkout flow.
Investigate how credit card scanning can be incorporated into the app.
Before jumping to design solutions, I wanted to pinpoint possible problems, and to understand them, I needed a total understanding of the current state of the app. At this point, Andrew took the opportunity to explain to me an unwritten rule of Sequence, and it’s called “grock.”
understand, appreciate actively and profoundly, fully comprehend; also, to think about, listen to, play, or contemplate something or someone with full love and understanding, even ecstacy.
“MCEscher really grocked Goedel’s theorem.”
He explained that the best solutions happen when you “grock” the client personalities, their business goals, and the current state. At this point, we had a great understanding of the client but not how the checkout flow fit in the context of the rest of the app.
Armed with this, I thought it best to utilize a schematic of the entire app that I created. We bet that it would come in handy, if not for this specific project, in future Chipotle projects. After all, how do you know where you’re going if you don’t know where you’ve been?
What it meant to us at Sequence is that our best work, the magic, the “aha” moments happen when we achieve grock with the client and project. By the end of my three month internship, Andrew and I grocked each of the stakeholder’s personalities, and were able to over deliver.
The design approach we took for this project was a little different than others. Since we had a good understanding of the app, and the current version was already designed, we decided to jump into wireframes and then run a remote usability study to gauge how well customers used our design.
Firstly, we dove into streamlining the checkout flow for users who already had a saved credit card.
Utilizing the schematic and flows, we were able to identify superfluous steps in the checkout flow. We crunched down the number of checkout steps from three to two in hopes of making the checkout process faster and easier for the user. We removed the payment screen (step 2) and instead displayed the saved card on the checkout screen with the added option to change it. We kept the visual paradigms consistent, and the payment method module appears almost identical on the new checkout screen as it did on the original payment screen.
Later, we would see actual users go through our proposed checkout flow via an unmoderated remote usability study.
Next, we dove into streamlining the checkout flow for users who did not have a saved credit card.
A lot of research has been done, and we know that people tend to choose the default option. By analyzing the schematic and flows, we found that the original design was actually encouraging users to pay in-store! The default option was to “pay in store,” something we didn’t want. Equipped with this, we explored possible solutions and considered the idea of using an intercept to upsell the idea of adding a credit card to checkout — something the client mentioned in a previous stakeholder meeting.
Andrew and I went back to our “creative war room” to get the thoughts out of our heads an onto the whiteboard.
This reminded me of the design funnel, inspired by Bill Buxton and Stuart Pugh. The design process is one of elaboration and reduction. In this project, we lead with information architecture (research, sketching, and wireframing) and stayed on as “consultants” when the visual designers picked up where we left off.
We came up with a bunch of ideas and narrowed it down to two we thought were absolutely best. Andrew also took the opportunity to explain to me why and how to present our designs to the stakeholders.
Before starting at an agency, I thought that as an interaction designer, 90% was about being deep in your toolset and conducting user studies. One of the most important things I learned is that design is only as good as how well it’s communicated. The Chipotle customer was not our sole “user” we were designing for; the stakeholders, in a sense, were also our “users.”
I learned that telling the narrative and sharing the project background was necessary before sharing designs with stakeholders. The deliverables we share with clients need to be as good as we can make them. If the client is pointing out that we missed a period here, and left out a title there, it would undermine our proposed design solutions and our impression of being the experts stakeholders partnered with.
Coming back to the design funnel example, we narrowed down our potential solutions to share two designs with stakeholders: one with a credit card intercept and one without, and we would (hopefully) see which would do better in the usability study.
All of the design decisions in this flow were made in hopes of accomplishing our main goals of moving users faster through the flow and encouraging them to check out with their credit cards. We made the assumption that the less steps it takes the user to complete their task, the better. The two flows are exactly the same with the exception of adding the credit card upsell intercept before step two in the second flow. With this new design, we were able to cut down the steps of the flow from five to three, while getting rid of the default “pay in-store” option.
Now, my favorite part: seeing users test our new designs. To make our study valid (making sure we’re testing exactly what we intend to test), we wanted to eliminate as many variables as possible, so we didn’t want to run the test with our wireframes. Jeff, an excellent visual designer at Sequence, took our wireframes and made some production quality PSDs for our test.
We agreed to use UserTesting to run an unmoderated, remote usability test. We used this because we wanted to learn fast about our designs, and it’s a tool we used in the past. It’s the kind of thing where you initiate the test, leave work, and come back in the morning with recordings of users testing your designs.
We were extremely careful about the test script because we didn’t want to ask any leading questions. When coming up with the script and questions, I kept mentally referring back to one of my favorite user research books, Steve Portigal’s Interviewing Users. Although Steve’s book was focused on in-person interviews, his methods of forming questions and uncovering actionable insights were still applicable.
For the test, we asked the user to order a burrito with extra black beans for their friend Nick. After that, they were asked to proceed through the flow and send the order, while thinking aloud. After we wrote the test script, I dove into learning how to prototype with Marvel, and deployed the test. It was important for us to present scenarios for our test participants to walk through because it tested a few different changes we made to the current design. As a designer, it’s important to find a balance here — if you ask too little, you may learn but not as much as you could have. Ask too much, and the test breaks down.
I woke up the next morning excited to see how people reacted to our hard work. Firstly, we learned that users understood and moved through the flow with ease. All ten users were able to make it through the flow from beginning to end, with many of them checking out in under two minutes. We also learned that the credit card intercept didn’t seem to make much of a difference. It didn’t stop users from checking out or even slow them down. Since users were neutral to it, our recommendation to stakeholders was to omit it from the flow because the less steps for the user, the better!
Some of the qualitative feedback we received was overwhelmingly positive. Users kept saying that our app was making them hungry and they wanted to add more stuff to their burrito (even though our prototype didn’t even allow for this). One user even said the only thing that would make this experience better is if it included Chipotle smells!
Making the in-store experience more human-centered is the reason why we design. Sure, people have to customize their orders on their mobile phones, but when they arrive at the restaurant, they skip the line and their phones stay in their pockets (where they should).
This experience was humbling. Not only did I have the opportunity to work with such great teams at Sequence and Chipotle, I got to improve a product that millions of people use. Moreover, the Chipotle team was really excited to implement our proposed solutions in the next iteration of the app.
Questions? Comments? Feel free to comment here or say hi jacobrogelberg.com.