Mobile app & UI kit · 2026
A QR reward experience for painters and contractors — from code verification to bank withdrawal.
A reward app for a major paint manufacturer
I designed the end-to-end mobile experience and UI kit, turning physical promotional codes into a clear digital reward journey.
Brands by 4Oranges
Understand the reward moment
Painters and contractors open the app with one goal: verify a code and know what happens to their money. The experience had to answer that quickly.
Fast entry
Scan or enter a serial code.
Clear result
Know whether the code worked.
Visible money
Track rewards and transfers.
The product needed to distinguish a verified reward from money already transferred to a bank account.
Create account
Add bank
Scan code
Earn reward
Withdraw
Track status
Build around the next action
Scanning stayed central. Profile, bank details, histories, rules and support were organized around the moments users needed them.
Connect the complete flow
I mapped the key product journeys from account entry to code validation, reward confirmation and payout setup.
Entry journey
Users sign in, then land on a dashboard that keeps rewards, transactions, campaigns and the scan action in one place.
01 · Login
Zalo or account sign-in.
02 · Home
Reward balance, history, campaigns and scan entry.
QR reward journey
The main path supports camera scanning, a manual fallback, a clear processing state and an outcome with the reward details.
11 · Scan QR
Camera-first scan with manual fallback.
12 · Manual entry
Enter the serial printed on the product.
13 · Processing
System validates the code.
14 · Reward success
Show value, campaign and transaction status.
Account & payout setup
The account path handles both returning users with a verified bank and first-time setup.
26 · Account
Profile, bank, security and support settings.
27 · Bank linked
Verified account ready for new withdrawals.
28 · Empty state
Explain the benefit and prompt the next action.
Design beyond success
The flow was checked against business rules, then refined for invalid, used, expired, pending and failed states.
Valid code
Reward added
Invalid or used
Explain what happened
Processing
Keep the status visible
Transfer failed
Show a clear next step
A system built from the product
Foundations, components and states were created alongside the real flows so the interface stayed consistent through implementation.
Typography
SF Pro (iOS) · Inter (cross-platform)
Display/H1
1.800.000đ Tổng thưởng
Display/H2
Lịch sử giao dịch
Display/H3
Thông tin tài khoản
Heading/Bold
Tất cả · Có thể rút
Body/Regular
Cập nhật chương trình và tin tức mới nhất
Body/Semibold
Liên kết tài khoản ngân hàng
Label/Regular
Họ và tên · Ngày sinh · Địa chỉ
Caption/Regular
Ngày yêu cầu: Hôm nay, 11:00
Tab/Label
Trang chủ · Lịch sử · Tin tức
Color system
#FBA919
Brand yellow
#F86706
Brand orange
#FFF4DA
Warm canvas
#351303
Ink
Core components
A complete reward journey
The final design covered the customer journey from registration to withdrawal, supported by reusable components and implementation-ready states.
End-to-end mobile flow
Reusable UI system
Clear reward states
Keep exploring the work
Next project
Zoan AI – AI Workflow Management
From fearing AI to designing for it.
Jan 2025
TrueProfit - Landing Page & Onboarding Illustrations
- Contributed to refining the [TrueProfit landing page](https://trueprofit.io/)- Redesigned the in-app onboarding flow for TrueProfit
Feb 2025
Language Learning Apps — UI & Motion Enhancement Showcase
UI improvements for top-rated learning apps on the App Store.