Transaction Panel Design
Transaction Panel Design
Transaction Panel Design
Seamless transactions at your fingertips with a thoughtful menu design
Seamless transactions at your fingertips with a thoughtful menu design
Project Background
Project Background
Project Background
To improve one-handed use, core actions (transfer, pay, scan) were moved to a bottom panel. A three-stage expansion was introduced to help users quickly access features and streamline interaction.
To improve one-handed use, core actions (transfer, pay, scan) were moved to a bottom panel. A three-stage expansion was introduced to help users quickly access features and streamline interaction.
Problem
Problem
Problem
Usability & Onboarding
Usability & Onboarding
How can we help users quickly understand and adapt to the new panel?
How can we help users quickly understand and adapt to the new panel?
How can the panel support diverse payment scenarios to improve efficiency?
How can the panel support diverse payment scenarios to improve efficiency?
Constraints & Challenges
Constraints & Challenges
Constraints & Challenges
Interaction Logic
Interaction Logic
Defining clear expansion behavior across different usage contexts
Defining clear expansion behavior across different usage contexts
Visual Consistency
Visual Consistency
Making the panel stand out while maintaining home screen balance and brand coherence
Making the panel stand out while maintaining home screen balance and brand coherence
Before
After
After
After
Design Goals
Design Goals
Design Goals
User Need
User Need
User Need
How might we
How might we
design an intuitive, user-friendly panel that allows users to complete transactions quickly?
design an intuitive, user-friendly panel that allows users to complete transactions quickly?
Business Goal
Business Goal
Business Goal
How might we
How might we
create a flexible, brand-consistent panel that guides users and supports future expansions?
create a flexible, brand-consistent panel that guides users and supports future expansions?
Design Process
Design Process
Design Process
Desktop research
Desktop research
Before design, I researched LinePay’s interaction model to leverage familiar patterns:
Before design, I researched LinePay’s interaction model to leverage familiar patterns:
Interaction Behavior
Interaction Behavior
Adopted swipe-to-expand/collapse to reduce learning curve
Adopted swipe-to-expand/collapse to reduce learning curve
Motion Details
Motion Details
Implemented dual triggers (swipe & tap) with improved error tolerance and rebound, enhancing intuitiveness and stability
Implemented dual triggers (swipe & tap) with improved error tolerance and rebound, enhancing intuitiveness and stability
UX Interaction Design
UX Interaction Design
Integrated the barcode feature using a familiar swipe-to-expand pattern
Integrated the barcode feature using a familiar swipe-to-expand pattern
Defined a three-stage panel height system to support flexible usage scenarios
Defined a three-stage panel height system to support flexible usage scenarios
UI Visual Design
UI Visual Design
Used the brand’s primary red to highlight the panel on the home screen
Used the brand’s primary red to highlight the panel on the home screen
Applied gradient styling to align with the 8-icon grid for visual consistency
Applied gradient styling to align with the 8-icon grid for visual consistency
Usability Testing
Usability Testing
To validate whether the new Transaction Panel improves efficiency and intuitiveness, I designed task-based tests to observe user behavior in real scenarios
To validate whether the new Transaction Panel improves efficiency and intuitiveness, I designed task-based tests to observe user behavior in real scenarios
1
1
Transaction Discoverability
Transaction Discoverability
Find and complete a transfer from the home screen
Find and complete a transfer from the home screen
2
2
Event-Driven Payment
Event-Driven Payment
Locate the "Member Day" promotion and complete a payment
Locate the "Member Day" promotion and complete a payment
3
3
Barcode Usability
Barcode Usability
Access and present the mobile barcode from the home screen
Access and present the mobile barcode from the home screen
Testing Method
Testing Method
Method
Method
Task-based usability testing
Task-based usability testing
Interviewers
Interviewers
5 people
5 people
Evaluation Metrics
Evaluation Metrics
Task completion success
Task completion success
Smoothness of interaction; any confusion or navigation issues
Smoothness of interaction; any confusion or navigation issues
Key Insights
Key Insights
High Discoverability of Key Functions
High Discoverability of Key Functions
All participants can quickly identify key actions upon landing on the home screen.
All participants can quickly identify key actions upon landing on the home screen.
Smooth panel interaction
Smooth panel interaction
Users found the auto-collapse on scroll helpful for a cleaner, more focused experience.
Users found the auto-collapse on scroll helpful for a cleaner, more focused experience.
Barcode feature lacked visibility
Barcode feature lacked visibility
60% of users failed to find the barcode feature due to unawareness of the swipe-up panel interaction.
60% of users failed to find the barcode feature due to unawareness of the swipe-up panel interaction.
Lack of clear swipe-up cues and interaction guidance.
Lack of clear swipe-up cues and interaction guidance.
Enhanced Onboarding Design
Enhanced Onboarding Design
Enhanced Onboarding Design
Onboarding Design
Onboarding Design
To help users locate the mobile barcode feature and understand the updated home layout, I designed an onboarding flow triggered on first launch. This aimed to improve first-time experience and highlight key functions.
To help users locate the mobile barcode feature and understand the updated home layout, I designed an onboarding flow triggered on first launch. This aimed to improve first-time experience and highlight key functions.
The walkthrough used masking, swipe gestures, and visual markers to guide user focus and reinforce interaction logic.
The walkthrough used masking, swipe gestures, and visual markers to guide user focus and reinforce interaction logic.
Design Documents
Design Documents
Design Documents
Documented component behavior, interactions, and animations to align design with development and ensure high-quality implementation
Documented component behavior, interactions, and animations to align design with development and ensure high-quality implementation
Learnings & Reflections
Learnings & Reflections
Learnings & Reflections
Technical Collaboration & Implementation
Technical Collaboration & Implementation
Worked closely with engineers to define interaction logic and ensure feasibility of the three-stage panel behavior across iOS and Android platforms.
Worked closely with engineers to define interaction logic and ensure feasibility of the three-stage panel behavior across iOS and Android platforms.
UX Strategy & Guidance
UX Strategy & Guidance
Some features weren’t instantly intuitive, requiring strategic onboarding and visual cues to help users discover, understand, and appreciate their value.
Some features weren’t instantly intuitive, requiring strategic onboarding and visual cues to help users discover, understand, and appreciate their value.
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
LET’S
( WORK )
TOGETHER
If you like my work,
feel free to contact me!
LET’S
( WORK )
TOGETHER
If you like my work,
feel free to contact me!
LET’S
( WORK )
TOGETHER
If you like my work,
feel free to contact me!
LET’S
( WORK )
TOGETHER
If you like my work,
feel free to contact me!