Welcome to part 1 of The Product Page guide!
We're diving deep into 5 brands and how we adjusted their mobile product page! You can test ALL these suggestions on your own website.
Let's jump in!
Number 1: Sunset
Suggestion 1: Keep all of your critical conversion points on the light gray background in this case. This will help bring up the contrast and make this more accessible.
Suggestion 2: Pull in your reviews score, and keep all of your relative information in a group so it’s easier for customers to see all vital information in one place.
Suggestion 3: Add text that tells customers this is the price for 1 bottle, which is equal to a month’s supply. When it comes to highlighting sale prices, make the sale price visually smaller in comparison to the old price. Test the sales price in a green color.
Suggestion 4: Bring your guarantees up and place them right under the price.
Suggestion 5: Use similar UI elements for your quantity counter as you do for your other buttons to keep things more consistent.
Suggestion 6: Make sure to include the price again in your Add To Cart button – this helps reiterate the sales price has been applied.
Number 2: Legend
Suggestion 1: Pull up the breadcrumbs above the product images instead of having it above the product title.
Suggestion 2: Let the next image peek to prompt exploration and reduce the size of your product images to save vertical space — thus pulling more important elements further up the page.
Suggestion 3: Pull your “Reviews” in for each individual product — even if you don’t have a lot, it’s important to start gathering many more to build up brand trust.
Suggestion 4: Surface a tag of the jeans type to help users scan the product page faster.
Suggestion 5: Increase the size of your color selectors to avoid accidental clicks.
Suggestion 6: Separate the size selectors into two dropdowns and surface a “Help Me Choose” pop-up for the length selector to guide your users into picking the correct jeans length.
Suggestion 7: Add a black background color to your ATC to ensure that it’s the most prominent element on the PDP. Move the price into the ATC button for clarity purposes and increase the size of the font in the ATC to ensure it won’t be missed.
Number 3: Home Dough
Suggestion 1: Clearly call out the variety of packs at the top by telling users its 3x8 packs!
Suggestion 2: Make sure to give users a price anchor right at the beginning of the PDP rather than hiding it at the bottom.
Suggestion 3: Simplify your content flow — the same key pieces can be communicated in a way that takes up much less vertical space.
Suggestion 4: In this case, don’t link out to the individual cookies (you can lower in the page, just not here). Our goal is to get users to hit “Add To Cart” — don’t distract them with 3 additional actions!
Number 5: Proactiv
Suggestion 1: Keep users focused on adding the item to their cart by removing the breadcrumbs. Avoid giving users easy access to going back. You want users to go to the next stage of the sales funnel.
Suggestion 2: Remove this “Subscribe” badge — call it out in your PDP buy box instead. Avoid cluttering your product page with unnecessary elements that do not add anything to get your users to convert.
Suggestion 3: Replace your image thumbnails with carousel indicators to save vertical space. These also let users know how many images are in the product gallery.
Suggestion 4: Positive reviews are a great way to build trust with users new to your brand — pull these down above the product title and make it clear that reviews can be clicked to scroll down and read them.
Suggestion 5: Pull down your product details and surface the price below your product image gallery to ensure your users can easily scan the information.
Number 5: My Happy Flo
Suggestion 1: Test starting your product image with UGC. UGC images help build more trust and users are able to relate more with UGC than other types.
Suggestion 2: Move the carousel indicators onto the product images to save vertical space.
Suggestion 3: Reviews are critical to conversion. Surface the review badge, rating and total number of reviews above the product headline and make sure users know they can click to read full reviews.
Suggestion 4: Align your information to the left for better readability and add a subheadline that states the number of capsules and the supply. Clarity is key here.
Suggestion 5: Cut out all the fluff and surface only the key benefits of the product in bullet points and place them above the fold.
Want a FREE Oddit? Grab one for your website HERE!