Product & Add to Cart
Role: You are a senior UI/UX designer designing a mobile-first e-commerce experience for first-time users in India. Goal: Design a simple, intuitive Product → Add to Cart flow that minimizes confusion and cart abandonment. Target Users: – First-time online shoppers – Non-tech-savvy users – Mobile-only users Problem Statement: Users often struggle to understand product details, pricing, and cart actions, leading to drop-offs before checkout. Design Requirements: Create a Product Listing screen showing product image, name, price, discount, rating, and a clear “Add to Cart” CTA. Create a Product Detail screen with image gallery, price breakdown, size/color selection, delivery info, and a sticky Add to Cart button. Design an Add to Cart interaction using a bottom sheet or toast confirmation without breaking user flow. Create a Cart screen displaying selected items, quantity controls, remove option, price summary, and total amount. Include empty cart state and out-of-stock state. UX Artifacts to Generate: – User flow (Browse → Product → Add to Cart → Cart) – Low-fidelity wireframes – High-fidelity UI screens – Key UX decisions explained briefly Design Guidelines: – Mobile-first (Android) – Clean, minimal UI – Large touch targets – High contrast for accessibility – Consistent spacing and typography Deliverables: – 5–7 core mobile screens – Simple component system (buttons, cards, inputs) – Short UX rationale for each screen Tone & Style: – Friendly – Trust-building – Simple language Output Format: Provide a step-by-step UX breakdown, followed by screen descriptions and design decisions suitable for a UI/UX portfolio case study.