UX/UI
Payment Flow Decisions: Balancing Usability, Accessibility, and Security
Payment flow
context
problem
objective
Conceptual design of a mobile e-commerce checkout flow focused on improving clarity during payment selection.
Users often feel uncertain when choosing a payment method. Differences between credit card, MB Way and PayPal are not immediately clear, leading to hesitation and potential drop-off.
Reduces cognitive overload
Clarifies payment options
Reinforces trust through visual hierarchyc
Applies a consistent UI system
design approach/decisions
01
02
Step-by-step progression
The flow is divided into clear stages: product, shipping, payment and confirmation, reducing mental load.
Visual hierarchy
Primary actions are emphasized through contrast and consistent button placement.
03
04
Structured payment selection
Payment methods are displayed in clearly defined cards, avoiding ambiguity and improving scannability.
Progressive disclosure
Card details only appear once the credit card option is selected, minimizing initial clutter.
05
UI system
Consistent spacing system
Reusable components
Defined typography scale
Clear CTA hierarchy
06
Visual Flow
The flow prioritizes continuity and predictability, ensuring users always understand where they are in the process.
