Role
Sole UI/UX Designer
Scope
Mobile app, UI kit, iOS & Android
Status
UAT · APK buildOutcome
A clear reward journey 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 land on a dashboard that keeps rewards, transactions, campaigns and the scan action in one place.
01 · Home
Bank-linked dashboard with reward summary, banners, history, news 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 viewport with guide frame, flash control and manual fallback.
12 · Manual entry
Enter the product-pack serial with a visual location guide.
13 · Processing
Block interaction while verifying, then move automatically to the result.
14 · Reward success
Show product, QR and reward details with actions to continue.
Account & payout setup
The account path handles both returning users with a verified bank and first-time setup.
26 · Account
Profile, security, bank, notification and support settings.
27 · No bank account
Explain the linking benefits and prompt users to add a bank account.
28 · Bank linked
Show masked account details, verification status and account actions.
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 — Designing Clearer AI Workflows
From fearing AI to designing for it.
Aug 2025
Pizzy — Making Shared Spending Feel Effortless
Pizzy is a mobile application that helps users manage shared budgets with friends in a simple, engaging, and social way.
Jul 2025
Mingg Challenge — Designing One Landing Page a Week
Mingg UI Design Challenge: A 6-week UI design competition where participants created one landing page per week based on a given brief.