{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

There is no exact template for designing mobile product pages as the small screen size means its up to each retailer to work out which features are most important for their customers.

On an ecommerce site you can afford to squeeze in almost any feature you want but on a smartphone you need to be more selective.

Even so there are a number of tools and functions that nearly all mobile sites should include, mainly because users expect to see them so leaving them out will damage the UX.

So with this in mind, here are eight examples of great mobile commerce product pages. All of them have flaws but also have features that are worth considering for your own mobile site.

The criteria

These are the main features I was looking out for:

Walmart

Walmart’s product pages are excellent and tick many of the boxes for best practice without appearing cluttered.

They include product images, reviews, an unmissable CTA and product recommendations.

                      

I also like the way that the product description is housed in a collapsible menu so it’s easy to access but doesn’t always take up a huge amount of the screen.

Target

Target has a lot of neat features on it product pages including swipeable images, customer reviews and concise details on its shipping and returns policy.

                      

It also has a tool that allows customers to find the item in a Target store in case they don’t want to buy it online.

There are a few points that I feel could be improved though. For example the CTA is a bit small, as is the font size for product details.

Home Depot

Home Depot has made great use of collapsible menus to create pages that include a huge amount of information without appearing cluttered.

The lists house the product descriptions, specifications and shipping options.

                      

However the coolest feature is the in-store information, which tells you not only the location of your nearest outlet but exactly how many items it has in stock and even the aisle number.

This is a terrific way of tying up your online and offline channels and taking advantage of ‘showrooming’ customers.

The pages also include reviews, recommendations and swipeable images.

Macy’s

Though far from perfect, Macy’s has several decent features on its pages that help it to stand out above many of its competitors.

It is another retailer that makes good use of dropdown menus to make sure it has a clean design without forgoing any relevant information.

Similarly, I like the buttons that it uses to select the product dimensions, while the images and CTAs are also a good size.

                      

On the downside, the product reviews menu is slightly clunky and personally I think it’s a strange decision to put the social sharing buttons above the reviews and returns information.

Victoria’s Secret

As with its desktop site, Victoria’s Secret has designed simple mobile product pages that are very simple to navigate.

It includes large, swipeable images and there’s a decent amount of white space around the CTAs to make them easy to press.

                             

Furthermore, product information is housed in a dropdown menu which helps to maintain the clean, simple design.

However on the downside the pages do not include returns information or customer reviews.

Dick’s Sporting Goods

The font size on the Dick’s site is quite small which is an obvious flaw, however the navigation is well designed and worth flagging up.

The pages include swipeable images and recommendations, plus big CTAs that are easy to click. The site also scores points for having full stock and shipping information.

                      

Finally, Dick's has an excellent product description though it’s undermined by the tiny font size.

Under Armour

Under Armour is another site that ticks most of the boxes for best practice, but with a few areas for improvement.

It has decent images, stock information, good product descriptions and a prominent CTA. It also has reviews and makes good use of collapsible menus.

                      

However on the downside the font is quite small, plus the shipping information should be more prominent as it’s currently located at the very bottom of the screen.

Juicy Couture

I’m not a huge fan of Juicy Couture’s colour scheme as the white and light pink strikes me as a bit flat, however it does at least mean the CTA sticks out.

As with most of the other brands it makes good use of collapsible menus and has an excellent array of product recommendations and imagery.

                      

However another downside is the small font, which makes it very difficult to spot the price.

David Moth

Published 28 May, 2013 by David Moth @ Econsultancy

David Moth is Editor and Head of Social at Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

1680 more posts from this author

Comments (4)

John Waghorn

John Waghorn, Content Marketer at Koozai Ltd

Usability and simple navigation will work well for product pages on mobile and as you mentioned it’s about being selective with the information that you show. I think more businesses are starting to realise the value of simple, clean and effective mobile pages to help with conversion rates across multiple platforms.

I don’t think I’d be the only one to say that I’ve stopped viewing a product page because it’s too complicated or isn’t easy to successfully navigate to where you want to be. Locating the checkout feature and the payment process is another one of the main frustrations too.

about 3 years ago

Arron Zhang

Arron Zhang, Business Consultant at Advangent

For mobile product pages, less is more.

about 3 years ago

Avatar-blank-50x50

Paul

In my opinion, the combination of the hi-res Product image/ the store locator/ and collapsible description, is extremely effective in my opinion. When shopping online, personally, I always tend to jump on Google and look for the closest location. Barnes and Nobel being an example, I was searching for a few good books to dive into the other day, and a store locator was not clearly displayed. The first thing I did was locate the closest one to me. For a shopper like me, who appreciates the in store buying experience, the locator makes a big difference.

about 3 years ago

Avatar-blank-50x50

Simon

Strongly disagree with your number one criteria for a key conversion page on a mobile site: 'Large, High-Res Images'. Especially the last letter - 's'.

Users on a mobile network quite typically are using their mobile data (slow, potentially costly) and are in a rush - or at the very least have came to perform a specific action. Loading large images can only distract from the key action they've came to take - Buy Now.

Large images are great and I agree that they can be useful - especially for products and fashion to re-enforce aspiration - but for mobiles I would always encourage a form of abstraction to view the large images - whether that be a 'Show Images' button/tab/toggle or thumbnails.. and never, ever a slider which loads a ton of large images at once without the user's permission.

All of your other points should apply to all websites, not just mobile.

about 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.