HOME

logo 2.png

Portable POS

MenuSifu portable POS is an app that can take orders and pay the bill remotely.
PAx a60 PP.png

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.  

Group 57.png

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.

Bitmap.png

FLOWS & WIREFRAME

General flow.jpg
wireframes.png

DESIGN INSIGHTS

3.1 Tables(filter dropdown).jpg

Tables

Inheriting the color code from POS to table area so that server can seamlessly understand the status and scout

3.1.2 order summary copy 9.jpg

Order Summary

Use floating button for order summary module that can quickly switch between menu and orders summaries to fulfill the user needs.

3.1 Menu -multiple.jpg

Menus

Apply scrolling and swipe function to adapt the small screen and keep the color code for the dish type. 

3.1.2-1 Settle Copy 12.jpg

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

3.1.2-1 Settle Copy 10.jpg

Split even

Click "Go Even" and put in the denominator on the pad. 

3.1.2-1 Settle Copy 11.jpg

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.  

3.1.2-1 Settle Copy 9.jpg
2.1.0 Split bill select dishes Copy 6.jpg
2.1.0 Split bill select dishes Copy 7.jpg

ANIMATION DESIGN

The animation is used for indicate the credit card pay process. It also replaces the loading animation at this step.

PAX-credit-card-insert-animation.gif
WechatIMG2017
WechatIMG2017

Describe your image

press to zoom
WechatIMG2019
WechatIMG2019

Describe your image

press to zoom
WechatIMG2018
WechatIMG2018

Describe your image

press to zoom
WechatIMG2017
WechatIMG2017

Describe your image

press to zoom
1/3