The Context

Harry’s is known as a razor brand, but the company sells many other products beyond shaving like facewash, lotion, and even hard goods. As the brand looked to expand its product portfolio, they wanted their loyal customers to expand beyond buying razors to trusting them for their entire grooming routine. A key part of this, was creating a new product detail page that would let consumers know what makes Harry’s products great and how to incorporate them into their grooming routines. It was clear that our old product detail pages not only bucked many of the predominant e-commerce design patterns, but also lacked a logical content hierarchy. Users had to scroll to the bottom of the page to get any information about the product beyond its size, name and price, which was not an ideal experience.

Initial Ideation

We knew, existing page was not providing much content to help users consider why they might want to purchase a Harry’s product. But we weren’t sure what information would actually help sway purchase intent. To better understand the mindset of our customers, we met with our Consumer Insights team to go over the data they’d gleaned from various focus groups, customer interviews, and home studies.

From them we learned that first, Harry’s customers trust them. The brand NPS was very high, and we didn’t necessarily need to be overly aggressive about promoting our brand credibility. Second, Harry’s customers are not necessarily a high maintenance bunch when it comes to their daily grooming routines. While they trusted Harry’s products, our customers did not necessarily understand why they might need a product like Post Shave Balm or why they should use both a Post Shave Balm and a Face Lotion. Lastly, Harry’s overall brand position is a balancing act between price and quality. Harry’s customers aren’t looking for the fanciest possible product, but they expect something that’s worth their money, easy to use, and that has a clear benefit to them.

Armed with this information, we workshopped a session with our peers in marketing and brand design to help us prioritize the content we could include on the page.

Wireframe Explorations

Next, I took the sketches into Sketch App so I could begin to explore more granular and nuanced aspects of the design like line lengths, position of the fold, handling of image thumbnails, how much benefit-specific content could fit on the initial screen view, etc. While I explored four or five general concepts for the page, I focused on the two shown below.

A central feature of both concepts is a text callout of the key value proposition of the product - essentially explaining what it will do for the user’s skin or grooming routine. The main difference between the two concepts is in the handling of product photography.

Revising the Wireframes

As I continued working on the wireframes, the product team felt that we were heading in the right direction but decided to confirm that with a little user research, so we ran a customer survey to see what customers said they would prioritize on a product detail page. Users were asked to rank benefits and information about a product in terms of its importance to them when making a purchase decision. The survey results confirmed our theory that the most important information beyond the basic details of price, product name, and image was this idea of the product value proposition. It also revealed that while our users didn’t want a laundry list of exotic ingredients, they were impressed and surprised by the natural ingredients in Harry’s products like the Aloe Vera in the Post Shave Balm and volcanic rock in the Face Wash, so it was a differentiator for us in the space to include some of this content. We also found that what we thought was a mere afterthought - free shipping on orders over $10 - was a substantial benefit in the minds of some customers, so we decided we needed to feature this information somewhere on the product detail page instead of just including it at checkout.

For the final wireframe concept, I decided to go with the first product page concept, featuring a large image on the left and product name, price, details and call to action (CTA) on the right. This was a simple, approachable design pattern that is a standard in the e-commerce space, making it intuitive for our users.

In support of our content strategy, the final wireframes featured a prominent value proposition statement and an accordion with the product benefits and details in it. By default on page load, the top accordion would be open, showing the key product benefits. By using an accordion, more detailed product benefits would still be available for users with a click rather than requiring them to scroll through the full page. Additionally, I decided to tweak the placement of the Add to Cart button on mobile to be visible on initial page load and then pin to the bottom of the browser as the user scrolled down.