.svg)
Make sure to get the page architecture in shape
See the checklist below, and try not to miss the critical aspects of a great user experience. Testing and going down to industry specifics, helps to improve it even more!
Make sure all images are of high quality, and clean, not cluttered
The first impression matters a lot, keep the attention of users by offering them appealing, high-quality visuals, and clear messaging.
Present precise delivery times and pricing, without the user needing to scroll
Do you ship to my country? How much does it cost? When do I get my package? Example: Free EU shipping within 3 days, Free EU delivery from 59€.
Have the following sections covered
The site-wide pre-header
A great place where to introduce information about delivery, returns, and unique selling points! Make sure the Return policy is clear, visible, and friendly.
The site header with branding, auto-suggest search, support contacts, and main navigation
Take a look at the examples by Wunderfront. For mobile, it is essential to keep the search input open, navigation, and cart quickly accessible, and branding concise. Try also bottom navigation on mobile! Be thumb-friendly and boost conversions!
The breadcrumbs
Show the hierarchy-based breadcrumbs in category product lists at the very top
The product media section
As a baseline, you should always have 3-5 product images of high quality and from different angles. Have the traditional white background studio images, as well as of products on a scale (environment, or best if with models, etc.). What also is proven to help a lot is to have product images where features/benefits have been highlighted. If you have product variations, like color or size, it is best to have dedicated images for variations. Provide a product video, or even an unboxing video whenever possible (with captions, and feature highlights)! As a pro hint - try to have add to cart option on your fully extended product gallery too. Always use thumbnails to present additional product media, and never use slider dots. Upon hovering the main image on desktop, consider using a zoom-in feature, and on mobile go with the pinch-to-zoom experience.
The product information and pricing section
Make sure you cover the following while presenting product key information: brand (link logo to a brand category page), average review rating + amount of reviewers, product title, price (incl. discount and saving in % or currency), product short description.
Suggested: the urgency and scarcity section
For a limited time to a limited amount of items, unleash the power of the psychology of urgency and scarcity. Show countdown times for some products (example: Hurry! Sale ends in 2 days 15 hours 59 mins), and a stock progress bar (example: Only 20 items left in stock! Assuming it really is so, it makes people decide faster. Use this with caution and do not overuse it, as it will lose its effect on people.
The buy section (fixed and on-page)
This is where users choose product options or variations from the selectors (such as color, and size), and can easily add items to their wishlist or cart. Usually, you find it in the top area of the page, but on mobile devices, it is suggested to try a sticky bottom bar, where users can choose options, quantity and add items to wishlist or to the cart. As a bonus option enable users to choose eco-friendly packaging (or - a checkbox to buy this item as a gift)! When it comes to the add to cart button, it must come with high contrast and be extremely prominent (as well as the price itself). Also consider hiding the quantity input for some types of products, where people usually do not order more than 1 single item.
The delivery and returns clarity section
Right underneath the buy section, add to cart button, and show around three key points on delivery and returns (example: Free worldwide delivery; 30-day free returns, Ships today). Capture the attention of users, by presenting text with icons or appropriate media. If possible, provide a "total order cost" estimate in this section too, and estimate the delivery date.
The in-depth product description blocks (product tabs, accordions)
This is where users usually find detailed product information (bullet lists and text blocks), all the specs and product attributes, etc. You should keep these sections vertically collapsed especially on mobile devices, and avoid having horizontal tabs (users tend to miss tabs). Have the following tabs are the bare minimum: Product details (longer into + attributes), Size & Measuring guide (if applicable), Delivery & Returns (short summary + link to full page). If applicable, show the "find in a store" section too!
Suggested: The frequently bought together section
Bundle up well-matching products, and enable users to add all of them to the cart with one click. As an example: a shirt, a tie, and a tie pin. Make sure to check the bundling guide. Make sure the set of products has some sort of a benefit of buying them together, such as a slightly lower price or some added value. Show the saving or added value prominently.
The reviews section
Always allow users to leave product reviews (and encourage them to add a photo), which you can admin of course. Do not make people create an account to leave one too! This deeply discourages users to leave a review. When showing reviews as a section, start with a rating distribution, that acts as a filter (so you can narrow down 5-star ratings as well as the lower ones). Just display a minimum of 6 reviews by default, and enable users to "Load more". Always respond to reviews, no matter if they are positive or negative! Allow users to easily sort reviews, and see the key information: such as the reviewer, rating, review itself (and which product or variation set), date, has this person really bought the product (verified buyer badge). Allow other users to rate the review, such as whether it was helpful.
Suggestion: The up-sells section
Show users how to upgrade the product they are discovering and make their purchase more exclusive. This can also work well as a price anchoring strategy and make the currently viewed product seem even more attractive due to the lower price.
The cross-sells section
Provide a cross-sell section that contains alternative products, that are highly relevant to the current product. Also if possible provide a cross-sell section with only supplementary products. Provide an add-to-cart option for some supplementary cross-sells (depending on the price and persuasion effort needed).
The recently viewed products
Help the returning visitors become visitors much faster, and also consider moving this section below the Hero campaign banners for returning users (on homepage)! This an amazing opportunity to take the user to the checkout!
The pre-footer: The bottom benefits
Visually and textually remind site-wide why shop with you. Keep it super short and have 3-5 benefits visualized and communicated.
The pre-footer: The payment options
Showcase different options people can use to pay, and bet big on buy now and pay later options. Make people trust you more, and help them get products faster and more conveniently.
The site footer with bottom navigation and trust marks
The site footer is like the air you breathe in, it has to exist. Showcase trust badges/marks, top navigation items, key categories, contact pages, FAQ, About us pages, social links - and all the terms and privacy pages. And do not forget the delivery information and return handling pages! You can also use the area to acquire leads and make people subscribe to your newsletter, but there are better ways.
The bonus checklist
Allow users to buy out-of-stock products by increasing the delivery time
Accept money when you plan to restock anyways. People may wait a bit longer as long as they get the desired product.
Highlight product key features in the product title and one of the images
An incredible hack to boost clarity and product benefits. Just add a few keywords inside the title and highlight those features also in the product gallery on one of the images (a copy of the main image with drawn-out feature highlights).
Consider enhancing product media with these tactics
Showcase influencer-promoted photos or videos; Show bundled photos or videos (to complete the main product); Present an Add to cart option inside the full-screen product gallery; Add hotspots on images (and in the gallery) that introduce neat features
The “please avoid” checklist
Avoid poor page speed
One two three four five six .... Bye-bye. Speed equals money in your pocket. Remember that, keep your Google page speed index above 90 on desktop and above 70 on mobile.
Avoid poor design, bad use of colors, and low contrast
It has been proven with research, that every 1 USD you invest in design and user experience improvements brings back 100 USD on average (https://tinyurl.com/wunderfront). Do not underestimate design, first impressions, and color psychology. Keep navigation and call to action of high contrast.
Avoid overpaying - use tools, themes, and plugins to make it happen! Go no-code or low-code!
There is the easy way and there is the hard way. Work smarter, not harder, unleash the power of software, and just buy affordable plugins, themes, or tools, to make it happen.
Avoid reinventing the wheel
Instead, use plugins, and ready-made software to cover these core guidelines.
Avoid showing just one image per product (and low-quality media)
People need more persuasion and having just one image, leaves a weak impression and gives your competitors a great advantage.
Avoid using dropdowns when choosing product variations
Dropdown does well at hiding important product information and research shows that swatches and visible options work much better. If there are tens or hundreds of options to select from, then of course dropdown is a safer way to go.
Avoid using big-sized and unoptimized images and videos
What you upload to your product media library makes a great difference in speed! Optimize before uploading the images, and re-optimize with a tool or plugin once the images are uploaded too, to get the fastest experience for your users.
Avoid enabling social sharing options on the product page, or do it with great caution and understanding of usage
In most cases, this acts like a distraction and really does not help you see the user adding the item to the cart, and proceeding with the order. There are rare cases where this helps, but it does work the opposite in the majority of cases.
Avoid using subpages within the mobile product details page
In short, do not create product details, etc as subpages on mobile, use accordions and keep users on the page for a more lucrative experience.
Avoid asking people to sign up to use the add to wishlist feature
There are better ways to capture leads. Allow users to add to the wishlist, and remember their choices in the cookies, and for members, under their profile database table. What's even better - allow users to create multiple themes in wishlists and allow them to share those via URL or social media (friends, colleagues).
Avoid showing product variation swatches, when there is only one left
Example: a green shirt with S, L, and XL size options should just have the size as the selector, not the green color itself
.webp){kind=logo}
.png){kind=logo}
