FnB Reservation and Order Apps
FnB Reservation and Order Apps
An app that help customer to find, order, and reserve their favourite restaurant.
An app that help customer to find, order, and reserve their favourite restaurant.
FnB Reservation and Order Apps
An app that help customer to find, order, and reserve their favourite restaurant.
Find, Order, and Book Your Perfect Table, Hassle-Free!
Find, Order, and Book Your Perfect Table, Hassle-Free!
Find, Order, and Book Your Perfect Table, Hassle-Free!
Struggling to find the perfect restaurant and secure a table? We know how frustrating it can be to search for a great dining spot only to face long waits or unavailable reservations. That’s why we’re here to make it easier—discover and reserve your next dining experience effortlessly, all in one place.
Struggling to find the perfect restaurant and secure a table? We know how frustrating it can be to search for a great dining spot only to face long waits or unavailable reservations. That’s why we’re here to make it easier—discover and reserve your next dining experience effortlessly, all in one place.
Struggling to find the perfect restaurant and secure a table? We know how frustrating it can be to search for a great dining spot only to face long waits or unavailable reservations. That’s why we’re here to make it easier—discover and reserve your next dining experience effortlessly, all in one place.
Goals
Help users easily discover and reserve tables at their favorite F&B outlets
Reduce no-show rates and increase operational efficiency for restaurants
Provide a smoother and more intuitive reservation flow for end users
Enhance the dining experience with smart features like estimated wait times and queue notifications
Help user to order menu before they arrive or take it home with take away and delivery features.
Help users easily discover and reserve tables at their favorite F&B outlets
Reduce no-show rates and increase operational efficiency for restaurants
Provide a smoother and more intuitive reservation flow for end users
Enhance the dining experience with smart features like estimated wait times and queue notifications
Help user to order menu before they arrive or take it home with take away and delivery features.
Help users easily discover and reserve tables at their favorite F&B outlets
Reduce no-show rates and increase operational efficiency for restaurants
Provide a smoother and more intuitive reservation flow for end users
Enhance the dining experience with smart features like estimated wait times and queue notifications
Help user to order menu before they arrive or take it home with take away and delivery features.
Summary of Project
Summary of Project
Summary of Project
Project Duration
3 months (May - Aug 2022)
Team Member
Andrian Cedric (UI/UX Designer)
Daniel Roy (Senior UI/UX Designer)
Tools
Figma, Excel, Google Form
Design Process Overview
Design Process Overview
This are our steps to know more about user's problem and how we can solve their problem through our solution.
This are our steps to know more about user's problem and how we can solve their problem through our solution.
Design Process Overview
This are our steps to know more about user's problem and how we can solve their problem through our solution.
Solving the Right Problem
Solving the Right Problem
Solving the Right Problem
We start with try and collect
We start with try and collect
We start with try and collect
We have selected various restaurant and cafe which has in-house app, We tried their app, we collected the food, and we compare how the app works.
We found that most of the apps doesn't have reservation features and quite unreliable real-time queue updates.
We have selected various restaurant and cafe which has in-house app, We tried their app, we collected the food, and we compare how the app works.
We found that most of the apps doesn't have reservation features and quite unreliable real-time queue updates.
We have selected various restaurant and cafe which has in-house app, We tried their app, we collected the food, and we compare how the app works.
We found that most of the apps doesn't have reservation features and quite unreliable real-time queue updates.
Solving the Problem Right
Solving the Problem Right
Solving the Problem Right
We continue with solutions
We continue with solutions
We continue with solutions
After defining the user needs, I moved into solution validation through Wireframes and Prototyping—built low-to-high fidelity wireframes to validate layouts and flows.
We also conduct usability testing to iterate our design, and found improvement in task completion from 86% to 100%
After defining the user needs, I moved into solution validation through Wireframes and Prototyping—built low-to-high fidelity wireframes to validate layouts and flows.
We also conduct usability testing to iterate our design, and found improvement in task completion from 86% to 100%
After defining the user needs, I moved into solution validation through Wireframes and Prototyping—built low-to-high fidelity wireframes to validate layouts and flows.
We also conduct usability testing to iterate our design, and found improvement in task completion from 86% to 100%
Emphatize
Emphatize
We did user research through survey to gain insight from them. We also did mini-simulation to simulate our workflow.
We did user research through survey to gain insight from them. We also did mini-simulation to simulate our workflow.
Emphatize
We did user research through survey to gain insight from them. We also did mini-simulation to simulate our workflow.
Survey
Survey
Survey
We asked to know them more
We asked to know them more
We asked to know them more
We asked 25 users (age 18-35 and frequently used FnB apps) to fill out this survey. The goal was to gather broad insights about dining/order habits and reservation behaviors.
Key Highlights:
76% used promo code/voucher found inside the app.
68% use the app to order delivery or take away foods.
4% want to see estimated waiting time before arriving/delivery.
36% have found bugs inside an app that disturbing their journey.
This validated our hypothesis: current FnB apps fail to prioritize usability, real-time transparency, and lack of reservation features.
We asked 25 users (age 18-35 and frequently used FnB apps) to fill out this survey. The goal was to gather broad insights about dining/order habits and reservation behaviors.
Key Highlights:
76% used promo code/voucher found inside the app.
68% use the app to order delivery or take away foods.
4% want to see estimated waiting time before arriving/delivery.
36% have found bugs inside an app that disturbing their journey.
This validated our hypothesis: current FnB apps fail to prioritize usability, real-time transparency, and lack of reservation features.
We asked 25 users (age 18-35 and frequently used FnB apps) to fill out this survey. The goal was to gather broad insights about dining/order habits and reservation behaviors.
Key Highlights:
76% used promo code/voucher found inside the app.
68% use the app to order delivery or take away foods.
4% want to see estimated waiting time before arriving/delivery.
36% have found bugs inside an app that disturbing their journey.
This validated our hypothesis: current FnB apps fail to prioritize usability, real-time transparency, and lack of reservation features.
Simulation
Simulation
Simulation
We test our solution in-house
We test our solution in-house
We test our solution in-house
Before we develop the application further, we did "mini" simulation in our company, simulate user's workflow to order and collect their order. We also conducted group discussion to gather user feedbacks to developed design.
Before we develop the application further, we did "mini" simulation in our company, simulate user's workflow to order and collect their order. We also conducted group discussion to gather user feedbacks to developed design.
Before we develop the application further, we did "mini" simulation in our company, simulate user's workflow to order and collect their order. We also conducted group discussion to gather user feedbacks to developed design.
Define
Define
We did research to direct and indirect competitor to validate our idea. We also conduct user research at Moonlay to gather user feedback and insight.
We did research to direct and indirect competitor to validate our idea. We also conduct user research at Moonlay to gather user feedback and insight.
Define
We did research to direct and indirect competitor to validate our idea. We also conduct user research at Moonlay to gather user feedback and insight.
Problem Statement
Problem Statement
Problem Statement
Urban diners face significant challenges when using digital reservation systems, including difficulties in booking tables or menus, limited access to real-time queue and order tracking, and inconsistent app performance that hinders a seamless user experience.
Urban diners face significant challenges when using digital reservation systems, including difficulties in booking tables or menus, limited access to real-time queue and order tracking, and inconsistent app performance that hinders a seamless user experience.
Urban diners face significant challenges when using digital reservation systems, including difficulties in booking tables or menus, limited access to real-time queue and order tracking, and inconsistent app performance that hinders a seamless user experience.
Solution Statement
Solution Statement
Solution Statement
Design a mobile-first reservation app that provides real-time queue tracking, intuitive reservation flows, and simplified cancellation or rescheduling options.
Design a mobile-first reservation app that provides real-time queue tracking, intuitive reservation flows, and simplified cancellation or rescheduling options.
Design a mobile-first reservation app that provides real-time queue tracking, intuitive reservation flows, and simplified cancellation or rescheduling options.
How Might We
How Might We
How Might We
What can we solve?
What can we solve?
What can we solve?
To guide ideation, I reframed user problems into opportunities:
How might we make queue and wait times more transparent for users?
How might we reduce the number of steps to complete a reservation?
How might we make it easier to cancel or reschedule without calling the restaurant?
To guide ideation, I reframed user problems into opportunities:
How might we make queue and wait times more transparent for users?
How might we reduce the number of steps to complete a reservation?
How might we make it easier to cancel or reschedule without calling the restaurant?
To guide ideation, I reframed user problems into opportunities:
How might we make queue and wait times more transparent for users?
How might we reduce the number of steps to complete a reservation?
How might we make it easier to cancel or reschedule without calling the restaurant?
User Persona
User Persona
User Persona
Rachel
Rachel
Rachel
Age: 26
Job: Marketing Executive
Tech Savviness: Moderate
Pain Points:
Doesn’t want to wait in line
Needs to quickly reserve with friends during lunch breaks
Frustrated with apps that crash or are slow to respond
Goals:
Make a reservation in <1 minute
Get real-time queue updates
Easily change/cancel a booking without calling
Age: 26
Job: Marketing Executive
Tech Savviness: Moderate
Pain Points:
Doesn’t want to wait in line
Needs to quickly reserve with friends during lunch breaks
Frustrated with apps that crash or are slow to respond
Goals:
Make a reservation in <1 minute
Get real-time queue updates
Easily change/cancel a booking without calling
Age: 26
Job: Marketing Executive
Tech Savviness: Moderate
Pain Points:
Doesn’t want to wait in line
Needs to quickly reserve with friends during lunch breaks
Frustrated with apps that crash or are slow to respond
Goals:
Make a reservation in <1 minute
Get real-time queue updates
Easily change/cancel a booking without calling
Create
Create
We visualize our idea into visible product from low-fidelity prototype to hi-fidelity prototype with limited time spent.
We visualize our idea into visible product from low-fidelity prototype to hi-fidelity prototype with limited time spent.
Create
We visualize our idea into visible product from low-fidelity prototype to hi-fidelity prototype with limited time spent.
Design System
Typography
Primary: Nunito – Clear, fun, modern sans-serif
Hierarchy: Title (26pt), Subtitle (16pt), Body (14pt)
Color Palette
Primary: #46237A
Secondary: #F58634
Dark Text: #353535
Neutral BG: #FCFCFC
Success: #007965
Error: #FF495C
Typography
Primary: Nunito – Clear, fun, modern sans-serif
Hierarchy: Title (26pt), Subtitle (16pt), Body (14pt)
Color Palette
Primary: #46237A
Secondary: #F58634
Dark Text: #353535
Neutral BG: #FCFCFC
Success: #007965
Error: #FF495C
Typography
Primary: Nunito – Clear, fun, modern sans-serif
Hierarchy: Title (26pt), Subtitle (16pt), Body (14pt)
Color Palette
Primary: #46237A
Secondary: #F58634
Dark Text: #353535
Neutral BG: #FCFCFC
Success: #007965
Error: #FF495C
Developed into low-fidelity prototype
Developed into low-fidelity prototype
Developed into low-fidelity prototype
This prototype developed to visualize our idea as minimal effort as possible. Any feedback and major redesign of our design are possible here.
This prototype developed to visualize our idea as minimal effort as possible. Any feedback and major redesign of our design are possible here.
This prototype developed to visualize our idea as minimal effort as possible. Any feedback and major redesign of our design are possible here.
Finalize as hi-fidelity protoype
Finalize as hi-fidelity protoype
Finalize as hi-fidelity protoype
After several feedback and iteration, we finalize our design before we hand over it to development team.
After several feedback and iteration, we finalize our design before we hand over it to development team.
After several feedback and iteration, we finalize our design before we hand over it to development team.
Showcase
Showcase
This is the section where you can see the beauty of the design
This is the section where you can see the beauty of the design
Showcase
This is the section where you can see the beauty of the design