UX/UI Designer
2-3 weeks
Lead UX/UIDesigner
Product Delivery Lead
iOS Developer
Android Developer
Research
We started with conducting tests on Usertesting.com with Subway guests. Participants were tasked with selecting a sub of their choice and creating a Meal Deal. After adding the Meal Deal to their basket, they were required to edit their order directly from the basket.
The majority of participants struggled to complete the test, with only 3 out of 8 successfully completing all tasks and 2 out of the 3 successful participants completing with "ease".
Key issues identified:
Confusion with Meal Deal Placement: The position of the meal deal component in the ordering flow caused confusion.
Prompt-Driven Behaviour: Due to the placement of the meal deal component, participants often skipped customisation and selected only the bread, prompted by the error message.
Difficulty Editing Orders: After creating a meal deal, participants frequently missed how to return and further customise their selections.
Current meal deal component
Key Considerations:
Flow Adjustment: Rearranging the order flow could improve clarity and reduce friction. The current process confuse users.
In-Store Sequence: In-store, customers are typically asked at the till if they’d like to make it a meal. Replicating a similar sequence in the app could provide a more intuitive experience.
Ease of Navigation: Ensure users can easily go back to previous steps, such as easily returning to the drinks section after selecting crisps for their meal deal.
Meal Deal Component: The current meal deal component interrupts the customization process. Users often select the meal deal component first but are then prompted by an error message to customise their sub first. As a result of the disruption, they frequently overlook additional customisation options further down.
Competitor Analysis: Other apps like JustEat, UberEats, and Deliveroo have dedicated meal deal sections. Users first choose a meal deal and then proceed to select the sub, drink, and side, resulting in a clearer, more streamlined flow.
Exploration - Blue Sky Thinking
After conducting initial research and competitor analysis, I explored alternative ways to present meal deals within the app. Given Subway’s extensive menu—including various subs, wraps, salads, and the new Subway Series—I created mockups for different menu layouts. Additionally, I designed a meal deal pop-up component to upsell users, replicating the in-store experience.
Design exploration for Meal Deals
Final Solution
Rather than altering the order flow by moving the Meal Deal component to the end of the customization journey, we opted to change the component from a chevron to a checkbox. This approach allowed users to complete their orders and customize their subs without interruptions, resulting in a faster, smoother experience.
Key improvements:
Order Summary Enhancements:
Added a component displaying the complete Meal Deal order, enabling users to easily edit their customizations or remove the meal deal entirely.
Meals are clearly identified with a tag and a component showing the selected side and drink.
“Make it a Meal” Feature:
Based on the in-store process, we introduced a “Make it a Meal” option on the Order Summary screen, allowing users to quickly upgrade a single sub, wrap, or salad to a meal deal.
These enhancements to the mobile ordering flow contributed to a 22% increase in Average Order Value (AOV).
Existing and New Meal Deal comparision
Meal deal journey
Explore more projects
© Copyright 2025. All rights Reserved.