Portable POS
MenuSifu portable POS is an app that can take orders and pay the bill remotely.
WHY PORTABLE?
Enable the server to order and take payment for customers at the table side. The restaurant can enhance the efficiency and customers experience with this product and service.
Original
Take order
Type in at POS
Portable
Take order, sent to kitchen, check with guests
serve
Confirm with guests
pay at table and get receipt
serve
get check
swipe card at POS
bring receipt
HOW IT WORKS?
MenuSifu portable POS has to connect with the main POS system via the wifi in the stroe. It is like a branch of the center POS who takes the part of storing data and doing complicate calculations.
DESIGN CHALLENGES
Screen size
How to make a 14"~15" interface to a 5" screen and not to influence the original user flow too much?
Inheritance
How to inherit the flow and the relationships between the modules from the POS system into portable
Adaption
How to design the interface and interaction for non-digital natives and business driven app?
GET START
1
Decomposing and analyzing Menusifu POS functions and structures.
2
Prioritizing the features and eliminate functions that not necessary for the app.
FLOWS & WIREFRAME
DESIGN INSIGHTS
Tables
Inheriting the color code from POS to table area so that server can seamlessly understand the status and scout.
Order Summary
Use floating button for order summary module that can quickly switch between menu and orders summaries to fulfill the user needs.
Menus
Apply scrolling and swipe function to adapt the small screen and keep the color code for the dish type.
Settle the payments
This feature is actually a most revolutionary part of the design. We combined the complicated scenarios in a screen.
-
Split even
-
Split by %
-
Split by dishes
Split even
Click "Go Even" and put in the denominator on the pad.
Split by %
Put the % of either amount of remaining payment or total payment.
Split by dishes
Click the icon on the top, and split the selected dish to certain portion, and decides the distributions of each payment.
ANIMATION DESIGN
The animation is used for indicate the credit card pay process. It also replaces the loading animation at this step.
Describe your image
Describe your image
Describe your image
Describe your image