me

play

projects

HOME

/

Scan Widget Design

Scan Widget Design

Mobile Banking App · Thai Major Bank (5M users) | Aug–Oct, 2024

01

Overview

01

Overview

02

TIMELINE

02

TIMELINE

03

Research & Findings

03

Research & Findings

04

Design

04

Design

05

Summary

05

Summary

02

01

03

04

05


Role & Contribution

role

UI/UX Designer Intern

UI/UX Designer Intern

Team

Me, 2 Mentors, 1 UX Writer, PMs, Devs, Cross‑functional stakeholders

Me + Mentor + UX Writer + 100 Stakeholders

Duration

3 months (Aug–Oct 2024)

Skills Applied

User & Market Research / Mobile Design / Multi-Platform UX / Design Systems / Developer Handoff

Core Responsibilities

• Led end-to-end UX: research → prototyping → testing → handoff

• Conducted 8 interviews + 42 surveys (N=50)

• Designed 30 widget variations across iOS and Android

• Ran 2 Maze test rounds

• Delivered developer-ready Figma specs, design system, and weekly stakeholder decks

• Led UX from Research → Prototyping → Testing → Handoff

• Led UX from Research → Prototyping → Testing → Handoff

• Conducted 8 interviews + 42 surveys (N=50)

• Conducted 8 interviews + 42 surveys (N=50)

• Designed 30 widget variations across iOS and Android

• Designed 30 widget variations across iOS and Android

• Ran 2 rounds Maze Usability testing

• Ran 2 rounds Maze Usability testing

• Delivered developer-ready Figma specs, design system, and weekly stakeholder decks

Project Details

The Speed War

The Speed War

The Speed War

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 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

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?

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?

iOS

Android

🚀 Available now

iOS

Android

🚀 Available now

TIMELINE

APPROACH & PROCESS

To understand the "why" behind widget adoption, I combined qualitative interviews with quantitative surveys.

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

Segments & Insights
1
1
heavy Users

Use Bank/Other apps widget

Key Pain Points

"Always forget widget

during fast-paced checkout"
"Too many taps even with widget"

"Always forget widget

during fast-paced checkout"
"Too many taps even with widget"

"Always forget widget

during fast-paced checkout"
"Too many taps even with widget"

Solution

  • Lock-screen access 

  • Glanceable circular iOS widget

2
2
occasional Users

Rarely use widgets

Key Pain Points

"Don't know it exists"

"Don't think it makes difference"

"Don't know it exists"

"Don't think it makes difference"

"Don't know it exists"

"Don't think it makes difference"

Solution

  • Simple & clear visual cues

  • Single-tap activation 

  • Brand-consistent visual hierarchy

Key Findings
Key Findings
81.8%
faster intent-to-action

20s → 11s

confirmed via user testing

20s → 11s

confirmed via user testing

85.7%
had used widgets before

but forgot they existed

Unexpected: 66.67%
preferred dark mode
Unexpected: 66.67%
preferred dark mode

While 33%

expected light mode

While 33% expected light mode

Platform research

Platform analysis

To define current widget design standards, I researched platform guidelines

to inform best practices for usability, performance, sizing, and platform alignment.

To define current widget design standards, I researched platform guidelines to inform 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

9:41

Mon 6

􀋞 No Alarm

WIDGET

WIDGET

Cancel

Done

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

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

Ensure high contrast and readability in both

Light and Dark mode

Ensure high contrast and readability in both Light and

Dark mode

Widget Name

Widget Name

Widget Name

􀿫

Label

Label

􀿫

Label

Design

Design Strategy

Week 1–2: Competitive audit (10+ banking apps) + user flow mapping + platform guideline research

Week 3–6: Widget concept exploration → lo-fi prototypes → Maze usability testing (round 1)

Week 7–10: Expanded options → survey validation → narrowed to 3 core widget patterns

Week 11: Hi-fi visual polish + iOS/Android platform adaptation

Week 12: Final handoff + implementation support

Three Core Design Pillars

I balanced three core pillars to move from wireframes to high-fidelity solutions:

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

step 01

Unlock phone

step 02

Splash screen

(Open App)

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
Traditional Flow (~20 seconds)
step 01

Unlock phone

step 02

Open App

(Splash Screen)

Open

banking app

step 03

Authenticate

step 04

Navigate to

home screen

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

Open

banking 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

to 100+ cross-functional

team members

4
User flows
& interaction maps

for QA and engineering

1
Progress Reports

Weekly presentations to more than 100+ stakeholders, bridging the gap between design and business strategy.

2
Competitive
& User analysis

Benchmarking against the Thai banking landscape

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

  • Listen before assuming

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!

Quick Menu & Icon Design

Designed & Made by Rujirekha

Designed

& Made by Rujirekha

神戸, Japan

Updated 02.24.2026

Updated 02.24.2026