Chen Zhang Design Portfolio

Harry's Homepage

Redesign the desktop homepage to improve the user acquisition for subscription to Harry's products

Problem Definition & Assumptions 

I assume the target users for Harry's are men's grooming market.  

  • Young and mid-aged guys
  • Looking for simple, high-quality and affordable razor products
  • Looking for a well-lived life style 

Target Users

Product Values & User Needs

Harry's product value in the market

  • Affordable subscription model (core value)
  • Quality construction from German factory (core value)
  • More than just razors. Include other grooming products in your delivery box
  • Change your shave plan, delivery frequency at any time
  • Established customer base and reviews
  • Cancel anytime


The user needs for Harry's homepage vary from different customers. 

Non-customers mainly care about the unique value proposition of Harry's product: What and Why?

  • What men's grooming products can I buy from Harry's?
  • What difference are between different shaving plans? What are included in each shaving plan? 
  • How good are the razors and blades? What are the materials? 
  • What are customer reviews and rating for these products? 
  • How much are those shaving plans? How much is the shipping fee? 
  • How often do I get the delivery? 
  • Can I cancel or change to different plan at any time? 

Customers who are already subscribers to Harry's come to the homepage for a different personalized content and experience: New products, plans or magazines? 

  • Are there any new products, shaving plans or upcoming promotion sales? I want to customize my plan and buy something new. 
  • Read the Five O'Clock Magazine to learn new grooming tips and explore men's healthy lifestyle and fashion.
  • Any newly-opened Harry's Corner Shop? 


    Success Metrics

    Quantitive feedback from product usage tracking

    User Acquisition

    New Subscribed Users (Core metrics to dirve long-term sustainable product growth)

    First-time users (Daily / Weekly / Monthly)
    First-time users source (Google/Facebook/Twitter/Direct)
    User geo-location, platform and visit day & time  
    Button clicks for the "Start Free Trial" button and subscription conversion rate before & after the redesign
    Click-through-rate for the following subscription wizards workflow

    Products sold separately

    Revenue from product purchase manually
    Top products sold manually

    User Retention & Engagement

    Daily Active Users (DAU)
    Button clicks for View More in the Featured Products module
    Button clicks for the "Five O'Clock Magazine" button 


    Qualitative feedback from user testing

    Visitors to Harry's homepage can have different levels of contexts about Harry's products. 

    Existing Customer

    • If the visitor is already a Harry's subscriber, he is more interested to know about new Harry's products, new product promotion or read the Five O'Clock Magazine. 


    • With some context: The visitor may already knew some basic information about the company and product from the radio ad or online ad, so he comes to this page to learn more about the Harry's product value prop, price and other details.  
    • Without context: For this kind of a visitor, it's just his first time to know Harry's product. He is interested to know what this product is about and why he should buy the product as a potential customer. 

    User Context

    • Desktop website
    • Mobile website
    • Native mobile app

    Design Platform

    • Subscription to shaving plans
    • Sales of products separately
    • Corner Shop 

    Business & Monetization Strategy 

    • Dollar Shaving Club
    • Gillette On Demand
    • Traditional razor products in store (Braun, Philips etc)



    Ideate & Detailed Wireframes


    use Case 1: For first-time visitors

    Homepage: First-time visitors 

    This is what the non-customers will see as the homepage. 

    Hero Image Module

    • Try both the image and embedded video to show the product value and branding. We can even try image carousels and compare the analytics metrics to decide which design representation is the best. 
    • Change the button text to "Start Free Trial". "Free" means a lot to our customers. 

    Harry's Quality Module

    • Show a high-level overview to our customers about why they should buy Harry's products.  
    • Use real customer quotes and ratings with authenticity. We can also try showing quotes from social media (Twitter & FB). 

    Featured Products Module

    • This section can be used to promote our new products, new plan and sales itmes. Customer can directly buy products without subscription. 
    • This module is easily scalable and changeable with new items when needed. 

    More From Harry's Module

    • Highlight other unique value props and offerings from Harry's: magazine, corner shop and community giveback. 

    Use Case 2: For Returning Customers

    Homepage: Returning customers

    If the visitor is already a Harry's subscriber, he is already quite familiar with the product and brand, so we should present a different content and experience. We can detect the visitor as a returning customer based on: 

    • Signed-in user
    • Browser cookie

    Hero Image Module

    I assume the primary use case for an existing customer to come to homepage is to view and change the subscription plan. 

    Products for You Module

    Based on the customer current plan and previous purchase history, we can recommend products to him to drive him to buy our products separately. 

    More From Harry's Module

    I assume the Five O'Clock and Corner Shop are other two unique benefits and offerings to improve Harry's customer user engagement and loyalty.


    Visual Design




    When we have refined enough visual design details before launching the product, I would return to the assumptions mentioned in the initial section to verify and figure out some open questions in my design solution: 

    • The current visual design and branding style for Harry's website is simple and bold. Is it possible to try other branding style, imagery style and copy texts? 
    • Based on the analytics metrics we gathered, we should compare and try different design directions, such as video & images, re-ordering different modules, different copy texts etc. The more trials we try, the more data we'll have. 
    • If this redesign is successful for desktop website, can this design solution scale and apply to other platform, such as mobile responsive website and native apps? 

    We should rely on real quantitive usage data and qualitative user testing feedback data to inform our design iteration, and also consider business strategy and technology feasibility at the same time to refine our redesign solution.