Designing A High-performing Product Details Page
An independent case study
Design Process
1. Purpose
The “why” of the project and its importance.
2. The Problem
The big question and the start of the exploration.
3. Hypothesis
Organizing ideas and coming up with well-thought-out solutions to experiment with.
6. Metrics and Testing
Evidence is crucial to success. Creating a sound testing strategy and identifying the right metrics to measure is key.
4. Company and Users
Understanding the company’s market positioning and its customers.
7. Conclusion
Reflecting on the results of the experiment and identifying opportunities to improve.
5. Competitive Analysis and Ideation
Constructing solutions in a way that is aligned with industry standards and implementing the most suitable design patterns for Conxus’s user needs.
The goal of this independent study is to briefly showcase design thinking that reflects my product design maturity and the application of my learnings in the e-commerce space.
That said, I decided to focus on a fundamental aspect of a customer’s purchasing journey and, that is, to design a PDP that can compete with the best-performing PDPs in the market by understanding the principles they adopted, identifying their blind spots and coming up with a testing strategy.
Purpose
How might we design a high-performing product details page?
High Performing Product Details Page Definition (For this study) - Great targeting, good quality product and amazing UX.
2. The Problem
Understand the company’s market positioning and its users in order to identify user needs and expectations.
Look at e-commerce PDP design trends of reputable brands in the same industry and identify their gaps in order to design a competitive PDP page.
Come up with a testing strategy and identify the right metrics to measure and integrate it in the pages to validate its success.
3. Hypothesis
4. Company and Users
Conxus (a mock company for the study) is a DTC CPG health and wellness brand. Its mission is to provide effective, high-quality nutritional products to consumers and businesses. Its primary customers are ages 24-42, middle to upper middle class. Their customers are Health-Conscious Consumers, Brand Loyalty Enthusiasts, Digital Natives, and Tech Adopters. Businesses are its secondary market, targeting boutique health and wellness stores and juice shops.
5. Competitive Analysis and Ideation
I took a very lean approach to competitive analysis and ideation. I replicated a PDP from Conxus's close competitor that is assessed based on UX standards, applied Conxus’s styling, compared the designs with leading brands such as; Brandless, Huel, PerfectKeto, and other E-Commerce websites, and applied design patterns more suited to Conxus’ user needs. It’s also worth noting that there are specific principles Conxus stands by such as; No hard-selling and design with elegance. Those principles are made for Conxus’s target customer’s wants and needs.
5.1 Elevated Product Viewing Experience and Elegant Styling
Conxus ✅
Overall monochromatic design styling allows product images to stand out.
The layout emphasizes product images as they take up about 40% above the fold of the page.
Easily browse through images, left or right by clicking through the carousel’s navigational buttons or by selecting the small preview images.
Conxus’s sleek and simplistic design, using finer lines shows elegance and differentiates it from other HW brands which use bolder lines and wider blocks of black.
Other health and wellness websites ❌
5.2 Ability to easily select different variations of the same product
Conxus ✅
Brandless ❌
Unlike Brandless, Conxus allows you to easily switch from 1 variation of the same product to another.
5.3 Clear Subscriptions Without Hardselling
Conxus ✅
Elegantly emphasizing subscription and discounts with a clean layout
Communicating delivery frequency with Days vs Weeks to be more specific so that customers can plan to fill delivery gaps accordingly.
Limited delivery frequency options to prevent “The Paradox of choice” problem by knowing the customer’s shopping patterns through research.
PerfectKeto ✅
PerfectKeto also showcased their subscriptions with simplicity.
Conxus ✅
Brandless ❌
Conxus ✅
Huel ❌
Conxus uses links for more information about the product. In this way, it allows other important content such as the “Add to cart” CTA to be more visible for users in the upper half of the page.
The use of Modals or Light boxes also allows more flexibility for larger content which is usually the case with nutritional information.
Huel ❌
Huel’s plan selection has too many data points which can overwhelm users, making information hard to digest.
The layout and color choices can make it hard for users to read clearly which is also an accessibility issue.
There are too many frequency options, which can be a barrier for users to decide.
Weeks aren’t as specific as the number of days, which makes delivery planning harder.
5.4 A cleaner and flexible way to show more information
Earthbar ❌
PerfectKeto ✅
Huel ✅
Unlike Earthbar’s tabbing which can push information down. Brandless decided to use a collapsable interaction wich can hide content, but can also push information content down.
5.5 Check shopping bags easily
The “Add to cart” CTA pulls the shopping bag drawer out right away which can motivate users to purchase rather than just adding items into the bag and eventually abandoning it.
Huel takes users to the checkout page right away, which can motivate users to checkout. The only problem with this approach is, that if users want to check the product page again, users might think that if they press back, they will lose the products in the shopping bag or might just get lost in the process and restart the purchasing journey altogether. This interaction just doesn’t allow the flexibility for users to check the bag and the product page side by side easily.
5.6 Small Screen Sizes (Available in the next phase)
The above UI comparisons are just among the few other things that I took into account to create Conxus High Performing PDP. For this phase, I haven’t showcased small screen sizes which is coming up next. My approach to mobile optimization is to think based on the on-the-go mindset of users and the types of mobile devices they’re using, prioritize the information that is needed in that mental model, and be creative on how to incorporate available information in the desktop version on mobile. Maybe some aspects of the desktop version wouldn’t be needed on mobile.
6. Metrics and Testing
Evidence is crucial to validate if the page is delivering to business expectations. A good testing strategy and identifying the right metrics to measure are key. Below are some metrics I will measure and why.
Page load time - The site needs to load in under 2 seconds (e-commerce standard) across all screen sizes. Long load times are a huge turn-off for consumers and can indicate an optimization need in rich media or content.
User engagement - Amount of time users spend on the page. Long engagement time might indicate some adjustments needed in the content (UX, media, and copy). The improvements can be a good case for an A/B test.
Conversion - The rate of visitors who proceed to purchase. Positive numbers indicate that we’re catering to our target customers’ needs.
Bounce rate - Percentage of users who leave the site without interacting with the page. Multiple factors can cause this, such as bad UX, brand trustworthiness, technical problems from the user’s side, and wrong targeting.
Cart abandoned rate - Number of users who add to a cart but abandon it. A negative rate might indicate some obstacles that users face that need to be addressed in the checkout process.
Click-through rate - Percentage of users who click through CTAs such as “Add to cart” CTA. A positive number indicates that the placement of CTA is clear and that the goal of the user is achieved on that particular page.
Product Rating and Reviews - Track no. of positive and negative ratings and reviews to understand if the product is causing the page to not perform well. Ratings can work for and against new companies. Making sure that there’s good brand awareness will be a good indicator that this metric can work. Conxus is a new company so I didn’t include this in its PDP for this phase but hopefully soon!
Feedback and Surveys - Gather feedback from users through feedback forms and surveys. I’ll use data insights to improve the product or UX.
SEO - Search engine visibility is important. I will be consulting with engineers and SEO experts for relevant keywords in product titles, descriptions, and meta tags.
Customer Lifetime Value - Estimates the total value a customer is expected to bring to the business over a certain amount of time. This provides insights into the long-term value of a customer. This would be a good measurement of the impact and quality of subscriptions to Conxus’s business goals.
Conversion Rate for Returning Visitors - Percentage of returning visitors who convert. This insight would represent the effectiveness of Conxus’s PDP and marketing strategies for retaining customers.
Other metrics can be used to measure high page performance but I think the above measurements would provide sufficient evidence to start.
7. Conclusion
To build a high-performing Product Details Page, it is crucial to have a comprehensive understanding of the company's market positioning, product quality, as well as user behavior, and UX expectations. Additionally, it is important to have a well-thought-out testing strategy to ensure that the page meets user needs and performs well.