Product Catalog, Product Details, and Add to Cart
Objective
This section defines the minimum requirements for browsing the product catalog, viewing detailed product information, and adding items to the cart. The flow must ensure clarity in product organization, ease of interaction, and transparency in pricing.
Insights
Navigation must be smooth and accessible, with focus on fast conversions and clear product visuals.
Images must follow contrast, sharpness, and mobile readability guidelines.
This flow must comply with usability best practices for mobile e-commerce and assisted selling environments.
Main Catalog Screen
01 - Category filters
Must present visible filtering options (e.g., All, Shirts, Shoes), with the active filter clearly highlighted
02 - Product list
Each product must display: image, name, category, price, and stock (icon and quantity)
03 - Add to cart button
Cart icon must be visible at the top corner of each item; it should allow quick add-to-cart without leaving the list
Mandatory: Product categorization must be clear and functional, with visible indicators for stock and price.
Product Detail Screen
04 - Enlarged product image
Must be visually prominent and high resolution
05 - Detailed information
Must include:
Product name
Price
Available stock
Functional product description (clear and objective)
Quantity selector with +/− buttons
Mandatory:
All relevant product information must be shown before the purchase.
Add to Cart Action
06 - “Add to cart” button
Must be clearly visible and only enabled when quantity is greater than zero
Mandatory:
After adding, redirect the user to the cart or show a non-intrusive confirmation.
Cart Screen
07 - Cart item list
Each item must include: image, name, category, price, quantity selector, and remove option
Order summary must include:
Subtotal
Discount (if applicable)
Final total with visual emphasis
“Payment method” button
Must be the next clear step, visually emphasized
Mandatory:
Cart must allow full review before moving to payment.
Mandatory Messages
When a product is added:
Product successfully added to cart.
When stock is insufficient:
Selected quantity exceeds available stock. Please adjust and try again.
Expected Behaviors
Every product added must update the total item count in real time.
The product detail screen must be accessible from both the catalog and personalized recommendations.
Quantity fields must block negative or invalid values.
The “Payment method” button must lead to the checkout and Tap to Pay flow.
Last updated