Dinepay
Your bill, Your way.
Project Overview
DinePay is a mobile app that simplifies restaurant payments and enhances the dining experience.
With DinePay, customers can easily pay, split bills, and tip directly from their phones. No waiting for the check required.
Role:
UX Designer
Tools:
Figma
Photoshop
Project Date:
2018
Team:
Me, myself & I
Read:
5 Minute
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.
Problem
"Check please" is a thing of the past.
With Integrated QR codes, customers pay in seconds, right at their table.
Research
Assumptions going into the research were that users 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, I 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.
Survey link: https://forms.gle/PmrWazD7RCBAnaXc8
Findings
Discovery
Dining Frequency
20% dine rarely (1–2 times/month), 47% dine occasionally (3–4 times/month), and 33% dine frequently (weekly or more).
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.
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.
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.
Current Mobile Payment Usage
67% do not currently use any mobile payment app for restaurant bills.
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.
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).
Importance of Contactless Payment
53% rate contactless payment as very important
Interest in Loyalty Program
A strong 80% expressed interest in an integrated loyalty program.
User Persona
"I love going out for dinner with friends, but dealing with the check at the end is always a headache. There has to be an easier way!"
Goals & Motivations:
Manage finances efficiently while maintaining a social lifestyle.
Save time on mundane tasks like splitting restaurant bills.
Enjoy seamless, hassle-free dining experiences with friends and family.
Pain Points:
Frustration with waiting for checks at restaurants.
Splitting bills fairly can be a hassle, especially in group settings.
Inability to save and access past bills.
Background
Jane Austin is a detail-oriented and career-driven accountant working at a mid-sized firm in Los Angeles. She recently graduated and is building her financial expertise while balancing her personal life. She and her spouse enjoy exploring LA’s diverse food scene, often dining out on weekends.
Technology Habits
Regularly uses budgeting apps and mobile banking.
Prefers apps with clean UI and minimal friction.
Comfortable with digital wallets like Apple Pay and Venmo.
Jane Austin
Age: 26
Location: Los Angeles, CA
Occupation: Accountant
Education: University Graduate
Martial Status: Married
I created this user persona based on insights gathered from surveys and informal conversations with friends and peers who regularly dine out. I noticed recurring patterns around convenience, time-saving, and frustrations with group payments.
Jane Austin represents a typical user who values efficiency, uses tech in daily life, and often eats out socially. This persona guided many of my design decisions and helped me stay focused on solving real problems throughout the project.
Why did I chose to solve this problem?
Through conversations with restaurant diners, 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.
Solution
Designing a seamless mobile payment 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
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.
User Journey
I created this user journey map to visualize how a user interacts with the dinepay experience from discovering the service via table QR, social media, or a waiter, to achieving key goals like paying the bill or calling staff. It helped me understand user behaviors, motivations, and decision points across the dining experience. This journey also highlighted key moments like splitting the bill or viewing past orders, guiding my design priorities.
To organize my ideas clearly, I used a simple prioritization method to divide features into three groups:
must-have, nice to have, and future considerations.
I focused first on solving the core pain points—like quick QR scan payments, easy bill splitting, and payment history. Then I listed features that could enhance the experience, such as loyalty rewards and having a dedicated app. Finally, I imagined future upgrades like AI-powered splitting and crypto payment to keep the product innovative and scalable.
Wireframes
To start visualizing the user flow, I sketched low-fidelity wireframes by hand. These wireframes helped me quickly explore different layout ideas and how users would interact with the app at each step, from scanning the QR code and viewing the bill to paying or splitting it. I focused on clarity and simplicity, keeping key actions like Pay, Split, and View Menu prominent. These sketches laid the foundation for designing a smooth, intuitive digital dining experience.
User Flow
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.
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.
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 Fidelity Prototype
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.
Usability Testing
Custom text here bro
Design Systems
Hi Fidelity Mockups & Prototype
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.
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.
Final Design
Custom text here bro
