Ink, Pixels, Action! Crafting the Perfect Product Opener to Boost Conversion Rates

This article outlines how revamped the first screen of a product listing page for a leading ecommerce website. After a few tweaks, managed to increase conversion through cutting down the scroll for mobile users, and efficiently displaying crucial info on the first screen for both desktops and mobile users.

In the article, the client’s name and products were replaced with an abstract coffee brand.

Phase 1: Identifying Challenges

We started out by assessing what the client’s design team put together. We found that they had well organized step by step flow: viewing product photos, checking prices, selecting a subscription format, reviewing the cart’s final set of items (enhanced with different welcome kits), and ultimately making a purchase decision by adding items to the cart or the next subscription order.

However, we found three challenges with this original product landing page design.

• Excessive screen height (6 scrolls on desktop, 10–11 on mobile).
• Product options and buttons not visible on the first screen.
• The first screen area (excluding browser bars, OS elements, site header, and sticky purchase buttons at the bottom) measured 1356 pt, which is critically excessive — it’s hiding half of the essential information behind the scroll for the user.

And with the team, we decided that we could find a better solution to increase customer engagement and ultimately boost conversion rate for our client’s ecommerce store.

Phase 2: Crafting a Better Solution

Key Points:

1. Our Client’s products come in two packaging options: a large one for home use and convenient small packets for on-the-go. When selecting packaging, it’s crucial to visually represent the chosen product. Hence, the product image should be displayed directly in the product type selection dropdown.
2. Subscription type selection is complex with three options, varying discounts, and the need to display prices before and after discounts, along with the savings amount. All these factors make the option selection block quite intricate.
3. Welcome kits feature up to 15 product combinations. Users need to view both the photo and textual description of these kits.

💡 The key idea was to maintain the ability to browse the product gallery at any time so that customers can easily compare. For this reason, the product page was divided into 2 columns: the gallery and the information zone. When scrolling, only the information scrolls, allowing users to switch between reading text and viewing product images, which also visually represents a list of product advantages and features.

💡Another primary goal was also to fit all essential information about product selection, options, and purchase buttons into the first screen upon page load. Having all important information and interactions above the fold is a proven way to boost conversion rates (explore the latest and concise article on this topic from Shopify).

Design Concept #1 💭

In the first concept, the subscription block includes all details, and the discount amount is shown separately in the button area. Opting for a subscription with a welcome kit changes the product image to the kit, with a text block listing the gift items below. This allows the customer to picture the difference in options and the products feel more tangible to them.

However, visualizing all this information resulted in an overloaded screen. The multitude of options and text requires users to carefully examine the content, prolonging decision-making time and possibly causing hesitation in making a purchase.

Design Concept #1.2 💭

We all remember Hick’s law about increased decision time with more options, so it’s crucial to keep everything simple, clear, and clean.

Another way we can boost conversion rate is to accelerate user information processing. The idea is to simplify subscription options by displaying only the name and the associated discount. All other details will be placed nearby on the screen for easy reference.

Design Concept #1.3 💭

Our assessment indicated that the welcome kit confused customers. This confusion is what led to the idea of placing it directly within the product type selection dropdown. However, during demo testing, changing the image below when selecting options proved distracting. The shifting image above drew too much attention, diverting focus from the primary goal of easily choosing a subscription option and proceeding to purchase.This design confused users, leaving them unsure of where to look or what to explore.

Design Concept #2 💭

However, the issue of diverted attention during selection led to the idea of not splitting all options into two rows of sections, but rather maintaining only two: product selection and displaying available subscription types within. In this setup, changing the product image on the left is less distracting, eliminating the puzzling shift.

With this section design, there is even additional space to showcase information about the savings amount when choosing a subscription. This adjustment greatly facilitated the placement of additional action buttons alongside the total amount and checkout button.

Design Concept #2.2 💭

Yet, a lingering concern remained — emphasizing the inclusion of the welcome kit as a gift, a substantial incentive to drive purchases. The left-side banner lacked sufficient information to educate customers, and positioning the label within the product section posed challenges. It became overshadowed by the options and smaller products within the welcome kit, leading to distraction and undermining the promotion of subscription benefits.

Design Concept #2.3 👍

Following discussions with the team regarding the initial screen’s information requirements, it was determined that brightly highlighting the welcome kit contents is not crucial. However, displaying the serving quantities in each packaging type and the subscription delivery frequency is essential.

This refinement guided adjustments in the screen design, presenting a final layout poised for user testing. Furthermore, at this stage,optimized the purchase button row for clarity and ease of use.

This decision also improves engagement with active buyers (the welcome kit is exclusive to new users). Upon page loading, we showcase beautiful images of product usage in the gallery. This is possible because the packaging selection block consistently displays the product image, eliminating the need for redundant large images in the gallery during page load.

The revamped design of the product card’s initial screen efficiently presents content on a mobile phone display. Though a minor scroll might be necessary on certain devices to reveal the second product option, the frequently chosen 30-serving pack is conveniently accessible for users to select and purchase instantly.

What’s even more significant is that I managed to reduce the height of the content on the first screen for mobile devices from 1356 to 670 points, effectively halving it. This ensures that the entire content is viewable on the majority of devices. 🔥

* * * * *

What We Achieved

1. Optimized Initial Screen: Through research and collaboration, we crafted an optimal design for the product card’s first screen.
2. Compact Mobile View: The new design efficiently condenses information, halving the screen height for a sleek mobile experience.
3. Enhanced User Engagement: Streamlined presentation boosts user engagement, ensuring quick understanding without excessive scrolling.
4. Intuitive Subscription Selection: The revamped design simplifies subscription selection, making it swift and user-friendly.
5. Aesthetic and Functional Fusion: Resulting in an appealing and functional first screen, seamlessly blending design aesthetics with usability.

Further insights will be revealed through testing phases.