At a glance
Responsibility
Product / UX/UI Designer across mobile web, desktop, and back-office platforms. Led UX/UI design, information architecture, user flows, wireframing, prototyping, design system work, design QA, and ongoing product improvements.
Details
The challenge
Store data existed. Understanding it was the harder part. Mobapro brings sales, payment, ordering, and store signals into one experience that helps Japanese merchants monitor performance and decide what to do next.
Details
15 โ Product Outcome
Created a centralized, real-time dashboard across all devices.
Simplified the UX and improved engagement with AI and KPIs.
Positive client feedback and design positioned for award submission.
Details
Screens
Details
Real-Time Sales Dashboard for POS Ecosystem
Mobapro โ Retail Analytics for Better Business Decisions
Product Snapshot
Key Details
Description
Client
Arunas Akatsuki (POS Machine Manufacturer)
Product
Mobapro โ Real-time Web App for Sales Dashboard
Role
Product Designer (UX/UI)
Tools
Figma, Illustrator, After Effects / Rive, Canva
Timeline
Dec 2024 โ Present
Team
Product Manager, Engineers, Product Designer
Awards Target
Submission for Good Design Award 2026 (Japan)
Design Pillars
Real-time data, Scalability, Motivation, Simplicity, Accessibility, AI Integration
Product Overview
Sales Data View
Compare Stores
WEB Coupon
AI analysis
About me, client, and our company service
My key responsibility
As a newly onboarded product designer, I took full ownership of the product design with key responsibilities:
Continued legacy design, transforming it into a clean, and modern look with accessible for all design
Worked cross-functionally with PMs and engineers to align UX and technical feasibility
Handled end-to-end UX/UI, including design QA and handoff
Translated business problems into feature solutions
Scaled for multi-store environments (10 to 100+ stores)
About the Client
Arunas Akatsuki manufactures advanced POS (Point of Sale) microelectronic equipment, including AES-CUT payment terminals, PayQR devices, and digital Menu Book systems, used across 100+ retail stores in Japan.
Learn more
About Mobapro
Mobapro Designed to enhance sales data visibility and integrates real-time sales data from Arunas Akatsuki Machines
Learn more
01 โ The Context
Retail businesses generate valuable data through sales, payment, ordering, and store systems. Mobapro brings these signals together so merchants can understand performance, compare results, identify attention points, and take action.
AES CUT Payment
PayQR
Menu Book
At a Glance
Design Challenges
Challenge Type
Description
Legacy Handoff
I inherited an outdated, stakeholder-designed interfaceโvisually inconsistent, not user-centric, and missing accessibility.
Fragmented Data
Data was scattered across 3 systems: AES-CUT, PayQR, Book Menu. No unified interface existed.
Low Engagement
Users passively checked sales without actionable insights, upgrades, or motivation to grow.
Lack of Upgrade Paths
No mechanism for upselling premium features (like coupons or AI tools).
Missing Insights
No customer data filters, product analytics, or campaign impact tools.
Project Goals
Goal
Description
Unify
Create a centralized dashboard to integrate AES-CUT, PayQR, and Book Menu sales data.
Simplify
Redesign legacy interface into a modern, AI-inspired, accessible, and user-centric experience.
Motivate
Encourage store managers to actively improve sales through features like coupons, KPIs, and goal visualizations.
๐ Win Recognition
Position the product for Good Design Award 2026 by aligning with design excellence standards in usability, universality, and future vision.
User-Centered Research Insights (based on stakeholder interviews & market trends
Research & Planning
Discussed goals and user needs with Arunas Akatsuki [Trough Project Manager]
Defined key metrics and required data views
Frameworks & Principles Used
Fogg Behavior Model (Motivation + Ability + Trigger): To encourage coupon creation and dashboard usage
Hickโs Law: Simplified UI to reduce decision fatigue
Jakob Nielsenโs Heuristics: Visibility of system status, user control, error prevention
Design for Behavior Change (UXMatters): Nudges via visual goals, campaign ROI feedback
WCAG 2.1 Accessibility Principles: Color contrast, font size, keyboard accessibility roadmap
Direct UI Design (Wireframing skipped)
Due to short time, we jumped straight into high-fidelity UI based on clear requirements
Focused on real-time sales dashboards and mo
Refine Design Guideline
01. Typography
Font StyleGuide
Hiragino sans
Text Weight
W3
Aa
W4
Aa
W5
Aa
W7
Aa
Text Style
Alphabet IOS
Android
Japanese Android
Japanese IOS
Hiragino sans W3
Hiragino sans W4
Hiragino sans W5
Hiragino sans W6
Noto Sans JP_Regular
Noto Sans JP_Medium
Noto Sans JP_Bold
Default
Text Sizes
Hiragino sans โ 30pt
Hiragino sans โ 26pt
Hiragino sans โ 20pt
Hiragino sans โ 18/16pt
Hiragino sans โ 15pt
Hiragino sans โ 12pt
Hiragino sans โ 12pt
Noto Sans JP โ 30pt
Noto Sans JPโ 26pt
Noto sans JP โ 24pt
Noto sans JP โ 16pt
Noto sans JP โ 14pt
Noto sans JP โ 12pt
H1
H2
H3
Default text
Notes 1
Notes 2
Notes 3
H1
H2
H3
Default text
Notes 1
Notes 2
02. Colors
Color Ratio
Main Color
Primary
#116ACC
Primary
#116ACC
Secondary
Primary
#116ACC
Primary
#116ACC
Primary
#116ACC
Primary
#116ACC
Primary
#116ACC
Primary
#116ACC
Primary
#116ACC
Primary
#116ACC
Primary
#116ACC
Primary
#116ACC
Primary
#116ACC
Primary
#116ACC
Text Color
Primary
#116ACC
Primary
#116ACC
Primary
#116ACC
Primary
#116ACC
Primary
#116ACC
Primary
#116ACC
Delete
Primary
#116ACC
Primary
#116ACC
Label
Primary
#116ACC
Outline/Shape
Primary
#116ACC
Background
Primary
#116ACC
Final Delivery
Provided annotated design files for developer handoff
Assisted with design QA during implementation
Log in page
Onboarding
Mobile โ Quick Monitoring
ใใใผใธใฃใผ๏ผใขใใใญๅคช้
๏ผๅบ่
ๅพๆใ็ฒพ็ฎๆฉ
็ฎๆจใพใงใใจ464,960
ๅ
281
ๅ
ๅๆฅๆฏ
ไผ่จๅๆฐ
๏ผ11 ( 2% )
ๅนณๅ่ณผๅ ฅไพกๆ ผ
ๅๆฅๆฏ
3980.0
ๅ
-10ๅ ( -1%ใ)
ๆฏๆ็จฎๅฅใฉใณใญใณใฐ
ๅบ่ใฉใณใญใณใฐ
็พๅจใฎๅฃฒไธ้ซ
ๆธ่ฐทในใใข
267,500ๅ
ๆฐๅฎฟในใใข
115,500ๅ
ไธ้ในใใข
267,500ๅ
4ไฝ
ไธ้ในใใข
267,500ๅ
5ไฝ
ไธ้ในใใข
267,500ๅ
6ไฝ
ไธ้ในใใข
267,500ๅ
7ไฝ
ไธ้ในใใข
267,500ๅ
8ไฝ
ไธ้ในใใข
267,500ๅ
ในใฟใณใใผใใใฉใณ
ๆ้ก 1,000ๅ
ใขใใใฐใฌใผใ
ใใฌใใขใ ใใฉใณ
ๆ้ก 4,000ๅ
ใขใใใฐใฌใผใ
ใในใฆใฎใใฉใณ่ฉณ็ดฐใ่ฆใ
็พๅจใฎๅฃฒไธ้ซ
543,500
ๅ
ๅฃฒไธ็ฎๆจ
600,000ๅ
็พๅจใฎ้ๆ็ 90.5%
2025/02/04(็ซ) 17:20็พๅจ
็ฎๆจใพใงใใจ94,960
ๅ
78
ๅ
ๅๆฅๆฏ
ไผ่จๅๆฐ
๏ผ3ๅ ( 2% )
ๅนณๅ่ณผๅ ฅไพกๆ ผ
ๅๆฅๆฏ
1490.0
ๅ
-10ๅ ( -1%ใ)
ๅฃฒไธใฉใณใญใณใฐ
้คๆฒนใฉใผใกใณ
ๅณๅใฉใผใกใณ
ๆฏๆ็จฎๅฅใฉใณใญใณใฐ
็พ้
PayPay
ๅธๅฃฒๆฉ
2025/02/04(็ซ) 17:20็พๅจ
118
ๅ
ๅๆฅๆฏ
ไผ่จๅๆฐ
๏ผ3 ( 2% )
ๅนณๅ่ณผๅ ฅไพกๆ ผ
ๅๆฅๆฏ
990.0
ๅ
๏ผ9ๅ ( 1%ใ)
ๅฃฒไธใฉใณใญใณใฐ
ใใใใณใฐใฉใณใญใณใฐ
ๆฏๆ็จฎๅฅใฉใณใญใณใฐ
ใขใผใ 1
ใขใผใ 2
ใขใผใ 3
ไธ็ทใซ่ณผๅ ฅใใใใใฎใฉใณใญใณใฐ
้คๆฒนใฉใผใกใณ
่ใฉใผใกใณ
37ๅ
่ฑ่ใฉใผใกใณ
32ๅ
ใญใ
4ไฝ
32ๅ
ใใฃใผใทใฅใผ
5ไฝ
32ๅ
ใฎใ
6ไฝ
32ๅ
ใใใใใธใซใฉใผใกใณ
7ไฝ
32ๅ
ๅฑฑๆคๅฆใ ้บบ
8ไฝ
32ๅ
้ถ็ฝๆนฏใฉใผใกใณ ๆๅญ้ขจๅณ
9ไฝ
32ๅ
้ปใใพๆ ใ ้บบ
10ไฝ
32ๅ
49ๅ
ใใฃใจ่ฆใ
4ไฝ
ๅบ่ใฉใณใญใณใฐ
ๆธ่ฐทในใใข
267,500ๅ
ๆฐๅฎฟในใใข
115,500ๅ
ไธ้ในใใข
112,500ๅ
4ไฝ
ไธญ้ในใใข
110,500ๅ
5ไฝ
ๆฑไบฌในใใข
97,500ๅ
6ไฝ
ไธ้ในใใข
94,000ๅ
7ไฝ
้ๅบงในใใข
89,500ๅ
8ไฝ
่ตคๅในใใข
87,500ๅ
9ไฝ
่ตคๅในใใข
87,500ๅ
10ไฝ
่ตคๅในใใข
87,500ๅ
ใใฃใจ่ฆใ
ไพฟๅฉใชๆฉ่ฝ
ๆฉ่ฝไธ่ฆง
Coming soon
้ ไฟก
ใญใฃใณใใผใณใซใซใ
ๅๅใซใซใ
ใๅฎขใใพใซใซใ
ๅบ่ใซใซใ
็พๅจใฎๅฃฒไธ้ซ
543,500
ๅ
2025/02/04(็ซ) 17:20็พๅจ
4ๆ
5ๆ
6ๆ
7ๆ
8ๆ
19ๆ
10ๆ
11ๆ
12ๆ
35ไธๅ
30ไธๅ
25ไธๅ
20ไธๅ
15ไธๅ
10ไธๅ
5ไธๅ
0ๅ
ๆ้ๅฅ
ๆฅๅฅ
ๆๅฅ
็พๅจใฎๅฃฒไธ้ซ
543,500
ๅ
2025/02/04(็ซ) 17:20็พๅจ
4ๆ
5ๆ
6ๆ
7ๆ
8ๆ
19ๆ
10ๆ
11ๆ
12ๆ
35ไธๅ
30ไธๅ
25ไธๅ
20ไธๅ
15ไธๅ
10ไธๅ
5ไธๅ
0ๅ
ๆ้ๅฅ
ๆฅๅฅ
ๆๅฅ
ๆฏๆ็จฎๅฅใฉใณใญใณใฐ
ใใผใฟ่กจ็คบๆ้๏ผ2025/02/04-02/04
็พ้
PayPay
Visa
208
130
90
20
10
็พ้
PayPay
WAON
Edy
iD
QP
PiTaPa
Nanaco
ๆฅฝๅคฉPay
dๆใ
ๆฏๆ็จฎๅฅใฉใณใญใณใฐ
ๆฌๆฅ
7ๆฅ้ๅ่จ
1ใๆๅ่จ
Analytics โ Trends, Rankings & Transactions
Campaign & Coupon Management
Coupon Campaign for the Customer view (Premium)
Bhaswara Maralaut
More projects and experiences are always on the way.
Let's keep in touch!
AI Suggestions
Customer Profile Cards
Upgrade plan
Future Design UI Plan
Daily goals
visual KPIs
comparison to other branches
