WEB่จญๅฎใขใใช
Web application for initial payment machine setup and book menu set up
Duration
Dec 2024-
Feb 2025
Design team
Mara -
Sole member UX UI Designer
Tools
Figma
Adobe Illustrator
Canva
My Roles
UX/UI Designer
Overview
This web application is designed to setup the process for payment machines used in restaurants and retail stores. It offers two main functions: AES-CUT Setting and QReate.
Hi fidelity
To improve form accuracy and reduce user frustration, we implemented real-time inline error validation for each input field.
If a user leaves a required field empty or enters incorrect information, the system immediately highlights the field with a clear error message and visual cues (such as a red border or icon). This allows users to correct mistakes on the spot before moving forward.
Combined with the accordion-style layout, this ensures that users are guided smoothly through the form while maintaining data accuracy and preventing submission errors.
Once all required fields are successfully completed and validated, a QR code is automatically generated and displayed. This QR code can be directly scanned by the machine, triggering an automatic setup process.
To improve form accuracy and reduce user frustration, we implemented real-time inline error validation for each input field.
If a user leaves a required field empty or enters incorrect information, the system immediately highlights the field with a clear error message and visual cues (such as a red border or icon). This allows users to correct mistakes on the spot before moving forward.
Combined with the accordion-style layout, this ensures that users are guided smoothly through the form while maintaining data accuracy and preventing submission errors.
Once all required fields are successfully completed and validated, a QR code is automatically generated and displayed. This QR code can be directly scanned by the machine, triggering an automatic setup process.
1. Simplify the Machine Setup Process
One of the key challenges we identified was the complexity and time-consuming nature of the data input process, especially when users are required to fill in a large amount of information.
To address this, we redesigned the input experience with a focus on simplicity and clarity. We introduced a step-by-step progress indicator at the top of the page and implemented an accordion-style form layout. Each section expands individually for input, and once completed, the accordion collapses and changes color to visually indicate completion.
Discovery
Exploring Problem Space
1. Complex and Time-Consuming Setup
Setting up a machine from scratchโdefining menu items, prices, and receipt formatsโoften requires technical knowledge or external support.
Mistakes or delays in setup can lead to operational downtime and poor customer experience.
2. Lack of Customization and Flexibility
Traditional systems donโt allow stores to easily update or customize menu layouts and pricing.
Menus change often (e.g., seasonal items or special promotions), but modifying settings manually on the machine can be inefficient and error-prone.
Goals and Mock up
AES-CUT Brief Overview
QReate Menu Breif Overview
AES-CUT
Machine already available
to use and can be used
to make payment
QR Code
Scan the QR Code
to the machine to set up
the machine
AES=CUT Setting
Setting from the WebAPP
and get the QR Code
At a glance
AES-CUT่จญๅฎ
It is designed for initial setup of the payment machine which allows the store staff to:
Input and organize menu items (main/side), set prices for each item, configure receipt layout and transaction details, Once settings are complete, the system generates a unique QR code.This QR code is then scanned by the machine, transferring the setup data directly to it.
At a glance
Qreate Menu
This is a menu function for generating menu-specific QR codes. Each QR code links to a specific menu item, which: Can be printed and placed in store, Enables customers to scan and order directly, Designed to support multiple menu items, making it scalable for stores of any size.
In detail
At a glance
ๅๅฅ่จญๅฎ
AES-CUT Base่จญๅฎ
At a glance [Filling error]
At a glance
At a glance [QR Code]
At a glance
In detail
ๆฐใใใในใฏใผใใๅ ฅๅใใฆใใ ใใ
ๆฐใใใในใฏใผใ
*
โโโโโโโโ
ๆฐใใใในใฏใผใ๏ผ็ขบ่ช๏ผ
*
โโโโโโโโ
ใญใฐใคใณ
่จญๅฎใชในใๅ ฅๅ
ๆฐใใใในใฏใผใใๅ ฅๅใใฆใใ ใใ
ๆฐใใใในใฏใผใ
*
Label
ๆฐใใใในใฏใผใ๏ผ็ขบ่ช๏ผ
*
Label
ใญใฐใคใณ
่จญๅฎใชในใๅ ฅๅ
่จญๅฎใใพใใ
ใขใใใญใใใใธ
่จญๅฎๅฎไบใจๅๆใซ
ๆฐ่ฆใในใฏใผใใงใญใฐใคใณ
ใญใฐใคใณID
*
ID
ใในใฏใผใ
*
โโโโโโโโ
ใญใฐใคใณ็ถๆ ใไฟๆใใ
ใญใฐใคใณ
ใในใฏใผใใๅฟใใๆนใฏใใกใ
Ver. X.X.X
ใในใฏใผใใๅฟใใๆน
ใในใฏใผใใใชใปใใใใพใใ
ใญใฐใคใณIDใๅ ฅๅใใฆใใ ใใใ
ใญใฐใคใณID
*
ID
ใญใฐใคใณ
่จญๅฎใชในใๅ ฅๅ
ใในใฏใผใใๅฟใใๆน
ใในใฏใผใใใชใปใใใใพใใ
ใญใฐใคใณIDใๅ ฅๅใใฆใใ ใใใ
ใญใฐใคใณID
*
Mobataro@mobapuro.co.jp
ใญใฐใคใณ
Z
X
C
V
B
N
M
A
S
D
F
G
H
J
K
L
Q
W
E
R
T
Y
U
I
O
P
space
return
123
่จญๅฎใชในใๅ ฅๅ
ใกใผใซใใ้ใใใพใใ
ใ็ป้ฒใกใผใซใขใใฌในๅฎใซใในใฏใผใ
ใชใปใใ
ใฎURLใใ้ใใใพใใใ
URLใใๆฐใใใในใฏใผใใ่จญๅฎใ
ใฆใใ ใใ
่จญๅฎใชในใๅ ฅๅ
ๆฐใใใในใฏใผใใๅ ฅๅใใฆใใ ใใ
ๆฐใใใในใฏใผใ
*
โโโโโโโโ
ๆฐใใใในใฏใผใ๏ผ็ขบ่ช๏ผ
*
โโโโโโโโ
ใญใฐใคใณ
Z
X
C
V
B
N
M
A
S
D
F
G
H
J
K
L
Q
W
E
R
T
Y
U
I
O
P
space
return
123
่จญๅฎใชในใๅ ฅๅ
At a glance
At a glance
The QR Menu feature enables stores to easily generate a digital or printed QR code that links to a customizable menu book containing multiple menu items. Customers can scan the QR code to browse and select their desired items directly from their own devices.
Once the customer has made their selection, staff can scan the chosen items using a scanner connected to the machine, confirming the order in the system. After the order is finalized, the customer can conveniently complete the payment directly through the machine
In detail
In detail
่ณผๅ ฅ
QRใณใผใใใใฆใณใญใผใ
ใกใใฅใผๆฐ่ฆ็ป้ฒใฏใใกใ
ใกใใฅใผ็ป้ฒ
่ณผๅ ฅใๅๆถใๅ จๅๆถใฎQRใณใผใใฎใใฆใณใญใผใใฏใใกใ
่ณผๅ ฅ
QRใณใผใใใใฆใณใญใผใ
ๅๆถ
QRใณใผใใใใฆใณใญใผใ
ๅ จๅๆถ
QRใณใผใใใใฆใณใญใผใ
QReate Menu
AES-CUT่จญๅฎ
QReate Menu
Information
QR
ใกใใฅใผไฝๆ
QRใณใผใใใใฆใณใญใผใ
ไปฅไธใฎใกใใฅใผใฎQRใณใผใใ็บ่กใใพใใ๏ผ
๏ฝถ๏ฝฏ๏พ&๏ฝผ๏ฝฌ๏พ๏พ๏พ๏ฝฐ
่ซๆฑ้้ก(็จ่พผ)
ยฅ1,100
็ป้ฒๅ ๅฎนใฎ็ขบ่ช
ๅบ่ใณใผใ
0001
ๅๅใณใผใ
0001
ๆถ่ฒป็จ็
10%
ๅๅๅ
๏ฝถ๏ฝฏ๏พ&๏ฝผ๏ฝฌ๏พ๏พ๏พ๏ฝฐ
ๆฌไฝไพกๆ ผ๏ผ็จๆ๏ผ
ยฅ1000
ๆถ่ฒป็จ้ก
ยฅ100
QRใณใผใใใใฆใณใญใผใ
ๅฎไบ
QReate Menu
ๅบ่ใณใผใ
*
0000~9999
ๅๅใณใผใ
*
0000~9999
ๆถ่ฒป็จ็
*
8%
10%
ๅๅๅ
*
ๅ ฅๅ
ๆฌไฝไพกๆ ผ๏ผ็จๆ๏ผ
*
0-999999
ๆถ่ฒป็จ้ก
*
0-99999
่ซๆฑ้้ก(็จ่พผ)
ยฅ-----
QR
ใกใใฅใผไฝๆ
ใกใใฅใผ็ป้ฒ
ๅ่งใซใฟใซใ่ฑๆฐๅญ 20ๆๅญไปฅๅ
ๆฐๅญ4ๆก
ๆฐๅญ4ๆก
AES-CUT่จญๅฎ
QReate Menu
Information
QReate Menu
ๅบ่ใณใผใ
*
0001
ๅๅใณใผใ
*
0001
ๆถ่ฒป็จ็
*
8%
10%
ๅๅๅ
*
๏ฝถ๏ฝฏ๏พ&๏ฝผ๏ฝฌ๏พ๏พ๏พ๏ฝฐ
ๆฌไฝไพกๆ ผ๏ผ็จๆ๏ผ
*
1000
ๆถ่ฒป็จ้ก
*
100
่ซๆฑ้้ก(็จ่พผ)
ยฅ1,100
QR
ใกใใฅใผไฝๆ
ใกใใฅใผ็ป้ฒ
ๅ่งใซใฟใซใ่ฑๆฐๅญ 20ๆๅญไปฅๅ
ๆฐๅญ4ๆก
ๆฐๅญ4ๆก
AES-CUT่จญๅฎ
QReate Menu
Information
QReate Menu
ๅบ่ใณใผใ
*
0001
ๅๅใณใผใ
*
11111
ๆญฃใใ็ชๅทใๅ ฅๅใใฆใใ ใใ
ๆถ่ฒป็จ็
*
8%
10%
ๅๅๅ
*
๏ฝถ๏ฝฏ๏พ&๏ฝผ๏ฝฌ๏พ๏พ๏พ๏ฝฐ
ๆฌไฝไพกๆ ผ๏ผ็จๆ๏ผ
*
910
ๆถ่ฒป็จ้ก
*
่ซๆฑ้้ก(็จ่พผ)
ยฅ1,001
ใกใใฅใผ็ป้ฒ
้้กใฏ10ๅๅไฝใงๅ ฅๅใใฆใใ ใใใ1ๅๅไฝใฎๅ ฅๅใฏ
ใงใใพใใใ
ๅ่งใซใฟใซใ่ฑๆฐๅญ 20ๆๅญไปฅๅ
ๆฐๅญ4ๆก
ๆฐๅญ4ๆก
QR
ใกใใฅใผไฝๆ
ใจใฉใผใ็บ็ใใพใใ๏ผ็ขบ่ชใใฆใใ ใใ
AES-CUT่จญๅฎ
QReate Menu
Information
QReate Menu
Bhaswara Maralaut
More projects and experiences are always on the way.
Let's keep in touch!