Simplying Order place and Payments | An UI/UX case Study

“🌟 Simplyfying Order place and payment ! 🌟

Many times people Get anxiety while waiting for OTP and when You hit resend you mind get bombarded with OTPs . Weather u r odering food on Swiggy or registering on Amazon . The anxiety is same.

Screen 1: Payment Summary

• Display the payment summary with item details, total amount, and payment options.

Screen 2: Auto-OTP Detection

• Once the user selects the desired payment method and taps on the “Pay” button, the system automatically detects the incoming OTP.
• Display a loading indicator or progress bar to indicate that the system is detecting the OTP.
• If the auto-OTP detection is successful, proceed to Screen 3.
• If the auto-OTP detection fails, proceed to Screen 4.

Screen 3: Payment Confirmation

• Show a screen confirming that the payment is being processed.
• Display a progress indicator to provide feedback on the payment processing status.

Screen 4: Manual OTP Entry

• If the auto-OTP detection fails or is disabled, present a screen for manual OTP entry.
• Display a text input field for the user to manually enter the OTP received on their registered mobile number.
• Include a “Resend OTP” button in case the user didn’t receive the OTP or if it expired.

Screen 5: Order Confirmation

• Display a screen confirming the successful completion of the payment and order placement.
• Show a success message stating that the payment was successful and the order has been placed.
• Provide relevant order details such as order number, delivery address, and expected delivery time.

User Flow: Auto-OTP Detect & Submit

1. User selects a payment method and taps on the “Pay” button.
2. The system automatically detects the incoming OTP without requiring manual input.
3. If the auto-OTP detection is successful:

• Proceed to Payment Confirmation (Screen 3).

4. If the auto-OTP detection fails or is disabled:

• Display a screen for Manual OTP Entry (Screen 4).
• Provide a text input field for the user to enter the OTP manually.
• Include a “Resend OTP” button for OTP regeneration.
• If the user taps on “Resend OTP”:
• Resend the OTP to the user’s registered mobile number.
• Once the OTP is entered correctly:
• Proceed to Payment Confirmation (Screen 3).

Use Case 1: Payment Method Change

1. User selects a payment method on the Payment Summary screen.
2. After tapping on the “Pay” button, the system detects the incoming OTP automatically.
3. Proceed to Payment Confirmation (Screen 3) if auto-OTP detection is successful.
4. If auto-OTP detection fails, present the Manual OTP Entry screen (Screen 4) for the user to enter the OTP manually.
5. After entering the OTP, proceed to Payment Confirmation (Screen 3).

Use Case 2: Failed Auto-OTP Detection with Resend Option

1. User selects a payment method on the Payment Summary screen.
2. After tapping on the “Pay” button, the system attempts to auto-detect the OTP but fails.
3. Present the Manual OTP Entry screen (Screen 4) with a “Resend OTP” button.
4. User taps on “Resend OTP” to receive a new OTP.
5. After receiving the new OTP, enter it manually on the Manual OTP Entry screen.
6. Proceed to Payment Confirmation (Screen 3) once the OTP is entered.

Use Case 3: Auto-OTP Detection Timeout

1. User selects a payment method on the Payment Summary screen.
2. After tapping on the “Pay” button, the system starts auto-detecting the OTP.
3. If the system doesn’t detect the OTP within a specified time limit (e.g., 30 seconds), proceed to a timeout screen.
4. Timeout screen displays a message indicating that the auto-OTP detection failed and provides an option to enter the OTP manually.
5. User taps on the “Enter OTP Manually” button.
6. Redirect to the Manual OTP Entry screen (Screen 4) for manual OTP entry.
7. After entering the OTP, proceed to Payment Confirmation (Screen 3).

Use Case 4: Manual OTP Entry with Resend Option

1. User selects a payment method on the Payment Summary screen.
2. After tapping on the “Pay” button, the system presents the Manual OTP Entry screen (Screen 4) directly.
3. User enters the OTP manually and submits it.
4. If the entered OTP is incorrect or expired, display an error message and provide a “Resend OTP” button.
5. User taps on “Resend OTP” to receive a new OTP.
6. After receiving the new OTP, enter it manually on the Manual OTP Entry screen.
7. Proceed to Payment Confirmation (Screen 3) once the OTP is entered correctly.

Prototype

Thankyou for reading
Gaurav