Product Detail Page Redesign

Teachers Pay Teachers, an online platform where K-12 teachers can buy and sell lesson plans and materials, was in the middle of a larger SEO effort when they decided they also needed a new product page design. Their current product page was was difficult to use, did not satisfy the needs of sellers or purchasers, and was negatively impacting SEO.

Though substantial changes needed to be made, the new product page design needed to be kept similar enough to the previous incarnation as to not spook their main users —both sellers and purchasers— who are school teachers, and thus not high technology users. The continuity between the old version and the redesign needed to be strong in order to keep the users’ trust.

The product page design also needed to align with SEO strategy. Elements that were important for SEO needed to be exposed in appropriate ways, and a balance needed to be struck between the capabilities of the homegrown CMS, user needs, and SEO requirements.

Heuristic Evaluation Example for Product Page Design

After discussing business needs and goals with the stakeholders at TpT, I analyzed the existing product page design based on heuristics —qualitative metrics— derived from UX and e-commerce best practices. This list of heuristics begins from a master list developed over the years, and is customized to the business goals of each client. The heuristics are roughly organized into the following categories:

  • Functionality and alignment with user goals
  • Navigation and information architecture
  • Forms and data entry
  • Trust and credibility
  • Quality of writing and content
  • Search
  • Help, feedback, and error tolerance
  • Page layout and visual/aesthetic design
  • Accessibility and technical design

This heuristic analysis was collected into a deck and presented to business and technical leadership. It was a useful tool to express the problems I saw and the areas for improvement. It was also invaluable for gathering contextual information from stakeholders. When I identified a problem area, for instance, the technical stakeholders had a chance to explain the sequence of decisions or the technical limitations that led to the problematic solution being implemented. We also used the analysis to prioritize elements of the product page design.

Page Description Diagram for Product Page Design

Building on the heuristic analysis, I created a page description diagram for the product page. Page Description Diagrams (or PDDs) are not very popular UX deliverables, but a favorite of mine for communicating the thought behind the information architecture of a page to non-visual stakeholders and reaching meaningful consensus on a project.

A PDD is a sort of verbal prototype that prioritizes which elements on the page are most important and what functionality will be available. It allows all stakeholders to agree on what is important before we decide how to visually communicate that importance.

This was a deliverable that the client did not ask for, but I strongly suggested adding. I have found on past projects that it is extremely important to get buy-in at this point in a project, with all levels of people on the product, so there are fewer disagreements later.

Product page design before redesign
Product page before the redesign
Prototype product page design
Annotated prototype


Product page design, as implemented
Product page design as implemented

After agreeing on what was important on the page, and gathering input about what was desirable from an SEO perspective and what was possible from a technical perspective, I created an interactive, annotated prototype of the new product page design in Axure.

In the new product page design, we simplified functionality, enabled cross-discovery of products, and helped users form mental models of the products and the larger product offerings, by tweaking the various elements present on the page. Specific examples of changes include:

  • Highlighting images of the product to be purchased, rather than the seller’s avatar.
  • Making the icons indicating the file type larger, so users know what they are buying.
  • Putting important information that will help users make decisions at the top of the page, and all near each other, rather than making users hunt for it.

After presenting it to stakeholders, and doing a round of revisions based on their feedback, it was delivered to the client, along with ten pages of annotations, so the rationale, thought, and functionality behind each choice was captured and could inform development.

Leave a Comment

Your email address will not be published.