Reimagining mobile ordering for a high-growth QSR brand
.webp)
Chopt's customers love their mouthwatering salads, but their mobile ordering experience was falling short. Ordering was time-intensive, menu navigation was confusing and a reliance on third-party tech was limiting their brand’s digital expression and ability to execute on critical business objectives. After helping YML pitch and win the work to rebuild their iOS & Android mobile apps, I led a team of five designers across four different time zones to reimagine their mobile app, collaborating daily with client leadership and supporting our engineering team until launch.
Play Store rating (originally 1.7)
Increase in reorders
Reduction in support requests
What we inherited
01
Chopt's main goals were increase conversion and digital engagement from new customers, increasing frequency & ease of ordering from existing customers and increases overall satisfaction with the Chopt app. During the pitch, I got very familiar with the current experience and key usability issues to address once we were embedded with the client.
Home
Objective: Feature or upsell new menu items and promotions + decrease time to checkout
.png)
Location browser
Objective: Locate the most convenient or desired location quickly without misleading the customer to skip critical information
Menu
Objective: Increase full awareness of menu offerings + decrease abandonment
Builder
Objective: easier to add/edit ingredients. Clearer indication if order was added to cart
Cart
Objective: Easier to change quantity + upsell
Checkout
Objective: Easier to update order details. Clearer indication of order pick up or delivery location. Apple/GPay integration
Research
02
Prior to our official client kickoff, I dug through client-provided research materials, read up on industry trends and audited best-in-class competitors. I learned about e-commerce mental models and what drives repeat ordering and customer loyalty. I worked closely with product to understand and quantify where customers were getting stuck and/or bouncing, and collaborated with engineering to understand any technological constraints. I facilitated a series of discovery workshops with key stakeholders, listened in on stakeholder interviews and conducted a few customer interviews myself with new, average and power customers.
Stakeholders Interviews
Customer Interviews
Workshops Facilitated
Competitors Audited
App store reviews analyzed
Insights & opportunities
03
After multiple client workshops and alignment sessions with our internal team, it became clear where we needed to focus our attenton heading into design.
"Unclear how to edit an ingredient (need to tap to reveal 2x and trash icons"
"It's not clear which modifiers/ingredients are being charged for"
"The last thing we need is more tabs and random things"
“Try to remember that the customer cares about individual creativity of one restaurant”
“How might we capture the essence of everyone's favorite restaurant 20 years ago in a digital world?”
“Personalized content increases reorder"
“I'd be interested to see what salads are trending near me. That might make me try new salads”
“I had to jump through a lot of hoops before I was able to even get to the menu. There were a lot of options and I found it a bit overwhelming."
“There’s a lot here. It would be nice to just see my favorites and none of the other stuff like the Kids Menu.”
“The menu sidebar to the app is very hard to navigate”
“The last thing we need is more tabs and random things”
“Our customers are tripping up on basic things”
“Our customers don't scroll horizontally on the menu unless they know exactly what they're looking for”
"Want the content to inspire the customer, which will make them feel good about ordering. When ordering is seamless, frictionless, and that holistic journey creates a loyal customer.”
Visual exploration
04
Although we weren't scoped to do a full brand redesign, the CMO was open to visual direction explorations specifically for the app. I co-facilitated a series of workshops with our key client stakeholders to understand who Chopt is as a brand, what is missing, and gauge the appetite for change. I admittedly got a bit carried away, delivering two extra directions in addition to the two we originally promised.
“It's got to be awesome, memorable and unique” —Nick Marsh, CEO
.webp)
.webp)
.webp)
.webp)
.webp)
Where we landed
05
After a few rounds of feedback, we landed on a direction that felt fun and playful, yet modern and refined. The neue-brutalist style with hand drawn elements and bold, saturated colors felt like a fresh change for Chopt without straying too far from the current brand.
Interactions
06
Over the years, I've been developing a flowchart system to use for scenarios with many divergent paths. It was a big hit on this project with the client since it helped them make sense of complicated business logic and uncover new edge cases. Our developers actually preferred it to interactive prototypes since it closely mirrors their thought process when building.
The Home feed is likely a customer's first digital impression of Chopt. Its main goal is communication, brand expression, and teasing new menu items. A multi-directional swiping paradigm allows for easy one-handed use and quick access to account details and the QR code for in-store payment.
.webp)
Out of all the features I worked on, reordering went through the most iteration. Ultimately, segmenting the home feed satisfied the needs of all key stakeholders, without UI elements competing for precious screen real estate. In a few taps, customers can add entire past orders directly to cart without even browsing the menu; incredibly useful for those who frequently order the same thing. Apple and Google Pay only made things easier.
“I always order the same thing. I find big menus overwhelming, so when I find something I like, I just keep reordering it.” —Ana, power user
Location selection drives menu availability, so it was critical to reduce friction and confusion at this stage. I learned that ~80% of orders were pickup which influenced the decision to prioritize a map view, where customers can see their location relative to nearby restaurants, along with helpful metadata including the estimated time that their order will be ready.
We introduced a modular category landing page to improve discoverability of new menu items, and give each localized menu the flexibility to upsell certain menu items. On the full menu, I stacked menu items (versus horizontal scroll) and relied on anchor links for quickly jumping to the different menu categories.
.webp)
Over 60% of Chopt customers modify at least one ingredient. This inspired the swap functionality; when customers tap to delete an item, they can either confirm the deletion or they can swap with multiple ingredients. This one-to-many swapping feature has led to increases in average order value and more satisfied customers.
.jpg)
Many customers were unaware all salads and bowl can be converted into a wrap, despite this being a competitive advantage. I made it a special, and obvious moment. Hand drawn illustrations breathed life into to empty states.
Reflections
07
There were times on this project where I got incredibly stretched. A tight sprint schedule and vague product requirements didn't help, but there were things I could have done better do alleviate strain on the team. I have a tendency to try to do everything myself, and it's not always scalable. For example, I could have trained and delegated a lot of the design system upkeep to another designer, rather trying to manage it in addition to the core features I was working on. Hindsight is 20/20. I will learn from this.
I bore the load of multiple team member absences do to Covid-19, including our ACD who was out for over an entire Sprint. I was forced step up and lead the team to the finish line while being the client's primary design team contact. This was a blessing in disguise and helped me step into my own as a leader, earning trust from our internal and external teams alike.
This was a unique agency project for me in that I was truly involved end-to-end; from pitch all the way through production. About midway through our second design sprint, we started having regular dev validation calls with our engineers, which proved incredibly fruitful in uncovering tech limitations that influenced our design decisions. In the past, I've often waited too long to get Engineering's input, which has led to issues or delays further downstream. I felt I did a good job asking all the right questions when I had the opportunity, leading to a smoother process overall. I also maintained an open line of communication throughout the build to clarify any questions and provide visual QA, which led to a smooth launch and a refined final product.
Jake handled challenging asks with ease, delivering a clear vision that continually made us feel heard and showcased his expertise in the space. With each design, Jake showed true attention to detail and a well rounded understanding of any implications decisions would have further down the line. Beyond his remarkable sense for design, his presentation skills made it feel like he never skipped a beat. We are so appreciative of it!
I really want to specifically give Jake a shout out for his growth and success on the Chopt project. I've had the honor of watching him not only do his job excellently, but also observed his leadership and growth over the last year and the buttery smooth way he built client relationships that set our entire team up for success in a massive way. Jake's a rockstar - and the embodiment of Chopt.
When we started this process, I wanted to get on-par or better with competitors and now that I see this all done I can say that we have. This is so great. Thanks for all the hard work.
