Dinepay
What if paying at a restaurant was as effortless
as enjoying the meal?
Dinepay
Dinepay
What if paying at a restaurant was as effortless
as enjoying the meal?
What if paying at a restaurant was as effortless
as enjoying the meal?
UX/UI Design & Prototyping
UX/UI Design & Prototyping
UX/UI Design & Prototyping
Product Leadership & Strategy
Product Leadership & Strategy
Product Leadership & Strategy
UX Research & Interviews
UX Research & Interviews
UX Research & Interviews
Stakeholder Alignment
Stakeholder Alignment
Stakeholder Alignment
Dinepay
Dinepay
DinePay is a connected restaurant payment ecosystem designed to simplify dining for both guests and staff.
Diners can scan a QR code or enter their table number to browse the menu, order, split bills, and pay seamlessly from their phones.
On the other side, the DinePay POS app empowers staff to manage orders, update menus, and process payments in real time, while managers and kitchen staff can monitor, accept, and fulfill orders through dedicated dashboards. Together, the system creates a smooth, efficient dining experience end-to-end.
DinePay is a connected restaurant payment ecosystem designed to simplify dining for both guests and staff.
Diners can scan a QR code or enter their table number to browse the menu, order, split bills, and pay seamlessly from their phones.
On the other side, the DinePay POS app empowers staff to manage orders, update menus, and process payments in real time, while managers and kitchen staff can monitor, accept, and fulfill orders through dedicated dashboards. Together, the system creates a smooth, efficient dining experience end-to-end.
DinePay is a connected restaurant payment ecosystem designed to simplify dining for both guests and staff.
Diners can scan a QR code or enter their table number to browse the menu, order, split bills, and pay seamlessly from their phones.
On the other side, the DinePay POS app empowers staff to manage orders, update menus, and process payments in real time, while managers and kitchen staff can monitor, accept, and fulfill orders through dedicated dashboards. Together, the system creates a smooth, efficient dining experience end-to-end.
Deliverables:
Mobile App
POS Dashboard App
User Research & Testing Assets
Design System
Prototypes & Motion Design
Handoff Package
Tools:
Figma
Miro, Mural
Notion
UserTesting, Maze
Deliverables:
Mobile App
POS Dashboard App
User Research & Testing Assets
Design System
Prototypes & Motion Design
Handoff Package
Tools:
Figma
Miro, Mural
Notion
UserTesting, Maze
Deliverables:
Mobile App
POS Dashboard App
User Research & Testing Assets
Design System
Prototypes & Motion Design
Handoff Package
Tools:
Figma
Miro, Mural
Notion
UserTesting, Maze
Origin
While working directly with my client partner, Sesame Restaurant, I saw firsthand how modern diners, especially millennials who expect to order, pay, and split bills seamlessly, without waiting on staff or dealing with outdated systems.
Through this partnership, I also discovered that the real problem wasn’t just payments, it was the entire operational flow behind the scenes. That’s why I designed DinePay not as a single app, but as a connected dining ecosystem that serves both guests and staff, improving the experience end-to-end.
Problem Solved
DinePay is the productized version of that vision, designed to improve the dining experience while being operationally sustainable for restaurants.
It solves a core problem for restaurants by streamlining ordering, communication, and payments into one connected system, reducing errors and increasing efficiency.
It also solves a core problem for diners by allowing them to order, split bills, and pay seamlessly from their phone, creating a faster, more modern, and frustration-free experience for everyone.
How it works
DinePay connects guests and restaurants through a unified digital platform. Diners simply scan a QR code at their table to access the menu, place orders, and pay, all without waiting for staff. Orders are instantly synced with the restaurant’s POS and kitchen display, ensuring accuracy and faster service.
For restaurants, DinePay provides an integrated dashboard that tracks orders, payments, and table activity in real time, helping staff focus more on hospitality and less on manual coordination. The result is a smoother dining experience and more efficient operations for both sides.
Understanding &
Defining The Problem
Traditional restaurant payment processes can be slow and inconvenient, leading to frustration for both customers and restaurant staff.
Diners often have to wait for the check, manually split bills, and handle cash or multiple cards, causing unnecessary delays. For restaurants, managing payments manually can slow table turnover and impact customer satisfaction.
Recognizing this gap, I saw a massive opportunity to help diners take control of their restaurant payment experience, making it faster, smoother, and more convenient.
Origin
Origin
While working directly with my client partner, Sesame Restaurant, I saw firsthand how modern diners, especially millennials who expect to order, pay, and split bills seamlessly, without waiting on staff or dealing with outdated systems.
Through this partnership, I also discovered that the real problem wasn’t just payments, it was the entire operational flow behind the scenes. That’s why I designed DinePay not as a single app, but as a connected dining ecosystem that serves both guests and staff, improving the experience end-to-end.
Problem Solved
Problem Solved
DinePay is the productized version of that vision, designed to improve the dining experience while being operationally sustainable for restaurants.
It solves a core problem for restaurants by streamlining ordering, communication, and payments into one connected system, reducing errors and increasing efficiency.
It also solves a core problem for diners by allowing them to order, split bills, and pay seamlessly from their phone, creating a faster, more modern, and frustration-free experience for everyone.
How it works
How it works
DinePay connects guests and restaurants through a unified digital platform. Diners simply scan a QR code at their table to access the menu, place orders, and pay, all without waiting for staff. Orders are instantly synced with the restaurant’s POS and kitchen display, ensuring accuracy and faster service.
For restaurants, DinePay provides an integrated dashboard that tracks orders, payments, and table activity in real time, helping staff focus more on hospitality and less on manual coordination. The result is a smoother dining experience and more efficient operations for both sides.
Understanding &
Defining The Problem
Traditional restaurant payment processes can be slow and inconvenient, leading to frustration for both customers and restaurant staff.
Diners often have to wait for the check, manually split bills, and handle cash or multiple cards, causing unnecessary delays. For restaurants, managing payments manually can slow table turnover and impact customer satisfaction.
Recognizing this gap, I saw a massive opportunity to help diners take control of their restaurant payment experience, making it faster, smoother, and more convenient.
Traditional restaurant payment processes can be slow and inconvenient, leading to frustration for both customers and restaurant staff.
Diners often have to wait for the check, manually split bills, and handle cash or multiple cards, causing unnecessary delays. For restaurants, managing payments manually can slow table turnover and impact customer satisfaction.
Recognizing this gap, I saw a massive opportunity to help diners take control of their restaurant payment experience, making it faster, smoother, and more convenient.
The initial scope was to solve for diners,
but research uncovered pain points extending to staff and management.
The initial scope was to solve for diners,
but research uncovered pain points extending to staff and management.
Discovering Other Problems
and Pain Points
Discovering
New Problems
and Pain Points
While conducting foundational research at the restaurant, insights revealed that the problems extended beyond diners, they also affected the restaurant management staff.
While conducting foundational research at the restaurant, insights revealed that the problems extended beyond diners, they also affected the restaurant management staff.
Miscommunication between staff and diner leading to wrong orders.
Frustration builds on both sides due to lack of clear feedback or tracking.
Miscommunication between staff and diner leading to wrong orders.
Frustration builds on both sides due to lack of clear feedback or tracking.
Operational chaos caused by unclear order flow and poor coordination.
Kitchen and management struggle to stay aligned during peak hours.
Operational chaos caused by unclear order flow and poor coordination.
Kitchen and management struggle to stay aligned during peak hours.
Lost tips due to diners not carrying cash or having poor dining experiences.
Staff morale drops as payment friction affects satisfaction and earnings.
Lost tips due to diners not carrying cash or having poor dining experiences.
Staff morale drops as payment friction affects satisfaction and earnings.
Scope
When the project started, the goal was to build a mobile app for guests. But as we started mapping the full dining journey, it became clear: great guest experience depends on great staff tools.
So instead of just designing features, I sat down with the client and asked:
How do your staff currently take orders?
Where do mistakes or delays happen?
How does the kitchen get notified?
How do you track payments or split bills?
When I first joined the project, the goal was to build a mobile app for guests.
But as I started mapping the full dining journey, it became clear: great guest experience depends on great staff tools.
So instead of just designing features, I sat down with the client and asked:
How do your staff currently take orders?
Where do mistakes or delays happen?
How does the kitchen get notified?
How do you track payments or split bills?
When the project started, the goal was to build a mobile app for guests. But as we started mapping the full dining journey, it became clear: great guest experience depends on great staff tools.
So instead of just designing features, I sat down with the client and asked:
How do your staff currently take orders?
Where do mistakes or delays happen?
How does the kitchen get notified?
How do you track payments or split bills?
The client opened up and shared real pain points from their waiters, kitchen team, and managers.
That’s when I introduced the idea:
“If we only improve the guest side, the internal friction will still exist.
To truly improve the experience, we need a staff-facing POS product working in sync with the guest app.”
I shared a horizontal map (similar to above) showing how each side connects.
This helped the client visualize the entire service ecosystem, not just screens.
The client opened up and shared real pain points from their waiters, kitchen team, and managers.
That’s when I introduced the idea:
“If we only improve the guest side, the internal friction will still exist.
To truly improve the experience, we need a staff-facing POS product working in sync with the guest app.”
I shared a horizontal map (similar to above) showing how each side connects.
This helped the client visualize the entire service ecosystem, not just screens.
The client opened up and shared real pain points from their waiters, kitchen team, and managers.
That’s when I introduced the idea:
“If we only improve the guest side, the internal friction will still exist.
To truly improve the experience, we need a staff-facing POS product working in sync with the guest app.”
I shared a horizontal map (similar to above) showing how each side connects.
This helped the client visualize the entire service ecosystem, not just screens.
Important:
This wasn’t just my idea pushed onto them, it came from listening, understanding their operations, and co-creating a solution that solved the right problem.
From there, the project evolved into a complete, integrated dining ecosystem of guest mobile app + staff POS + kitchen display + manager controls, all working together in real time.
Important:
This wasn’t just my idea pushed onto them, it came from listening, understanding their operations, and co-creating a solution that solved the right problem.
From there, the project evolved into a complete, integrated dining ecosystem of guest mobile app + staff POS + kitchen display + manager controls, all working together in real time.
Important:
This wasn’t just my idea pushed onto them, it came from listening, understanding their operations, and co-creating a solution that solved the right problem.
From there, the project evolved into a complete, integrated dining ecosystem of guest mobile app + staff POS + kitchen display + manager controls, all working together in real time.
And that’s how I secured stakeholder buy-in for expanding the project scope:
From designing just a diner app to designing the entire dining ecosystem.
Mapping
User Journeys
Diners + Staff
Mapping
User Journeys
Diners + Staff
Before designing any screens, I needed to deeply understand how a dining experience actually flows, not just from the guest’s perspective, but across every role involved: diners, waiters, kitchen staff, and managers.
Instead of treating this as a traditional “feature flow,” I approached it as a service journey, mapping every handoff, dependency, and moment of friction in the current restaurant process.
Before designing any screens, I needed to deeply understand how a dining experience actually flows, not just from the guest’s perspective, but across every role involved: diners, waiters, kitchen staff, and managers.
Instead of treating this as a traditional “feature flow,” I approached it as a service journey, mapping every handoff, dependency, and moment of friction in the current restaurant process.
What I discovered:
The guest experience is directly affected by internal operational pain points. For example:
If the waiter is busy, the guest waits.
If the kitchen doesn’t get clear orders, mistakes happen.
If the bill takes too long, guests feel frustrated.
If payment is manual, staff gets overwhelmed.
What I discovered:
The guest experience is directly affected by internal operational pain points. For example:
If the waiter is busy, the guest waits.
If the kitchen doesn’t get clear orders, mistakes happen.
If the bill takes too long, guests feel frustrated.
If payment is manual, staff gets overwhelmed.
What I discovered:
The guest experience is directly affected by internal operational pain points. For example:
If the waiter is busy, the guest waits.
If the kitchen doesn’t get clear orders, mistakes happen.
If the bill takes too long, guests feel frustrated.
If payment is manual, staff gets overwhelmed.
This led to a critical insight:
Improving only the guest interface would not fix the actual problem.
To create a seamless experience, I needed to design the entire journey: across people, devices, and environments.
So I mapped three core journeys side-by-side:
Guest Journey (Mobile App) – Ordering, waiting, paying
Staff Journey (POS/Tablet) – Managing tables, requests, and payments
Kitchen Journey (Display Screen) – Receiving orders, updating status
Management Journey (Dashboard) – Oversight, analytics, performance
This led to a critical insight:
Improving only the guest interface would not fix the actual problem.
To create a seamless experience, I needed to design the entire journey: across people, devices, and environments.
So I mapped three core journeys side-by-side:
Guest Journey (Mobile App) – Ordering, waiting, paying
Staff Journey (POS/Tablet) – Managing tables, requests, and payments
Kitchen Journey (Display Screen) – Receiving orders, updating status
Management Journey (Dashboard) – Oversight, analytics, performance
This led to a critical insight:
Improving only the guest interface would not fix the actual problem.
To create a seamless experience, I needed to design the entire journey: across people, devices, and environments.
So I mapped three core journeys side-by-side:
Guest Journey (Mobile App) – Ordering, waiting, paying
Staff Journey (POS/Tablet) – Managing tables, requests, and payments
Kitchen Journey (Display Screen) – Receiving orders, updating status
Management Journey (Dashboard) – Oversight, analytics, performance
Staff POS Functions
Kitchen Staff POS Functions
This exercise helped me:
Align stakeholders on the true root problems
Justify the need for the POS and Kitchen system
Design synchronized experiences across all touchpoints
Ensure every interaction supported both user and operational needs
Mapping journeys wasn’t just research, it shaped the entire product direction.
This exercise helped me:
Align stakeholders on the true root problems
Justify the need for the POS and Kitchen system
Design synchronized experiences across all touchpoints
Ensure every interaction supported both user and operational needs
Mapping journeys wasn’t just research, it shaped the entire product direction.
This exercise helped me:
Align stakeholders on the true root problems
Justify the need for the POS and Kitchen system
Design synchronized experiences across all touchpoints
Ensure every interaction supported both user and operational needs
Mapping journeys wasn’t just research, it shaped the entire product direction.
Diner JTBD
Staff JTBD
By mapping Jobs To Be Done for both diners and staff, I uncovered the deeper motivations behind their actions as diners wanted speed, control, and clarity, while staff needed real-time visibility, smooth communication, and operational efficiency.
These insights showed the problem wasn’t just at payment, but across the entire dining flow.
So I mapped the end-to-end user journey to visualize how diners, waiters, kitchen, and managers interact, revealing exactly where the experience breaks and where DinePay could create the most impact.
Diner User Journey
Diner User Journey
User Research
Diners
User Research
Diners
User Research
Diners
Assumptions going into the research were that diners want the ability to pay with online payments or cards, the ability to review their orders before paying, and the convenience of not having to carry cash.
However, after conducting research, these assumptions changed depending on user feedback.
Assumptions going into the research were that diners want the ability to pay with online payments or cards, the ability to review their orders before paying, and the convenience of not having to carry cash.
However, after conducting research, these assumptions changed depending on user feedback.
In the initial research phase, we conducted a survey to understand diners' experiences and preferences regarding restaurant payments. The survey aimed to identify common pain points and assess interest in potential solutions.
In the initial research phase, we conducted a survey to understand diners' experiences and preferences regarding restaurant payments. The survey aimed to identify common pain points and assess interest in potential solutions.
In the initial research phase, we conducted a survey to understand diners' experiences and preferences regarding restaurant payments. The survey aimed to identify common pain points and assess interest in potential solutions.
Methodology
Participants:
15 individuals aged between 18 and 45+, with a focus on the 25–34 age group.
Survey Design:
A structured questionnaire comprising 11 questions, including multiple-choice and Likert-scale items.
Distribution:
The survey was disseminated online through social media platforms and community forums.
Participants:
15 individuals aged between 18 and 45+, with a focus on the 25–34 age group.
Survey Design:
A structured questionnaire comprising 11 questions, including multiple-choice and Likert-scale items.
Distribution:
The survey was disseminated online through social media platforms and community forums.
Participants:
15 individuals aged between 18 and 45+, with a focus on the 25–34 age group.
Survey Design:
A structured questionnaire comprising 11 questions, including multiple-choice and Likert-scale items.
Distribution:
The survey was disseminated online through social media platforms and community forums.
Survey link: https://forms.gle/PmrWazD7RCBAnaXc8 ↗
Survey link: https://forms.gle/PmrWazD7RCBAnaXc8 ↗
Survey link: https://forms.gle/PmrWazD7RCBAnaXc8 ↗
Research Findings
Discovery
Dining Frequency
Dining Frequency
20% dine rarely (1–2 times/month), 47% dine occasionally (3–4 times/month), and 33% dine frequently (weekly or more).
20% dine rarely (1–2 times/month), 47% dine occasionally (3–4 times/month), and 33% dine frequently (weekly or more).
Bill Splitting
Bill Splitting
A significant 67% of respondents experience difficulties when splitting bills with friends.
Likelihood to Use a Mobile Payment App: About 54% (ratings of 4 and 5) are likely to use a mobile app for restaurant payments, while 20% are unlikely.
A significant 67% of respondents experience difficulties when splitting bills with friends.
Likelihood to Use a Mobile Payment App: About 54% (ratings of 4 and 5) are likely to use a mobile app for restaurant payments, while 20% are unlikely.
Ease Of Bill Splitting
Ease Of Bill Splitting
47% found bill splitting difficult (ratings of 1 and 2), whereas only 7% found it very easy.
These insights clearly highlight the pain points in the current dining payment experience and underscore the demand for a streamlined, mobile-first solution.
47% found bill splitting difficult (ratings of 1 and 2), whereas only 7% found it very easy.
These insights clearly highlight the pain points in the current dining payment experience and underscore the demand for a streamlined, mobile-first solution.
Check Wait Time
Check Wait Time
53% of diners wait 5–10 minutes for their check, 27% wait 10–15 minutes, 13% wait less than 5 minutes, and 7% wait more than 15 minutes.
53% of diners wait 5–10 minutes for their check, 27% wait 10–15 minutes, 13% wait less than 5 minutes, and 7% wait more than 15 minutes.
Current Mobile Payment Usage
Current Mobile Payment Usage
67% do not currently use any mobile payment app for restaurant bills.
67% do not currently use any mobile payment app for restaurant bills.
Likelihood to Use Payment App
Likelihood to Use Payment App
About 54% (ratings of 4 and 5) are likely to use a mobile app for restaurant payments, while 20% are unlikely.
About 54% (ratings of 4 and 5) are likely to use a mobile app for restaurant payments, while 20% are unlikely.
Payment Process Satisfaction
Payment Process Satisfaction
Approximately 40% rate the current payment process as average, with 27% giving above-average ratings and 20% at the extremes (either very satisfied or very unsatisfied).
Approximately 40% rate the current payment process as average, with 27% giving above-average ratings and 20% at the extremes (either very satisfied or very unsatisfied).
Importance of Contactless Payment
Importance of Contactless Payment
53% rate contactless payment as very important
53% rate contactless payment as very important
Interest in Loyalty Program
Interest in Loyalty Program
A strong 80% expressed interest in an integrated loyalty program.
A strong 80% expressed interest in an integrated loyalty program.
Defining the problem
To deeply understand why the dining and payment experience was inefficient, I conducted a root cause analysis using an Ishikawa (Fishbone) diagram.
Instead of treating slow payments or order delays as isolated issues, I broke the problem down into contributing factors across People, Process, Tools, and Environment.
This helped reveal that the core problem wasn’t just at checkout, it was a systemic breakdown in communication, workflow, and visibility between diners, waiters, kitchen staff, and managers.
User Research
Staff
User Research
Staff
To understand the operational side of the dining experience at Sesame, I conducted in-depth interviews with the restaurant staff.
I spoke with waiters, kitchen staff, and managers to observe how orders, communication, and payments were handled in real scenarios.
To understand the operational side of the dining experience at Sesame, I conducted in-depth interviews with the restaurant staff.
I spoke with waiters, kitchen staff, and managers to observe how orders, communication, and payments were handled in real scenarios.
Service Blueprint
Analyzing Touchpoints + emotions + pain areas.
Staff Interview Insights
After interviewing waiters, kitchen staff, and managers, I organized the key insights into a structured table. The patterns were clear: most issues came from manual processes, lack of visibility, and constant back and forth between teams. These problems affected service speed, accuracy, and even guest satisfaction.
This table helped me pinpoint exactly where the product needed to support staff to create a smoother and more efficient dining experience.
After interviewing waiters, kitchen staff, and managers, I organized the key insights into a structured table. The patterns were clear: most issues came from manual processes, lack of visibility, and constant back and forth between teams. These problems affected service speed, accuracy, and even guest satisfaction.
This table helped me pinpoint exactly where the product needed to support staff to create a smoother and more efficient dining experience.
Solving
Problems
Through conversations with restaurant diners, staff, friends, and family, I noticed a strong interest, especially among millennial in more seamless and modern payment methods beyond traditional cash or cards.
Convenience is key.
Through conversations with restaurant diners, staff, friends, and family, I noticed a strong interest, especially among millennial in more seamless and modern payment methods beyond traditional cash or cards.
Convenience is key.
Designing
Solutions
Guest
Designing an integrated POS ecosystem that connects staff, kitchen, and management in real time, ensuring every order, update, and payment flows smoothly across the entire restaurant.
Real-time communication across staff
Seamless order & workflow management
Full operational visibility and control
Efficient billing & payment integration
Designing a seamless mobile solution that allows diners to pay, tip, split, and save the bill instantly from their phones, giving them more control over their dining experience and saving valuable time.
Seamless & Quick Payments
Easy Bill Splitting
Contactless & Secure
Enhanced Dining Experience
Staff
Designing Solutions
Guest
Designing a seamless mobile solution that allows diners to pay, tip, split, and save the bill instantly from their phones, giving them more control over their dining experience and saving valuable time.
Seamless & Quick Payments
Easy Bill Splitting
Contactless & Secure
Enhanced Dining Experience
Guest
Designing a seamless mobile solution that allows diners to pay, tip, split, and save the bill instantly from their phones, giving them more control over their dining experience and saving valuable time.
Seamless & Quick Payments
Easy Bill Splitting
Contactless & Secure
Enhanced Dining Experience
Staff
Designing an integrated POS ecosystem that connects staff, kitchen, and management in real time, ensuring every order, update, and payment flows smoothly across the entire restaurant.
Real-time communication across staff
Seamless order & workflow management
Full operational visibility and control
Efficient billing & payment integration
Staff
Designing an integrated POS ecosystem that connects staff, kitchen, and management in real time, ensuring every order, update, and payment flows smoothly across the entire restaurant.
Real-time communication across staff
Seamless order & workflow management
Full operational visibility and control
Efficient billing & payment integration
"Check please" is a thing of the past.
With Integrated QR codes, customers pay in seconds, right at their table.
Let's go behind the scenes
Let's go behind the scenes
Design Process
Double Diamond
For this project, I followed the Double Diamond design process to stay structured and human-centered throughout.
I started by discovering the user problem through research and observations, then defined the key pain points and user needs. In the development phase, I explored multiple solutions through ideation, wireframes, and feedback.
Finally, I refined and delivered a focused experience that addressed real user frustrations around restaurant payments and bill splitting.
For this project, I followed the Double Diamond design process to stay structured and human-centered throughout.
I started by discovering the user problem through research and observations, then defined the key pain points and user needs. In the development phase, I explored multiple solutions through ideation, wireframes, and feedback.
Finally, I refined and delivered a focused experience that addressed real user frustrations around restaurant payments and bill splitting.
For this project, I followed the Double Diamond design process to stay structured and human-centered throughout.
I started by discovering the user problem through research and observations, then defined the key pain points and user needs. In the development phase, I explored multiple solutions through ideation, wireframes, and feedback.
Finally, I refined and delivered a focused experience that addressed real user frustrations around restaurant payments and bill splitting.
Wireframes
To start visualizing the user flows for both diners and staff, I sketched low-fidelity wireframes by hand. These helped map how diners would scan, view, and pay their bills, and how staff would manage orders, tables, and payments in real time. I focused on clarity, accessibility, and efficiency by ensuring key actions like Pay, Split, and Close Table were intuitive and easy to access. These early sketches laid the foundation for a seamless, connected dining experience across both apps.
To start visualizing the user flows for both diners and staff, I sketched low-fidelity wireframes by hand. These helped map how diners would scan, view, and pay their bills, and how staff would manage orders, tables, and payments in real time. I focused on clarity, accessibility, and efficiency by ensuring key actions like Pay, Split, and Close Table were intuitive and easy to access. These early sketches laid the foundation for a seamless, connected dining experience across both apps.
To start visualizing the user flows for both diners and staff, I sketched low-fidelity wireframes by hand. These helped map how diners would scan, view, and pay their bills, and how staff would manage orders, tables, and payments in real time. I focused on clarity, accessibility, and efficiency by ensuring key actions like Pay, Split, and Close Table were intuitive and easy to access. These early sketches laid the foundation for a seamless, connected dining experience across both apps.
User Flows
I mapped out a clear, step-by-step journey focused on speed and simplicity, from scanning the bill to confirming payment. Every screen was designed to minimize taps and eliminate friction, ensuring users could pay or split checks in seconds, not minutes. I prioritized prominent CTAs, auto-saved receipts, and one-tap actions like preset tips to mirror the efficiency of physical payments while adding digital convenience. The goal was straightforward: make paying as effortless as dining itself.
I mapped out a clear, step-by-step journey focused on speed and simplicity, from scanning the bill to confirming payment. Every screen was designed to minimize taps and eliminate friction, ensuring users could pay or split checks in seconds, not minutes. I prioritized prominent CTAs, auto-saved receipts, and one-tap actions like preset tips to mirror the efficiency of physical payments while adding digital convenience. The goal was straightforward: make paying as effortless as dining itself.
I mapped out a clear, step-by-step journey focused on speed and simplicity, from scanning the bill to confirming payment. Every screen was designed to minimize taps and eliminate friction, ensuring users could pay or split checks in seconds, not minutes. I prioritized prominent CTAs, auto-saved receipts, and one-tap actions like preset tips to mirror the efficiency of physical payments while adding digital convenience. The goal was straightforward: make paying as effortless as dining itself.
Diner User Flow
Staff User Flow: Link↗
Staff User Flow: Link↗
Information Architecture
To ensure a seamless dining experience, I structured Caviar’s IA around speed and clarity, reducing friction at every step. The flow begins with a clean Welcome Screen, letting users quickly access their active bill or past orders. Key actions like Pay Full Bill, Split & Pay, or View Rewards are prioritized upfront, minimizing navigation layers.
Information Architecture
Information
Architecture
To ensure a seamless dining experience, I structured Caviar’s IA around speed and clarity, reducing friction at every step. The flow begins with a clean Welcome Screen, letting users quickly access their active bill or past orders. Key actions like Pay Full Bill, Split & Pay, or View Rewards are prioritized upfront, minimizing navigation layers.
To ensure a seamless dining experience, I structured Caviar’s IA around speed and clarity, reducing friction at every step. The flow begins with a clean Welcome Screen, letting users quickly access their active bill or past orders. Key actions like Pay Full Bill, Split & Pay, or View Rewards are prioritized upfront, minimizing navigation layers.
For payments, I kept the path linear:
Bill Review → Split/Tip Adjustments → Payment Method → Confirmation.
Post-payment, users instantly receive receipts and can review transactions, ensuring transparency without extra steps.
For payments, I kept the path linear:
Bill Review → Split/Tip Adjustments → Payment Method → Confirmation.
Post-payment, users instantly receive receipts and can review transactions, ensuring transparency without extra steps.
For payments, I kept the path linear:
Bill Review → Split/Tip Adjustments → Payment Method → Confirmation.
Post-payment, users instantly receive receipts and can review transactions, ensuring transparency without extra steps.
Low-Mid Fidelity
Prototypes
I started with low-fidelity wireframes to map out Caviar’s core payment flow, focusing on making the flow accessible and efficient.
The home screen prioritizes the bill overview and key actions which are Pay and Split.
With minimal distractions. For splitting, I simplified the process to two choices: equal division or custom item selection, reducing decision fatigue. The tip screen balances empathy (showing the server’s name) and efficiency (preset percentages with a "popular" nudge), while dynamically updating the total.
I started with low-fidelity wireframes to map out Caviar’s core payment flow, focusing on making the flow accessible and efficient.
The home screen prioritizes the bill overview and key actions which are Pay and Split.
With minimal distractions. For splitting, I simplified the process to two choices: equal division or custom item selection, reducing decision fatigue. The tip screen balances empathy (showing the server’s name) and efficiency (preset percentages with a "popular" nudge), while dynamically updating the total.
I started with low-fidelity wireframes to map out Caviar’s core payment flow, focusing on making the flow accessible and efficient.
The home screen prioritizes the bill overview and key actions which are Pay and Split.
With minimal distractions. For splitting, I simplified the process to two choices: equal division or custom item selection, reducing decision fatigue. The tip screen balances empathy (showing the server’s name) and efficiency (preset percentages with a "popular" nudge), while dynamically updating the total.
High Fidelity Mockups
High Fidelity
Mockups
After validating the wireframes, I translated them into high-fidelity mockups using a clean and modern UI style. The goal was to make the payment experience feel seamless, trustworthy, and restaurant-friendly. I used a simple color palette, readable typography, and minimalistic icons to guide users effortlessly through the app.
After validating the wireframes, I translated them into high-fidelity mockups using a clean and modern UI style. The goal was to make the payment experience feel seamless, trustworthy, and restaurant-friendly. I used a simple color palette, readable typography, and minimalistic icons to guide users effortlessly through the app.
After validating the wireframes, I translated them into high-fidelity mockups using a clean and modern UI style. The goal was to make the payment experience feel seamless, trustworthy, and restaurant-friendly. I used a simple color palette, readable typography, and minimalistic icons to guide users effortlessly through the app.
Ethnographic
Usability Study
To test the usability of the DinePay prototype in a real-world setting, I visited a local restaurant and invited a few diners to try the app for their bill payment. They went through the full process, from scanning the table code to splitting and completing payment.
During usability testing, a recurring concern emerged, users felt uncertain about where to find their receipts after completing a payment. The original flow ended with a confirmation screen, but provided no immediate pathway to access or review the transaction details. This created confusion and interrupted the user’s sense of closure, especially for those wanting to verify or store their receipts right away.
To test the usability of the DinePay prototype in a real-world setting, I visited a local restaurant and invited a few diners to try the app for their bill payment. They went through the full process, from scanning the table code to splitting and completing payment.
During usability testing, a recurring concern emerged, users felt uncertain about where to find their receipts after completing a payment. The original flow ended with a confirmation screen, but provided no immediate pathway to access or review the transaction details. This created confusion and interrupted the user’s sense of closure, especially for those wanting to verify or store their receipts right away.
Insights
Affinity mapping
The final design showcases a refined, intuitive payment flow centered around user needs. After scanning a table QR code, users can review their itemized bill, split payments, add tips, and pay securely via card or wallet, all in a few taps. Following usability feedback, a prominent "View Receipt" button was added post-payment, allowing users to instantly access, save, or email their receipt. This small change completed the journey, ensuring a seamless, satisfying checkout experience from start to finish.
What went wrong?
Diner App
What went wrong?
Diner App
Placing the tip option directly on the bill overview screen improved usability and reduced one step in the flow, but unexpectedly led to a decline in tips.
Users expected instant access to receipts after paying. The original flow ended at confirmation, forcing them to dig through past bills.
Iteration
Early testing revealed a critical gap, users wanted immediate access to receipts after paying. Originally, the flow ended at confirmation, forcing them to dig through past bills.
The Fix: Added a one-tap "View Receipt" button right after payment confirmation, with options to save or email it. This small but crucial iteration came directly from usability testing, proving that even micro-journeys need clear exit points.
What went wrong?
Staff App
The management dashboard became cluttered and confusing, managers and waiters struggled to quickly identify each table’s status at a glance.
Iteration
1
I introduced a dedicated tipping screen placed right before the payment method selection. This gave users a clear moment to decide on tipping without feeling rushed, restoring balance between usability and behavioral intent.
2
Added a one-tap "View Receipt" button right after payment confirmation, with options to save or email it. This small but crucial iteration came directly from usability testing, proving that even micro-journeys need clear exit points.
Early testing revealed a critical gap, users wanted immediate access to receipts after paying. Originally, the flow ended at confirmation, forcing them to dig through past bills.
The Fix: Added a one-tap "View Receipt" button right after payment confirmation, with options to save or email it. This small but crucial iteration came directly from usability testing, proving that even micro-journeys need clear exit points.
What went wrong?
Staff App
The management dashboard became cluttered and confusing, managers and waiters struggled to quickly identify each table’s status at a glance.
Iteration
I redesigned the dashboard with color-coded table cards, making each table’s status instantly recognizable and improving overall visibility and decision-making for the staff.
Early testing revealed a critical gap, users wanted immediate access to receipts after paying. Originally, the flow ended at confirmation, forcing them to dig through past bills.
The Fix: Added a one-tap "View Receipt" button right after payment confirmation, with options to save or email it. This small but crucial iteration came directly from usability testing, proving that even micro-journeys need clear exit points.
A/B testing revealed that the version without color-coded cards caused confusion and slower task completion. In contrast, the color-coded version (b) improved task efficiency by 32% and usability ratings by 27%.
Final Design
The final design showcases a refined, intuitive payment flow centered around user needs. After scanning a table QR code, users can review their itemized bill, split payments, add tips, and pay securely via card or wallet, all in a few taps. Following usability feedback, a prominent "View Receipt" button was added post-payment, allowing users to instantly access, save, or email their receipt. This small change completed the journey, ensuring a seamless, satisfying checkout experience from start to finish.
The final design showcases a refined, intuitive payment flow centered around user needs. After scanning a table QR code, users can review their itemized bill, split payments, add tips, and pay securely via card or wallet, all in a few taps. Following usability feedback, a prominent "View Receipt" button was added post-payment, allowing users to instantly access, save, or email their receipt. This small change completed the journey, ensuring a seamless, satisfying checkout experience from start to finish.
Prototypes
Impact
$20K+ in transaction volume processed through DinePay within the first month of launch.
68% of diners adopted the app within the first three weeks, with over 40% using bill-splitting and in-app tipping features.
Table turnover time reduced by 22%, improving overall service efficiency.
Customer satisfaction scores increased by 35%, driven by faster checkout and reduced payment friction.
Restaurant staff reported a 30% drop in payment-handling time, allowing them to focus more on service and upselling.
DinePay transformed a traditionally slow and inconvenient payment process into a seamless and user centered experience. By focusing on real user needs like quick bill splitting, instant receipts, and contactless transactions, the app gave diners more control and confidence at the table. Through research, iterative design, and real world testing, I created a solution that not only improved payment speed and convenience but also aligned with modern expectations of privacy, accessibility, and autonomy. The result is a smoother dining journey that benefits both customers and restaurant staff, proving that thoughtful design can solve everyday frustrations and deliver real value.
$20K+ in transaction volume processed through DinePay within the first month of launch.
68% of diners adopted the app within the first three weeks, with over 40% using bill-splitting and in-app tipping features.
Table turnover time reduced by 22%, improving overall service efficiency.
Customer satisfaction scores increased by 35%, driven by faster checkout and reduced payment friction.
Restaurant staff reported a 30% drop in payment-handling time, allowing them to focus more on service and upselling.
DinePay transformed a traditionally slow and inconvenient payment process into a seamless and user centered experience. By focusing on real user needs like quick bill splitting, instant receipts, and contactless transactions, the app gave diners more control and confidence at the table. Through research, iterative design, and real world testing, I created a solution that not only improved payment speed and convenience but also aligned with modern expectations of privacy, accessibility, and autonomy. The result is a smoother dining journey that benefits both customers and restaurant staff, proving that thoughtful design can solve everyday frustrations and deliver real value.
$20K+ in transaction volume processed through DinePay within the first month of launch.
68% of diners adopted the app within the first three weeks, with over 40% using bill-splitting and in-app tipping features.
Table turnover time reduced by 22%, improving overall service efficiency.
Customer satisfaction scores increased by 35%, driven by faster checkout and reduced payment friction.
Restaurant staff reported a 30% drop in payment-handling time, allowing them to focus more on service and upselling.
DinePay transformed a traditionally slow and inconvenient payment process into a seamless and user centered experience. By focusing on real user needs like quick bill splitting, instant receipts, and contactless transactions, the app gave diners more control and confidence at the table. Through research, iterative design, and real world testing, I created a solution that not only improved payment speed and convenience but also aligned with modern expectations of privacy, accessibility, and autonomy. The result is a smoother dining journey that benefits both customers and restaurant staff, proving that thoughtful design can solve everyday frustrations and deliver real value.
Learning
This project was a huge reminder that no design is ever truly “done.”
Through multiple iterations and testing, I learned that:
Usability trade-offs are real. Even a small change (like moving the tip option) can unexpectedly shift user behavior.
Micro-journeys matter. Gaps like not showing receipts right after payment can completely break the sense of completion for users.
Visual hierarchy can drive efficiency. Something as simple as color-coded table cards helped managers feel more in control and confident.
And most importantly, design decisions should always be tested, not assumed. Every wrong turn gave me something right to build upon.
This project was a huge reminder that no design is ever truly “done.”
Through multiple iterations and testing, I learned that:
Usability trade-offs are real. Even a small change (like moving the tip option) can unexpectedly shift user behavior.
Micro-journeys matter. Gaps like not showing receipts right after payment can completely break the sense of completion for users.
Visual hierarchy can drive efficiency. Something as simple as color-coded table cards helped managers feel more in control and confident.
And most importantly, design decisions should always be tested, not assumed. Every wrong turn gave me something right to build upon.
This project was a huge reminder that no design is ever truly “done.”
Through multiple iterations and testing, I learned that:
Usability trade-offs are real. Even a small change (like moving the tip option) can unexpectedly shift user behavior.
Micro-journeys matter. Gaps like not showing receipts right after payment can completely break the sense of completion for users.
Visual hierarchy can drive efficiency. Something as simple as color-coded table cards helped managers feel more in control and confident.
And most importantly, design decisions should always be tested, not assumed. Every wrong turn gave me something right to build upon.