Referral Program Launch

My Role

Led UX Design and handled some UI Design

Launch Date

Summer 2017


Since the launch of the brand and it’s famous Product-Hunt-featured referral program, Harry’s has not had a referral program. Although our customer research showed that most Harry’s customers have strong positive sentiments towards the brand, the overwhelming majority have not recommended Harry's to their friends or family members. Therefore, we felt that there was an opportunity to launch a successful referral program that would reward loyal customers and help Harry's acquire new customers more efficiently than they could through traditional advertising mediums. 

However, our research also showed that the most cited barrier to referring a friend was that shaving is not a topic that comes in conversation, so we knew that the mechanics of the program itself had make it very easy to share. While we didn’t think we could start a national conversation about shaving, we hoped to lower the barrier to sharing Harry’s by creating a quick, easy way for our customers to refer friends and get rewarded for doing so. Our goal was to launch a lightweight MVP version of the program as quickly as possible, but first we needed to understand what the minimum requirements were to both make it easy for customers to refer and to make it easy and compelling for those who were referred to sign up for a Harry’s trial.


The first step in my process was to dig into some of the data from our Customer Insights team about the customer lifecycle to create a journey map exploring the various points in the customer journey where referral could be a factor. From there, the team decided to focus on the user journey of a Shave Plan subscriber who has received one but not two paid orders from Harry’s after completing the free trial. We picked this customer segment as they were still likely excited about having discovered the brand, but unlikely to have “stockpiled” - a term we coined for subscribers who have received too many shipments and have excess shaving products on hand. Users who had reached a point of “stockpiling” were unlikely to be as excited about getting a credit towards future Shave Plan boxes when they wouldn’t be ready for their next box for quite some time.

Referral-Focused Customer Journey Map Overview



To help me think through possible user flows, designs and scope, I took a look around at the referral programs of various other players in the space, ranging from our direct competitor Dollar Shave Club to tech companies like Uber, Wealthfront, and AirBnB. 

Competitive Research

Competitive ExamplesCompetitive Examples


From here I created simple user flows to explore the crucial steps for both existing customers referring their friends as well as potential new customers following a referral link from their friends. For our P0 version of the referral program, we decided to limit the scope of our referral program to an initial launch email, a program overview page with a share link, and a custom landing page for referred users.

High-Level User Flows



To further hone our messaging, the team and I sat down and created a content hierarchy to better understand the various messages we needed to communicate and their importance to the experience we were creating. We aligned on several key points. First, it was very important for users to understand the mechanics of referral. In other words, both the referrer and the person being referred needed to have a clear understanding of what had to happen (in this case signing up for a free trial) for the referrer to get credit. We also realized that the landing page for those being referred had to both provide a holistic overview of Harry’s for those who knew little about the brand and also make it quite easy for users to simply sign up with minimal sales pitch if they were already more familiar with the brand.

Content Hierarchy Whiteboarding Session

Referral Hierarchy HeroReferral Hierarchy Hero


With a clear content strategy in place, I led the team in a whiteboard sketching session to explore what the launch email and the referral program overview page could look like. We settled on a three-step graphic explaining the referral process as the hero area content, but debated how much prominence to give the FAQ. With some basic concepts in mind, I turned to wireframing.

Whiteboard Sketches



Once in Sketch, my explorations primarily centered around the two concepts I had whiteboarded. Eventually, we agreed that the FAQ was less important than the referral link and moved FAQ down the page. Additionally, we decided to limit sharing functionality for the referral program launch to a share link and an email link that would open the user's default email client with a prepopulated message and subject line. We viewed this as a good compromise between reducing barrier's to sharing by providing the referrer with a preopulated email message to share while still keeping our MVP lightweight by not building a full-on web app to generate custom emails.

Initial Wireframes for Program Overview Page


Final Wireframes for Program Overview Page



