Assignment
Responsible for designing and validating the UI/UX of the Payso Cashier H5 product, focusing on merchant payment flows, responsive interfaces, and design-to-development quality assurance.
All Projects
Case Study
Payso Cashier
H5-based cashier product designed to facilitate digital payment processing, merchant transactions, and streamlined cashier operations for businesses.
Project Overview
The thinking behind the work.
Objective
To design and validate a seamless, reliable, and user-friendly H5 cashier system that enables merchants to efficiently process digital payments with minimal friction, ensuring a smooth end-to-end transaction experience across mobile devices.
Project Includes
- UI/UX Design
- Quality Assurance
- Interaction & Usability
- Collaboration Work
Product strategy
Product Process
Planning before pixels.
Product Manager Ms. Fayalina Chen created and led planning, system flow, page flow diagram and wireframing, shaping the shared product direction. English and Chinese source notes supported collaboration and handoff.
Experience architecture
Page Flow Diagram
One map for every payment route.
Mapped payment methods, confirmations, redirects, and merchant callbacks for product and engineering.
Interaction structure
Wireframes
Testing structure before styling.
Ms. Fayalina Chen created and validated the hierarchy, payment flows, and transaction states through low-fidelity wireframes, allowing me to focus on the UI’s visual direction.
Visual direction
UI Exploration
Comparing brand-led directions.
Compared Payso brand colors and layouts with the product team to select the best user experience.
Final experience
Final Design
Why Style 5 won.
Selected for three practical reasons.
- 01
Color adaptability
Soft pink better matched the preferences of the Philippine target market.
- 02
Visual comfort
Balanced contrast kept screens soft while emphasizing amounts and payment options.
- 03
Brand perception
The warmer palette felt safer and more approachable than cool purple during payment.
Developer handoff
Figma Dev Mode Annotation
Clear specifications for handoff.
Documented spacing, color, typography, sizing, weight, and styles for accurate implementation.
