💳 Gift Card Transaction Status Popups – UI/UX Exploration

Here’s a clean, intuitive component I designed to communicate different transaction statuses for a gift card purchase experience: Successful, Failed, and In Progress.

🔍 UX Thinking Behind the Design:

• Clarity First: Each popup clearly communicates the transaction status at a glance with bold headlines and universally recognized icons (✔️❌⏳), reducing user anxiety.

• Visual Feedback: Colors are deliberately chosen—green for success, red for failure, and yellow for pending—to match user expectations and improve scannability.

• Actionable Messaging: Each card offers contextual feedback:

  • ✅ Success: Confirms the transaction and shows expiry date.

  • ❌ Failed: A polite error message with emphasis on retry or investigation.

  • ⏳ In Progress: Reassures the user and sets the expectation for further action.

• Consistent Layout: All three states follow a consistent layout to minimize cognitive load while allowing users to easily distinguish the status.

🎁 Bonus Detail: I used Swiggy as a placeholder brand for the gift card reward, adding a realistic touch to the interface concept.

💬 I'd love your feedback! How do you usually handle error/success states in your flows?