Firehouse Subs
A Simplified Menu Experience.
%201%20(1).png)
Firehouse Subs is a fast-food restaurant chain with over 1,200 locations across the U.S., their app currently reaches 3 million monthly digital users. This project aimed to reimagine and streamline the menu flow, making ordering faster, easier, and more consistent with the in-restaurant experience.
My Role.
01 Product Designer
I led the end-to-end design process as the sole designer on this project, driving all stages from discovery to delivery.
02 Product Manager
In collaboration with Patricia Artiaga, I contributed to the Product Management aspect of this project—gathering requirements, writing specs and tickets, and coordinating the content and QA teams to ensure a seamless delivery.
Discover.
Understanding the problem, gathering insights, and defining opportunities
01 Problem Framing
To have a holistic business perspective, I joined conversations with different teams across content, restaurant operations, customer support, and franchisee support. These conversations ensured deep alignment on business objectives, providing a solid foundation for the design process.
02 Exploratory Research
After aligning on business objectives, I immersed myself in the restaurant environment for three days, rotating through sections and observing customers. This hands-on approach helped me identify friction points and gather real-world insights into customer behaviors, expectations, and pain points, ensuring informed design decisions.
.png)
My restaurant coworkers and I after completing my in-restaurant immersion in Jacksonville, FL
03 Competitive Analysis
To fully understand the market landscape, I analyzed our competitors to see how they were addressing similar challenges. This helped me identify industry standards, gaps, and opportunities.
.png)
Main competitors include: Shake Shack, Panera, Jersey Mike's, Jimmy John's, Subway, and Chick-Fill-a
04 Data Analytics
Leveraging Amplitude to analyze user conversion funnels, identify drop-offs, and uncover behavior patterns—helping pinpoint key usability issues and prioritize improvements.
Slides from a stakeholder presentation outlining data-driven insights on our biggest UX challenges
Define.
Turning insights into a clear problem statement to guide focused and impactful design solutions
How might we improve menu performance and usability to reduce load times, enhance navigation, and increase user retention?
These were the key pain points identified during the discovery phase:
01 Slow Performance
The current menu takes 3-5 seconds to load due to multiple data sources and high client-side processing.
02 High Drop-off Rates
Currently, 37% of returning users and 77% of new users abandon the menu before ever reaching the cart.
03 Poor Navigation & Clarity
Extra clicks are required to view items, and the lack of descriptions makes product differentiation difficult.
Develop.
Exploring and iterating on solutions to address the defined problem
01 Ideation
Building on the problem statement, I explored multiple solutions through brainstorming sessions and rapid iterations. By leveraging cross-functional input and UX best practices, I generated ideas to improve performance, streamline navigation, and enhance the overall menu experience.
02 Prototyping & Usability Testing
After ideation, I translated key concepts into interactive prototypes and conducted over ten rounds of usability testing. Each iteration provided valuable insights, allowing me to refine interactions, address friction points, and ensure the final design was intuitive, efficient, and user-approved.
.png)
Figma documentation of usability test results, highlighting key findings, takeaways, and next steps
Deliver.
Finalizing and implementing solutions for a seamless user experience
01 Design Handoff
Ensured a smooth design handoff with detailed Figma files, documentation of business rules, edge cases, error states, and empty states to align teams and maintain design integrity.
.png)
02 Design System
To ensure design consistency and scalability, we continuously maintain and document our atomic-based design system. This ongoing effort provides a unified framework that streamlines implementation, aligns teams, and upholds design integrity across all touchpoints.
Example of our atomic Design System documentation
03 Visual Validation (QA)
Conducted visual QA to ensure design accuracy, consistency, and alignment with the final implementation.
Final Designs.
.png)
Desktop.
01 Menu List Screen
Introduced a 1-level navigation to reduce clicks, increased product image size to highlight the crave-worthy new shots, added short descriptions to help new users differentiate products, and removed prices from the list for a cleaner browsing experience.
.png)
02 Menu Item Detail Screen
Redesigned the order flow to mirror the in-restaurant experience: guests first select their sub flavor, then size, bread, and customizations, before being prompted to make it a combo.
.png)
03 Menu Customization Screen
User tests revealed that a full-page customization screen, free of distractions, allows users to find their desired options twice as fast compared to a modal, for example.
.png)
Mobile.
Results.
The design efforts led to significant improvements in conversion rates and ROI for the brand
01 Impact
From day one of the slow rollout, the product team and I closely tracked performance metrics daily, analyzing results and gradually increasing rollout coverage until we reached 100%—ensuring a data-driven, impact-focused launch.
Here’s what we achieved:
Here’s what we achieved:
Overall conversion went from 28.3% to 30.1% | (+6.3%)
New users conversion went from 9.12% to 14% | (+53.5%)
Web conversion went from 19.1% to 25.3% | (+32.4%)
02 Learnings & Findings
Adding descriptions and larger images significantly improved engagement, especially for new users.
Streamlining steps and enhancing navigation had the greatest impact on web performance.
A Data/CMS architecture restructure and code refactor led to significant improvements in loading speed, enhancing overall user experience.
