# Mobile Product Page UI > Apply proven mobile e-commerce product page UI principles drawn from real redesigns. Use when designing, reviewing, redesigning, or critiquing product detail pages, PDP screens, or mobile shopping experiences. Triggers include product page, PDP, e-commerce UI, mobile product, shopping screen, add to cart, quantity selector, product image, UI mistakes, UX redesign. - Skill: `michael-obele/mobile-product-page-ui` (Agent Skill) - Install (CLI): `npx skillmds@latest add michael-obele/mobile-product-page-ui` - Raw SKILL.md: https://api.skillmd.com/api/skills/michael-obele/mobile-product-page-ui/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: michael-obele (https://skillmd.com/u/michael-obele) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/michael-obele/mobile-product-page-ui --- # Mobile Product Page UI Principles Apply these principles when designing or reviewing mobile e-commerce product pages so the experience feels consistent, trustworthy, and easy to buy from. ## Core Mindset - Design for a product system, not a single static screen. Images, icons, and layouts must work across dark/bright/busy/simple photos and many products in a catalog. - Strong UI is not only about fixing broken elements. It also reduces friction in the buying journey (context while scrolling, sticky actions, one-tap common quantities). - Prefer natural, honest product photography and predictable layout grids over decorative or inconsistent styling. ## 15 Common Mistakes and Fixes ### 1. Icons lost in the image Icons sitting directly on a full-bleed product image become unreadable on bright or busy photos. **Fix:** Place icons inside a subtle background container with enough contrast and a thin outline so they remain legible on any product image. ### 2. Weak or inconsistent product image Busy crops, lifestyle shots that bury the product, mismatched scale (one strawberry when sold by weight), artificial backgrounds, or mixed styles across the catalog. **Fix:** Use a clean, natural product shot on a consistent neutral background. The image must work both alone and inside a product grid. Prioritize the product as the clear focal point. ### 3. Poor alignment Text, icons, prices, buttons, and sections that do not follow a clear layout grid. **Fix:** Align everything to a consistent vertical and horizontal grid. Alignment is one of the fastest ways to make a page feel professional. ### 4. Weak visual hierarchy Important information (price, product name, key benefits) competes with secondary details. **Fix:** Establish clear hierarchy through size, weight, color, and spacing so the eye lands on the most important elements first. ### 5. Insufficient spacing / cramped layout Elements feel squeezed together. **Fix:** Increase breathing room between sections while keeping related items grouped. White space improves scanability. ### 6. Unclear product title and metadata Title is hard to read or key facts (weight, origin, organic) are buried. **Fix:** Make the title prominent and place critical metadata nearby in a scannable format. ### 7. Price presentation problems Price is small, secondary, or disconnected from the unit. **Fix:** Make the price clear and associate it tightly with the unit (e.g., per kg). Show total cost when quantity changes. ### 8. Weak or missing trust signals No ratings, reviews, certifications, or quality indicators. **Fix:** Surface ratings, review count, and relevant badges (organic, origin) near the top in a compact, readable way. ### 9. Poor quantity selector Selector is hard to use, lacks unit context, or is distant from the purchase action. **Fix:** Place unit (kg) inside the selector, keep it next to the add-to-cart button, and prefer large, easy-to-tap controls. ### 10. Aggressive or poorly labeled primary action All-caps shouting button, unclear label, or button that does not communicate the outcome. **Fix:** Soften the visual weight while keeping high contrast. Prefer refined typography. Include the total price inside the button when possible (“Add to cart · $X.XX”). ### 11. Missing or weak secondary actions No wishlist/save, share, or similar actions, or they are hard to find. **Fix:** Provide clear secondary actions (heart/save) near the top without competing with the primary CTA. ### 12. Information architecture problems Details, nutrition, origin, shipping info are poorly ordered or hard to scan. **Fix:** Group related information into clear sections with consistent headings. Make the most decision-relevant facts easiest to find. ### 13. Inconsistent component styling Buttons, chips, cards, and inputs do not share the same radius, elevation, or color system. **Fix:** Apply a coherent design system across all interactive elements so the page feels intentional. ### 14. No consideration for scroll behavior Everything is static; users lose context or the CTA disappears while reading. **Fix:** Plan for scroll from the start (see Improvements below). ### 15. Purchase action friction Quantity and add-to-cart are separated; total price is unknown until after the action. **Fix:** Group quantity + CTA, surface the running total, and keep the primary action always accessible. ## Three High-Impact Improvements Beyond Basic Fixes 1. **Scrollable content card** Place product details in a soft card with rounded corners and subtle shadow that slides up over the product image. Transition the product title into a sticky top bar once the image scrolls out of the primary focus. Users never lose context of what they are viewing. 2. **Sticky bottom action area** Keep the quantity selector and add-to-cart button visible (or easily reachable) while the user scrolls through details and related products. Buyers often decide later in the page; remove the need to scroll back up. 3. **Predefined quantity options** Offer one-tap chips for common purchase sizes (e.g., 500 g, 1 kg, 2 kg) based on real purchase data, while still allowing a custom quantity selector. Reduces taps and increases conversion on high-volume options. ## Practical Checklist for Any Product Page Review - [ ] Icons and overlays remain readable on any product photo - [ ] Product images are consistent across the catalog and focus on the product - [ ] Clear layout grid and alignment - [ ] Strong visual hierarchy (title → price → CTA) - [ ] Adequate spacing and grouping - [ ] Trust signals visible early - [ ] Quantity + unit + total price tightly coupled to the primary CTA - [ ] Sticky or always-accessible purchase controls - [ ] Predefined common quantities when data supports it - [ ] Design works as a system, not a one-off screen ## Source Principles These principles are distilled from a detailed mobile product-page redesign walkthrough that identified 15 concrete UI mistakes and then elevated the experience with scroll-aware layout and data-driven quantity shortcuts. Apply them whenever building or auditing e-commerce PDPs on mobile.