The fundamental tension to balance for the referred user landing page, was balancing the priority of pushing the user to sign up for a free trial (the desired conversion necessary for the referrer to get credit) while also providing brand education and establishing credibility. To this end, I settled on a design that featured a callout about the trial in the hero space, a brand crediblity accordion section highlighting what Harry's stands for, and then a simple rundown of how the Harry's free trial works. By placing the brand content in a side accordion section, the overall length of the page remains short and concise, but there's also plenty of content there for interested users who need a little more proof that Harry's is a good brand. This accordion, the Meet Harry's, section became not only a centerpiece of our referred user landing page, but also something that we ended up incorporating on the main Harry's homepage.

Wireframes for the Referred User Landing Page



With a clear design direction in hand, we quickly put together visual comps to build an InVision prototype and run user tests. We brought in eight different Harry’s customers and had them use the prototypes on both mobile and desktop. The test tasks consisted of the user receiving an email notifying them of the program, and us then asking them questions to gauge their comprehension of the referral program based on the email. They were then tasked with clicking through to the referral program overview page and tasked with reviewing the FAQ and then copying and sharing the referral link. Our tasks and questions in this part of the test focused on the clarity of the overview page and the ease of copying and sharing the URL link and using the email this link button.


Once we had confidence in the basic usability of our designs, we finalized visual design pretty quickly as it really didn’t depart much from the wireframe direction. The most complex part was the development of the Meet Harry’s accordion and finalizing the brand copy that went with it.

The Visual Design for the Program Overview Page


The Visual Design for the Referred User Landing Page



Our initial launch of the Referral Program was limited to U.S. Shave Plan subscribers who had just received their first paid shipment at least three days prior to lauch but who had not yet received a 2nd paid box. Our theory was that this was the segment who enjoyed the product, were interested in continuing to subscribe, and would see high value in getting credits towards future orders. Because the program was being limited to Shave Plan subscribers only and within that group we were only targeting a narrow slice of subscribers, we stealth launched the program, sending an email about it only to the previously described group of users and slipping the Program Overview page into the signed-in account portion of the site.

Despite that, we saw good initial traffic with about 250 users hitting the referred friend landing page per day, but conversion actually only mirrored that of normal site traffic to Harrys.com. In other words, we were getting our users to refer their friends, and their friends were visiting the site, but the fact that they had been referred didn’t seem to have any effect on their ultimate decision about whether or not to sign up for a free trial. We realized that this probably had something to do with the fact that our initial program model only gave the referrer credit and gave nothing to the new subscriber.


The structure of the revised offer was clear - give the original referrer $5 for every friend who signed up and give the friend $5 towards his or her first paid shipment. Our original economic model had given us margin for a double-sided incentive and by tying the incentive to receiving a paid shipment, we made it less likely that users would game the system by signing up for the Free Trial and then immediately canceling with no real interest in ever becoming a paying subscriber.

The question was how to communicate this offer effectively and persuasively. We settled on a two-part system of a site banner and a notification in the Free Trial checkout experience. After some concepting and user testing we settled on a persistent but dismissible banner that would appear whenever a user landed on the Referred User Landing Page and would follow the user throughout the site from page to page unless the user explicitly closed it. Additionally, the text would be dynamic and would change once the user started the free trial flow to encourage him or her to finish checkout.

The second part was a notification card that would appear in checkout reminding the user that they were getting a $5 credit towards their first paid order. The key, of course, was trying to make it compelling for the user while still making it clear that the user wasn’t getting $5 towards the Free Trial (which costs $3 in shipping), but rather getting $5 once the paid subscription started. After some user testing around language, we decided to place the notification card immediately below the user’s subscription selections. By creating a visual relationship between the two, we hoped to create a mental association between them in the minds of our users.

Credit Banner on the Referred User Landing Page


Credit Card in Free Trial Checkout



Today the Harry’s referral program has been rolled out to all subscribers, and its messaging is now baked into many portions of the site including the Subscriber’s Next Box area of My Account and virtually all brand emails. I can’t speak to the specific metrics of the banner and checkout notification, as I left Harry’s shortly after I finished designing them. However deductively, I’m confident they have been successful since Harry’s product team A/B tests design religiously, and the design of the entire referral program has not changed since I left the company.

The live referred user landing page can be seen here, complete with banner, and Harry's subscribers can view the referral program overpage here