/
Scan Widget Design
Mercari Notification box redesign
Mobile Banking App · Thai Major Bank (5M users) | Aug–Oct, 2024
W
あなた宛
In 2024, With PromptPay and QR payments becoming the standard in Thai mobile banking. Every major player offered "Scan to Pay" but user journey remained frustrating.
Step-by-Step Flow
Search/Discover: Home/search bar → filters (category/price/location); personalized recs/AI suggestions.
Product Page: Photos, description, seller rating, price, similar items; "Make Offer" or chat.
Add to Cart/Buy Now: Tap "購入手続きへ" → select shipping/payment (Mercari prepaid, cards).
Checkout: Confirm address/payment → pay (instant for most); seller notified.
Post-Purchase: Track shipment (seller ships within 48h) → receive → "受取評価" (completion).
step 01
Buy
step 02
Payment Confirmation
step 03
Seller Ships
step 04
Track Shipment
step 05
Receive & Inspect
step 06
Tap "商品を受け取りました"
How might we streamline the scan-to-pay process so users can start a payment in as few steps as possible, directly from the lock screen or home screen?
APPROACH & PROCESS
Mixed-Methods (N=50)
• 8 in‑depth interviews (45–60 mins) with heavy vs. occasional users
• 42 surveys to understand widget awareness, usage frequency, and user expectation
User persona
* based on Mercari data
1
heavy Users
Use Bank/Other apps widget
Key Pain Points
"Always forget widget
during fast-paced checkout"
"Too many taps even with widget"
Needs
"Always forget widget
during fast-paced checkout"
"Too many taps even with widget"
Solution
Lock-screen access
Glanceable circular iOS widget
Key Findings
81.8%
faster intent-to-action
20s → 11s
confirmed via user testing
85.7%
had used widgets before
but forgot they existed
Unexpected: 66.67%
preferred dark mode
While 33%
expecting light mode
Platform research
Platform analysis
To define current widget design standards, I researched platform guidelines
to informed best practices for usability, performance, sizing, and platform alignment.
iOS (iOS 17+)
Highlights
Surfaces: Home Screen, Today View, Lock Screen
Circular lock‑screen widgets supported
Strict guidelines on size, tap targets, and legibility
9:41
Mon 6
No Alarm
WIDGET
WIDGET
Cancel
Done
Android (Android 14+)
Highlights
Widgets resizable by the user
High flexibility in placement, background transparency, and grid layouts
12 breakpoint compatibility required
* The ttb widget is a single-function widget focused on scanning, which users can place on iOS Home Screen, Today View, and Lock Screen. Android supports basic placement, but only iOS offers the additional small circular widget type.
Key Design Considerations
Visual Consistency
Maintained uniform spacing, typography, and brand colors regardless of the device OS
Breakpoints & Grids
Ensured icons and touch targets remained consistent
Dark Mode Support
Ensure high contrast and readability in both Light and Dark mode
Design
Three Core Design Pillars
I balanced three core pillars to move from wireframes to high-fidelity solutions:
Simple & Minimal
One clear “Scan” action
Accessible & Familiar
Copy and iconography
aligned with in‑app patterns
Branded & Consistent
Signature color system,
typography and shape language
Before/After Flow
Traditional Flow (~20 seconds)
step 01
Unlock phone
step 02
Open App
(Splash Screen)
step 03
Authenticate
step 04
Navigate to
home screen
step 05
Find scan
step 06
Re‑authenticate
when finished
Widget Flow (~11 seconds)
step 01
Lock-screen widget
step 02
Splash screen
(Open App)
step 03
Instant Camera Activation
step 04
Authenticate once
≈ 45% TIME REDUCTION
in test scenarios
SUMMARY (まとめ)
Key Deliverables
1
Developer-ready
Figma files
for iOS and Android
2
Widget design system
colors, type, spacing, states, and breakpoints
3
Weekly stakeholder presentations
to >100 cross‑functional stakeholders
4
User flows
& interaction maps
for QA and engineering
Reflection
Look out for opportunity!
Proactive communication and a willingness to step up directly led to opportunities on high-impact projects
We listen, we don't judge
Through direct user research, I discovered unexpected behaviors. 66.67% Dark Mode preference proved research over assumptions
Business + Creativity Balance
Learned to maintain creativity under technical limits, business regulations and a strict design system
What could be improved
Adaptive Design Mindset
As iOS 26 introduced Liquid Glass, even now there's no harm in the 2024 design, I realized I didn't think about how designs must grow alongside the OS. To maximize a design's lifespan, I now prioritize adaptability over rigid styling, like using subtle layers instead of relying on flat brand colors. Every redesign costs time and money, so planning for the future is essential
Want to learn more about my process? Let's Get in touch!
