Reworking the Product Page for Mobile eCommerce Websites
The Standard — Product Detail Page Exploration 1.0
The reality is, the average visitor is only going to spend 15 seconds on your product page. So yes, this page needs to provide all the imagery and variant options, product details and brand values, without distracting your already distracted customer from taking action — but it also needs to delight.
Instead of creating a bouquet of delicate solutions and delightful details, this high stakes mentality is making product pages across the world stagnant and stuffy.
Sameness is boring. Success breeds fear. Fear stunts exploration. And without exploration, robots are going to take over our jobs.
Below are 7 product page explorations that attempt to break the monotony of the product page, while respecting the non-negotiable reality that UX is king.
First, Some Fruitful Facts
1. Why push the product page forward?
According to Anthony Brebio at AB Tasty, your customers’ conversion from homepage to product page is only about 2–2.5%, but when they land directly on a product page, that conversion rate jumps to 7%.
This is great news for mobile sites! Think about it. The ad you run on Instagram for a Wool Mountain Poncho can lead your customer directly from the poncho image in their feed to the poncho product page. It’s a match made in heaven.
2. Why are all these explorations only for mobile?
Mobile is the future of online shopping. This means Mobile solutions deserves the fiercest dose of creative energy. (Not to mention it’s much easier to get funky on larger screens.) Let’s revisit Desktop vs Mobile vs Tablet Market Share Worldwide for the last 12 months:
51% — Mobile
45% — Desktop
4% — Tablet
In eCommerce, we see these mobile usage numbers trending even higher with 64–87% of our customers coming from mobile devices.
3. The Anatomy of a Product Page
For the sake of this design exploration, I’ve chosen to explore a fairly straight forward fashion product with two sets of variants. This is a ‘one foot in reality, one foot outside’ kind of experiment. These explorations will not contain every bit and bobble.
Most product pages contain a countless number of functions not included in the designs below, so I will list them here to avoid outrage:
Every Product Page Needs: Product Imagery • Price (Included Strikethrough Sale Pricing) • Description • Reviews • Add to Cart Button • A Quick Load Time
Some Will Need: Variants (Color, Size, Model, etc.) • CompatibilityWarnings
Extras & Optimizations: Size Guides • Out of Stock Email Capture • Wishlist • Cross Sell Products • In-Store Pickup Availability • Social Proof (UGC) • Brand Benefits • Buy Now and Pay Later • Free Shipping & Brand Promises • And More
A Less Prescriptive Product Page — Where I play with solutions when no one is looking…
Here I work to defy the patterns I so regularly fall into when designing product pages for mobile. Each exploration attempts to push the visual layout of the top of a product pages, without jeopardizing the actions a user must take in order to purchase.
1. The Standard
This design was a necessary brain un-blocker. Here is the standard layout of nearly every apparel product page in existence. It’s smart, it’s reliable, it’s expected…but it’s not why you are reading this article.
The Standard — Product Detail Page Exploration 1.0
2. The FAB Floater
I will admit, this ‘sticky’ Add to Cart, or ecomm’s version of a Floating Action Button (FAB), is not new; but I’ve made some improvements.
I made sure to add at least 50px padding below the button to stop the mobile browsers from thinking a user is trying to access the browser’s toolbar. These leads to double tapping in order to get Add to Cart to work.
The second battle being fought here is a neurological trick of the eye. Even thought the Add to Cart is always there, it’s sometimes impossible to see! Remember the video with the dancing bear? When you are focused on looking at product images, you cannot see the Add to Cart button, which creates the ultimate blocker for conversion. In this solution, the floating Add to Cart will hook to the final image on the page and become inline with the other page content. This should catch any issues caused by brain tricks.
The Floater — Product Detail Page Exploration 2.0
3. Color Is King
A simple attempt to associate the color variants more closely with the product images. When the customer chooses to view a new color, 100% of the product image remains in view. I’ve also added a little more context to the S, M, L sizes by pairing US and EU measurements.
Color is King — Product Detail Page Exploration 3.0
4. Flyout Variants
Sometimes our variants are so complex they push our Add to Cart much further down the page than comfort allows. By using flyout drawers or overlays for variants, we create space and focus for the customer.
This might be useful if I offer Classic colors, Seasonal colors and Neon colors of the same item. Rather than overwhelming the user with choices when they first enter the page, we can engage them once the tell us they’re interested, and additionally will have the space to break up the colors into 3 sections for Classic, Seasonal and Neon.
Flyout Variants — Product Detail Page Exploration 4.0
5. The Windowpane
Here product images are displayed in a grid that can expand into full-width images when tapped.
I also started thinking…why do we load our product pages at the very top? Why not load in the page about 50px down so that most of the image is shown, but more of the product variant selections are exposed.
By removing the ‘Add to Cart’ button and making size selection add directly to cart, I’ve managed to pull all the variants, product images and actions above the fold. Who knew it could be done.
The Windowpane — Product Detail Page Exploration 5.1
The Windowpane — Product Detail Page Exploration 5.0
6. The Thumb Zone
These side floating buttons are in prime thumb zones. My vision here is that if the user taps on the color, size or ‘Buy’ area, the variants will fly out to full width and allow the customer to make their selections and Add to Cart. If the customer keeps scrolling, the variants will zoom back to position on the left of the screen. When the customer reaches the bottom of the product images, the variants and buy now will re-expand to full width and stick in place above the product details, similar to ‘The Floater — Product Detail Page Exploration 2.0’. (See my article on mobile navigations that work for thumbs here.) (Grace Anello thank you for instigating this brainchild.)
The Thumb Zone — Product Detail Page Exploration 6.0
The Thumb Zone — Product Detail Page Exploration 6.1
7. The Tippy Top
In ‘The Floater — Product Detail Page Exploration 2.0' I explore a sticky add to cart at the bottom of the screen. What if we bring this up to the top? I maintain that sticky items sometimes get lost to the eye, so the variant and Add to Cart action should be a repeated element below the product images for customers who choose not to engage with the sticky top of the page.
The Tippy Top — Product Detail Page Exploration 7.0
Please leave your feedback!
Let me know what challenges you face when building your product pages. I will try to address them in an in depth article about the anatomy of a Product Page. All the bits-and-bobbles will be thoroughly explored.
