The request
“Similar to what we did on the homepage and category pages, we'd like the same modifications applied to the product page on mobile. Reduce the spacing between the title and the review stars, and tighten everything up.”
The desktop product page was fine. On mobile, spacing was loose, elements stacked in the wrong order, and the add-to-cart button sat too far down. The brand wanted the mobile view to feel as deliberate as the desktop one.
The approach
We went through the mobile product page element by element with the brand's screenshots as the target. Spacing was tightened, the review stars moved directly under the title, and the buy button moved up so it's visible without scrolling on most phones.
We kept the desktop layout untouched and tested on a range of iPhone and Android screen sizes before publishing.
What we shipped
Tightened spacing throughout the mobile product page
Reordered elements to match the brand's mobile priorities
Add-to-cart visible above the fold on common phone sizes
Desktop layout preserved exactly as it was
Tested on iOS and Android screen sizes