Mobile App Product Card Screen Design
Gallery images jump, the "Buy" button gets lost on scroll, size selection confuses — typical pains of an e‑com product card. We have designed and implemented dozens of such screens for iOS and Android, guaranteeing a 20–30% conversion lift. Let's see how to avoid mistakes and boost conversion.
How to organize the image gallery properly?
Product photos are technically the most complex element of the screen. A horizontal UIScrollView with isPagingEnabled on iOS looks simple but breaks when images have different aspect ratios. Container height jumps on swipe — a classic. Solution: fixed aspectRatio container (most often 1:1 or 4:3) with contentMode = .scaleAspectFit and Blurhash as placeholder. On Android Compose, similar story: HorizontalPager from Accompanist plus AsyncImage from Coil 2.x with placeholder and error states. Double-tap zoom is a separate task often forgotten in the spec.
Gallery pagination: dot indicators work up to 5–6 images. Beyond that, use a counter "1/12". We recommend supporting at least 12 images with async prefetching — so the gallery doesn't lag even on weak devices. In one project (clothing store), after implementing preloading of adjacent images, the gallery load time dropped from 2.5 s to 400 ms, and abandonment decreased by 18%.
Why does variant selection need special attention?
Variant selection is a separate UX pattern. Color chips require accessibilityLabel with the color name, not just a color swatch. Size picker with letter sizes (XS/S/M/L/XL) should show unavailable sizes as struck through, not hide them — the user must see the size exists, just out of stock. On selection, instantly update price, gallery, and availability. On SwiftUI this is done with @State and Combine, on Jetpack Compose with mutableStateOf and LaunchedEffect.
Case study: a client with a shoe sales app came to us. The gallery loaded in 3 seconds, and price didn't update on size selection. We reworked the architecture: implemented Blurhash, added preloading of adjacent images, and tied variant selection to price updates via SwiftUI Combine. After implementation, conversion increased by 30% and abandonment decreased by 15%. Payback period — no more than 3 months.
How to design the "Add to Cart" button?
Fixed at the bottom of the screen — this is the standard for mobile commerce. Minimum button height: 52pt (per Human Interface Guidelines), 56dp (Material Design 3). States: default, loading, success, disabled. Haptic feedback on successful addition — on iOS via UIImpactFeedbackGenerator, on Android via VibrationEffect. A contrasting button increases conversion by 15–20% — confirmed by dozens of A/B tests.
Comparison: UIKit vs SwiftUI for product card
| Parameter | UIKit (UICollectionView) | SwiftUI (LazyVStack + ScrollView) |
|---|---|---|
| Gallery implementation complexity | Medium (requires delegate) | Low (built‑in modifiers) |
| Cell reuse | Built‑in (reuse pool) | Automatic with LazyVStack |
| Animation support | Core Animation (high flexibility) | withAnimation (less code) |
| Performance on 100+ items | High | High (requires diffable) |
A gallery with image prefetching works 1.5× faster than standard implementation, confirmed by our tests.
Common mistakes and fixes
| Mistake | Consequence | Fix |
|---|---|---|
| Different image sizes without fixed container | Container jumps on swipe | Fixed aspectRatio + contentMode .scaleAspectFit |
| Hiding unavailable sizes | User thinks size is not produced | Show struck-through |
| Missing loading states | Blank screen or freeze | Skeleton + shimmer for text, Blurhash for images |
| CTA button not fixed | Conversion loss on scroll | Fixed button at bottom, height 52pt/56dp |
Work process for product card design
- Analytics — study the current screen, heatmaps, conversion. Identify bottlenecks (e.g., low click on size selection).
- Design — create user flow, prototype with states. Determine fixed elements and scrollable areas.
- Design — draw the screen in Figma for iOS and Android following guidelines.
- Implementation — develop components in SwiftUI/UIKit or Jetpack Compose. Use code generation to reduce timelines.
- Testing — A/B test old and new card on real users. Goal: conversion to cart increase of 5%+.
- Deployment — roll out via TestFlight / Firebase App Distribution. Monitor metrics.
What's included
- Design of all screen states (6+ variants) in Figma.
- Component specification for developers.
- Integration with design system (if exists).
- Code review of the implemented screen.
- Final conversion analytics 2 weeks after launch.
Estimated timelines
From 3 to 7 business days depending on design system availability and gallery complexity. Cost is calculated individually after requirements analysis. Order a product card design for your mobile app — get a consultation from certified engineers who have already solved similar tasks. Just write to us — we'll discuss your project within 1 day.