User-centered
Product Detail Pages
How can we calibrate a product detail page to align with a user’s buying mentality and needs?
Project Scope
3 months
Skills used
UX Strategy, Design thinking, Program management, Competitive auditing, Usability and heuristic analysis, User interviews, User validation, Insight synthesis, Wireframing, Prototyping, Requirement creation, Workflow optimization, Cross functional collaboration
My Role
UX Design lead working with Product, Engineering, Marketing, Creative, and Publishing teams
Introduction
As UX lead, I was asked to find ways to integrate user-centered principles into Google Store’s Product Detail page strategy and structure. The PDP acts as the source of truth for a product’s core information, and is the key user touch point for product education, consideration, and conversion. This project was part of an existing workflow called “New Product Introductions” when new Product Detail pages are created to coincide with the unveil of a new Google Store product.
Key context
Google Store was trying to scale overall operations, including streamlining page-building processes, to increase launch velocity and optimize page performance
Marketing, Creative, and Engineering teams exclusively owned top-funnel page strategy, until this project
UX and Product teams were not stakeholders in developing top-funnel page strategy, like the PDP, until this project
Discovery
To begin, I needed to understand how users respond to our current product detail pages, learn how fellow consumer tech companies treat their own pages, and gain a footing in overall best practices, data, and usability standards for online page consumption. I conducted internal product reviews, competitive audits, data retrieval and research, existing usability tests, stakeholder interviews, and insight distillation to reach a core set of insights.
⚠️ Unexpected obstacle
I learned that PDPs are not focused on a specific customer persona or demographic. I ran into many conceptual challenges because the page is meant to resonate with all customer mind sets, per Marketing leads. Focusing a specific user would have allowed for a more focused, intentional solution. Unfortunately, this possibility was out-of-scope for this project.
Key Pain points and Insights
🥵 Users find the current Product Detail pages to be very long
🥵 Users find the Product Detail page content to be ambiguous, vague, confusing, and unhelpful
🥵 Users have difficulty finding desired content on the page
🥵 Users have difficulty navigating the page
💡 Users do not like long scrolling animations
💡 Scroll-locking is not recommended, not a best practice
Brainstorming
How might we … ensure that page content is useful, helpful, meaningful, and effective to our users?
How might we … confidently orient our users as they navigate the page?
How might we … help users find the page content that matters to them?
How might we … improve the overall page experience and make it more usable for our users?
How might we … help users understand our products in a way that encourages to move down the purchase funnel?
How might we … streamline the page-build process so that pages are built in less time with less resources?
Distilled pain points, insights, and brainstorming helped me reach a set a potential solutions to pursue and investigate how they could be implemented on the Product Detail page.
Exploration
Because potential solutions contained both broad and specific potential, I chose to explore their impact on existing content modules within the PDP and understand how much resourcing would actually be required to achieve a meaningful output.
⚠️ Unexpected obstacle
It became clear that although these solutions were great ideas, the scope of the project and what to actual focus on was growing quickly. Were all these ideas going to be implemented in the near future? Because I was still expected to deliver something for the Spring 2022 NPI launch, the urgency to land on a refined set of deliverables became a priority.
Pursuing a vision
Although it was important to narrow the focus, it wasn’t clear yet what should be prioritized. I decided to rapidly iterate upon all the existing and new modules to see if an ideal state of the PDP could be achieved.
Piecing the modules together led to a medium-fidelity vision wireframe which I shared with stakeholder teams. Soon after, leadership approved this direction as a long-term solution to implement over multiple quarters, given the increased scope and implications beyond this project. From here, I needed to prioritize which modules to work on and deliver for the Spring 2022 NPI launch.
Prioritized solutions and modules
I worked with Stakeholder teams to narrow the prioritized modules based on business priority, anticipated impact on CTR and CVR metrics, and estimated level of effort to modify, enhance, or create modules from Engineering. Upon selecting the modules, I worked closely with Creative to finalize the prioritized modules.
✅ Hero module
✅ Feature Summary module
✅ KSP module
✅ Solutions module
✅ Accessories module
✅ Reasons to Buy module
✅ FAQ module
❌ Content guidelines* - Fall 2022
❌ In-page Navigation module* - Fall 2022
❌ Impartial Reviews module* - Fall 2022
❌ Mini-Compare module* - Fall 2022
❌ Promotions module* - Fall 2022
❌ Navigation Re-circulation module* - Fall 2022
A user-centered method to content sequencing
Because the persona in focus centered on “an uninformed customer”, the page needed an approach that assumed the user knows very little about the product. With this in mind, it was fair to believe a traditional “Product awareness” > “Product Education” > “Product Consideration” purchasing mentality would be a conservative filter to sequence content on the page. Using this mental model helped content modules fall into an appropriate sequence.
Solution & Deliverables
Content sequence template
Arguably the most valuable and important piece of UX guidance, providing this content sequence template to NPI teams allowed for product detail pages to scale across the Google Store catalog in a consistent way for future launches.
Delivered modules
PDP Vision prototype
This Vision helped guide the overall directions for the PDP, helping to illustrate how the page could be optimized when user-centered principle, heuristics, and reusable modules are implemented.
Delivered modules in Context
In total, the Spring 2022 NPI launch utilized this refreshed PDP and these optimized modules for the Pixel 6a phone, Pixel Buds Pro, Pixel Watch, and Google Chromecast 4K product releases.
Result
The Store saw significant improvements in both performance and internal work flows after the new PDP approach was implemented.
Internal workflows increased in efficiency tremendously
A reproducible and streamlined product detail page format for multiple products
Resourcing more wisely distributed across all Marketing, Creative, Go-to-market, Engineering, and Publishing teams
More usable product detail page for customers with improved basic heuristics
Leadership buy-in to apply to all product detail pages
Next steps
After an arduous but productive page revamp, cross-functional teams, including UX, recognized that considerable improvements needed to take place.
Continuous and focus page and module testing
Deeper, quicker, and more effective cross-functional collaboration
Continued module feature exploration across all modules
Requirements for future module change requests
Cross-functional alignment of “custom” and “bespoke” content definitions