POS System – Mada Services Flow & UI Design

‍
I was responsible for creating the full user experience and interface design for a Point of Sale (POS) system powered by Wassma, aligned with Mada payment network standards. The system supports various transaction types to cover full merchant and customer needs. Below are the 12 key services, with a brief explanation of each and the flow behind it:
‍

‍

1. Purchase

• Description: The standard transaction where a customer purchases a product using their card.
• Flow:
  • Merchant inputs amount →
  • Customer taps/inserts card →
  • Transaction authorized →
  • Receipt printed or sent digitally.

2. Purchase with Naqd

• Description: A combined transaction for purchase + cashback withdrawal.
• Flow:
  • Merchant enters purchase and cashback amount →
  • Customer confirms →
  • Amount deducted from card, cash handed to customer →
  • Final receipt reflects both amounts.

‍

3. Refund

• Description: Used to return funds to a customer's card from a previous transaction.
• Flow:
  • Merchant inputs refund amount and original transaction reference →
  • Card tapped or inserted →
  • Amount refunded to card →
  • Refund receipt issued.

4. Reversal

• Description: Cancels a transaction that was approved but not finalized.
• Flow:
  • Merchant selects reversal →
  • Inputs reference number or transaction ID →
  • System verifies and cancels transaction →
  • Status updated in logs.

5. Cash Advance

• Description: Allows customer to withdraw a cash amount using their credit card.
• Flow:
  • Merchant enters amount →
  • Card validated →
  • Cash dispensed manually →
  • POS generates receipt and logs it.

6. Authorization

• Description: Reserves a specific amount on the customer’s card without charging it immediately.
• Flow:
  • Amount is input →
  • Customer card authorized →
  • Amount held until final capture or release.

7. Authorization Void

• Description: Cancels a previously held authorization before it's captured.
• Flow:
  • Merchant retrieves authorization record →
  • Selects "Void" →
  • System releases the hold on the customer’s account.

8. Authorization Extension

• Description: Extends the duration of a held authorization beyond the default period.
• Flow:
  • Original authorization selected →
  • Extension requested →
  • System verifies and extends the validity window.

9. Purchase Advise

• Description: Used to confirm a previously authorized purchase (capture step).
• Flow:
  • Merchant inputs authorization reference →
  • Enters final amount →
  • Funds are captured and transaction completed.

10. Sadad Bill Payment

• Description: Payment of bills using SADAD, the Saudi bill payment network.
• Flow:
  • Merchant selects biller from list →
  • Enters bill/reference number →
  • Amount verified →
  • Payment processed and confirmed.

11. Contactless Payment Options (Visa, Mastercard, Apple Pay, etc.)

• Description: The system supports all major contactless methods (NFC).
• Flow:
  • Payment initiated →
  • User taps phone/card →
  • Immediate authentication and transaction confirmation.

12. Atheer Support

• Description: Mada's native contactless payment protocol.
• Flow:
  • Works seamlessly with Mada cards using NFC →
  • Quick tap →
  • Instant confirmation and receipt.

Design Focus & Considerations

• Compliant with Mada branding and UX guidelines.
• Optimized flows for speed, clarity, and merchant usability.
• Clear service segmentation with icons + Arabic/English labels.
• Used a carousel-style UI for service navigation with consistent back navigation and action hierarchy.
• Designed for mobile POS devices, ensuring responsiveness and touch optimization.
  
  ‍