Product Page Redesign
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 looks to expand its product portfolio, they want 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 that users were required to scroll to get any information about the product beyond it's size, name and price, which was not an ideal experience.
The Old Product Detail Pages
KEY INSIGHTS GOING INTO THE PROJECT
The Harry’s Customer Insights team provided us with some great upfront background that informed the project.
First, Harry’s customers trust them. The brand NPS was very high, and we didn’t need to be overly aggressive about promoting our 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.
It was clear from the beginning that our current pages were not doing a lot of heavy lifting due to a design that forced users to scroll to see contextual information about the product beyond name, price and size. However, our task was both content and design. We needed to decide what contextual content to include on the page and how the page should be redesigned. We decided to begin with an exercise to help us prioritize the content we could include on the page.
Creating the Content Hierarchy
THE CONTENT HIERARCHY PROCESS
We began by sitting down as a team to brainstorm messaging and content that we could include on the product detail page, and to think about how that content fit into the broader hierarchy of messages a user would be presented with when either browsing Harrys.com, visiting a product detail page from a cross-sell email, reaching the page through another link. I led the team (consisting of our PM, a visual designer, a dev lead, and a member of the brand marketing team) through this process of creating content hierarchies. As a team, we would brainstorm the key pieces of content (both copy and functional elements like buttons and dropdowns), then categorize and organize the pieces of content, and then as a team vote on what we thought were the most important elements of content. This gave us a clear measuring stick as we moved to design to consider what elements and messages the design should priortize both in structure and function and in visual cues.
Our hypothesis coming out of this meeting was that Harry’s brand trust, reputation for quality, and the low price point of Harry’s products meant that our user’s didn’t need a lot of details to be convinced. Primarily they needed to know what the product was, what it cost, and a high level overview of why they should use the product. Additional details like how to use the product or why to use that type of product (e.g. Face Lotion) were still important but would mainly be needed for more skeptical customers who required additional reasons to believe and who were less likely to convert in the first place.
Selected Screens from the Competitive Analysis
With a clear hypothesis in place, I started considering design options. I began with a competitive analysis of other brands in the grooming space including both mens brands, womens brands, and unisex brands. In general, most brands included a lot more content around the value proposition of their products. They also tended to use a pretty standard e-commerce format with a large hero image on the left and product details and add-to-cart UI elements in the right rail. The one notable exception was Port Products which used an eye-catching, full-bleed hero shot for their product pages.
After geaning some ideas from the competitive analysis I'd done, I started by sketching up a couple of quick general layouts in my notebook, primarily exploring how to handle the product hero image and the main product value proposition. When it comes to my design process, I tend to like to move into Sketch App pretty quickly as it lets me better explore more nuanced aspects of design (particularly on mobile) like what line lengths work and how content can fit in a constrained space. By using digital tools, I can quickly replicate the same basic layout and then explore dozens of subtle variations on key UI and design details in just a few minutes. However, here I felt like sketching was a good way to summarize high level layout approaches before a more nuanced exploration of specific UI components.
INITIAL 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 actually did 4 or 5 general concepts for the page, I initially presented three concepts to my team. The two most different of which are shown below.
Selected Initial Wireframe Screens
As I continued working on the wireframes, we 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 they said would prioritize on a product detail page. Essentially users were served up a survey asking them 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 prompt that I'd created in my wireframes. 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 $8 Post Shave Balm and the volcanic rock in the $7 Face Wash, so it was a differentiator for us in the space to include some of this content. It also revealed that what we thought was a mere detail - free shipping on orders over $10 - was a substantial benefit in the minds of many customers, so we knew we needed to include this information somewhere on the product detail page instead of just including it at checkout.
We didn’t want to change the design of the page just to change it, and we wanted any results of our changes to be clearly attributable and testable. For that reason we decided to go with the 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 is a standard of the e-commerce space, making it intuitive for our users. Additionally by keeping the general layout of the page relatively similar to our existing page, we would be better able to measure the results of incorporating more product information at the top of the page.
In support of our content strategy, the design direction I took with 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 mere click rather than requiring them to scroll through the full page. Additionally, we 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.
The visual design did not change greatly from the wireframe concepts and primarily just added a visual layer to them. However, one notable change we decided to make was to incorporate a callout about free shipping just below the Add to Next Shipment button. This reflected our user survey that showed that this a valuable benefit to many customers and with it's placement near the CTA we hoped to sway users at the moment of decision. The look and feel and image selection were primarily done by the visual designer on our team, but final UI tweaks for handoff (particularly on mobile) were done by me.
The Visual Design
We decided to use an A/B test to measure our new product page design rather than running user tests with a prototype. There were several reasons for this. First, we were confident in the basic usability of our design. It aligned with general e-commerce norms in terms of layout, and we had also followed basic usability guidelines around contrast, font size, and tap target sizes. Second, the key metric for this redesign was ultimately to increase the number of users who were visiting these pages and then making a purchase. Real-world purchase intent is almost impossible to model in a simulated user test.
Of course, there was some inherent risk in jumping straight to an A/B test, so we started with a small subset of users by taking advantage of a quirk in the site architecture of Harrys.com. When a Harry’s Shave Plan subscriber is about to have their next subscription box shipped, he or she will receive an email informing him or her that the next box is about to ship and asking them if they want to add any products to the order or change their delivery date. If the user, clicks through on any of the products they can add, he or she is taken to a product detail page that is visually identical to the normal product detail pages but that also has a different URL. We used these parallel pages to launch our initial A/B test.
The new product detail pages outperformed our expectations, increasing the conversion rate by 6%. Taking a more conservative estimate, if the new design is able to generate even just a 3.5% conversion increase once rolled out across all pages, it would still generate an additional $1.5 million in revenue per year.