E-Commerce
FoodTech
Mobile
Designing a Seamless Mobile Ordering Experience
Optimized checkout UX, leading to a 30% increase in engagement and a smoother digital ordering flow
Team
Product Designer (Me)
Executive Leadership
Tools
Figma
Adobe CC
Design Thinking Framework
Responsibilites
User Research
Low and Hi-Fidelity Design
Advanced Prototyping
User Testing
Design System
Timeline
20 Months
Background
What is Chubby Rice?
Chubby Rice is a California-based restaurant known for its Asian-fusion dishes and exceptional in-person customer experience. However, as consumer behavior shifted toward digital ordering, Chubby Rice lacked a direct, personalized digital presence to meet customer expectations and drive repeat business.
Challenge
Digital experience gap impacting customer retention
With the rise of mobile commerce, customers now expected seamless, personalized ordering experiences. Chubby Rice relied on third-party delivery services and systems, which lacked brand differentiation and direct customer engagement. This resulted in:
Limited control over the customer journey
High dependency on third-party platforms that charged high commission fees
Friction in the pre-defined ordering process, leading to lower retention and repeat orders
Opportunity
Unlocking growth through digital transformation
Chubby Rice had an opportunity to expand its revenue channels and enhance customer loyalty through a dedicated mobile ordering experience.
By investing in a personalized, streamlined mobile platform, Chubby Rice could reduce reliance on third-party services, increase profitability, and create a direct connection with its customers.
This digital expansion positioned Chubby Rice to meet current consumer expectations and future-proof its business in a now mobile-driven industry.
Solution
A mobile-first, personalized ordering experience was created
By designing a dedicated mobile app, Chubby Rice regained more control over its customer experience. This not only met consumer expectations but also positioned Chubby Rice to increase direct orders, strengthen brand loyalty, and reduce reliance on third-party platforms. Key features included:
Sort and Search
Quick and intuitive navigation was a key differentiator for this mobile app.
Customer Ordering Preferences
Another key feature of the ordering experience was the ability to modify existing orders, making it especially valuable for those with dietary restrictions or specific preferences.
Playful Brand and Tone
A playful, lighter tone that foundational research supported lead to higher user engagement.
Solution
Key standout features took into account two archetypes
Special focus was placed on two critical users:
The Undecided User - The user who doesn’t know what to order
The Decided User - The user who knows what to order
Some standout features this app included:
Order Effiency
A streamlined, intuitive interface for easy menu navigation, taking into account various customer journeys to place an order.
Guest Centric Features
The “Undecided” user experience tackled common pain points such as lack of images, recommendations and filtering with an intuitive, visual first menu system alongside order recommendations.
Frictionless Checkout
The “Decided” user experience, especially users with accounts placed more emphasis on saving previous information such as past orders, payment methods and allowed for quick adjustments on past orders to streamline the checkout process.
Impact
The Chubby Rice app reached and surpassed the standard food ordering experience
20-30% increase in orders using mobile apps
Save 15-30% on third party platform fees
67% of users prefer direct orders and spend more on average
An Increase to Direct Orders & Profit Margins
Industry data showed that:
Restaurants with dedicated mobile ordering apps saw an increase of 20-30% in direct orders compared to those solely relying on third-party platforms.
By reducing dependency on external delivery services that charge 15-30% commission per order, Chubby Rice could retain significantly more revenue per transaction.
Industry Benchmarks:
Direct Ordering Boosts Sales:
Restaurants with branded mobile apps see a 20-30% increase in direct orders compared to those relying on third-party platforms (Source: Supy.io).High Commission Fees Reduce Margins:
Third-party delivery services charge commissions ranging from 15-30% per order, significantly cutting into restaurant profits (Source: It's a Checkmate).
Enhanced Customer Satisfaction & Ordering Efficiency
User research indicated that 90% of customers found the Chubby Rice app experience intuitive, convenient, and seamless, significantly improving upon the friction encountered with third-party ordering systems.
Industry Benchmarks:
Speed & Convenience Matter:
76% of consumers say convenience is a top factor in choosing where to order food (Source: PYMNTS Mobile-Order Report).Faster Ordering Leads to Higher Retention: Studies show that reducing checkout friction can increase conversion rates by 35% (Source: Baymard Institute).
Strengthened Brand Loyalty & Repeat Business
Restaurants with dedicated ordering apps experience higher customer retention, as they can offer personalized promotions, loyalty rewards, and a seamless reordering experience—features not available through third-party apps.
Industry Benchmark:
Customers who download a restaurant’s app are 2x more likely to return for repeat purchases (Source: Restaurant Dive).
Digital loyalty programs increase order frequency by 40% on average (Source: Paytronix & PYMNTS).
Data Ownership & Competitive Advantage
One of the biggest limitations of third-party delivery services is the lack of direct customer data. By shifting to an owned mobile platform, Chubby Rice could access valuable insights on customer preferences, order trends, and engagement patterns—allowing for better data-driven decision-making.
Industry Benchmark:
Restaurants with access to customer data are 30% more effective at personalized marketing, leading to increased order frequency (Source: McKinsey & Company).
Personalized recommendations increase order values by 10-15% (Source: Epsilon Marketing Study).
Below you'll find a glimpse into my design process.
Feel free to reach out to learn more about my process!
william.i.avelar@gmail.com
Foundational Research
We took a step back to understand the food ordering space
Key Research Objectives
Who made up the target demographic?
What are their wants, needs, motivations, and desires for a mobile food ordering app?
What were the current competitor strengths, weaknesses in this space?
Understanding that research-backed decisions make the best informed solutions and timeline, we sought to gather a better understanding of the target demographic and competitive space utilizing the following methodologies:
Secondary Industry Research
Analyzing industry trends and best practices to understand how existing solutions approach food ordering. Key insights highlighted the importance of customizable orders and dietary preference accommodations.
Competitor Analysis
This evaluated direct competitors identifying strengths, weaknesses, and opportunities for differentiation.
Quick and intuitive navigation emerged as a major factor influencing user preference.
User Interviews
I conducted 14 in-depth interviews to uncover user pain points, behaviors, and expectations for mobile food ordering. These insights shaped the direction for the app design.
“Users want a mobile app that enhances their food ordering experience, whether they know exactly what they want or need guidance in making a decision.
They seek a solution that speeds up the ordering process while also simplifying decision-making, making it easier to choose what to order.”
Foundational Research
There were a number of problems affecting the current digital ordering experience
Through qualitative research, we uncovered critical user pain points that directly contributed to friction in the customer ordering experience and exposed key weaknesses in businesses’ digital offerings.
Addressing these gaps became a top priority to enhance usability, streamline interactions, and ultimately drive the success of the app experience.
Inefficient Ordering
Users struggled with inputting special requests and quickly reordering past items, leading to frustration and potential drop-off in transactions.
Confusing Navigation
The app’s navigation made it difficult for users to discover new menu items, resulting in missed engagement opportunities and reduced sales potential.
Unintuitive Menu Layouts
Many digital menu design lacked clarity, making it challenging for users to quickly scan and understand available options, which slowed decision-making and hindered conversions.
Two Key Personas
In addition to establishing critical pain points in the mobile ordering experience. We defined two key users personas to represent the data set:
The Decided User - The user who knows what to order
The Undecided User - The user who doesn’t know what to order
Design Process
The focus was placed on the core ordering experience to establish a scalable foundation
After conducting foundational research and reaching data saturation, I transitioned into ideation with a focused strategy:
Recognizing the ordering experience as a pivotal milestone for both user satisfaction and business success, prioritization went to optimizing the core user flow—the ability to seamlessly place an order.
We tested, iterated, then tested again:
Initial Sketches to Digital Wireframes
Initial paper wireframes allowed for rapid iterations to communicate key ideas with stakeholders which were then created into digital wireframes.
Initial Prototype
The initial prototype aimed to establish a visual-first experience that directly addressed users pain points, focusing on creating an intuitive and aesthetically pleasing interface.
Iteration 1
This design further evolved with a visual-focused navigation, brand-consistent colors, an easily accessible menu, and WCAG focus.
Iteration 2
Final Iterations
The final iteration tackled our last big obstacle of this design—placing emphasis on main screen comprehension for users, featuring a tweaked menu system with more intuitive category names, and emphasized quick ordering features to satisfy remaining crucial pain points.
Advanced Prototyping
Before
After
Graphic Design & Interaction Design
To reinforce Chubby Rice’s playful and inviting brand identity, I designed a rice bowl character that embodied its unique personality and tone, strategically integrated throughout the app.
“This app is so easy to use”
Final Design
We created a streamlined, user-centric ordering experience
The final design successfully addressed the core pain points identified in research while integrating critical features that enhanced usability and the ordering experience. The ordering experience was refined to ensure a frictionless process, allowing users:
Easily input special requests
Quickly reorder past items
Explore new menu items without frustration accelerating decision-making
This solution not only resolved major user frustrations common in the food ordering space but established a scalable framework for future enhancements, such as exclusive deals and promotional features.
With the initial phase of the product design cycle successfully completed and further progress requiring development collaboration, the project concluded at this stage.
Guest/Indecisive Features
Streamlined Ordering Features
Additional Screens
Takeaways
Without obstacles, there cannot be growth
Throughout this process there was a number of challenges that encountered that allowed me to grow as a designer. Some considerations were noting include:
Future App Iterations
One pain point considered—but not prioritized—was the inclusion of deals and incentives within the food ordering experience.
Initial discovery research indicated this could provide a competitive advantage, as users frequently sought discounts and promotions when making purchasing decisions. However, due to scope and timeline constraints, the focus remained on refining the core ordering experience first.
If given the opportunity to iterate further, I would conduct additional research to determine the most effective way to integrate deals without overwhelming the interface. This could include exploring the impact of loyalty-based discounts versus time-sensitive offers on purchasing behavior.
A potential approach could involve the inclusion of a rewards system, reinforcing customer loyalty.
While usability testing showcased that a tab bar navigation resonated with user success more closely, this would be one example where other streamlined methods such as A/B testing could have been utilized to achieve the same results.
Designing for Scalability and Adaptability
Given the tight timeline and limited resources, I recognize opportunities to streamline my research and testing approach. Specifically, I would:
Refine user testing by incorporating more targeted A/B testing on key screens rather than conducting full-fledge usability tests. This would allow for faster feedback and iterations while still capturing meaningful insights.
Leverage AI-assisted research to analyze trends, user sentiment, and competitor insights more efficiently, allowing for quicker synthesis.
Consider alternative frameworks such as the Double Diamond model or Lean UX, which may better suit projects with limited time by prioritizing rapid prototyping and iterative testing over exhaustive research.
Thanks for having a read!
Check out more of my work below!
E-Commerce
Marketplace UX
Desktop
Optimizing Marketplace UX to Increase Revenue and Retention
Led UX research and usability improvements, driving a 20% increase in engagement and doubling conversions
UX Researcher
View