Learn from Great Design: Harry’s

by Tom Kenny (@tkenny)

harrys.com

Once upon a time, two men were fed up with the ridiculous prices large companies were charging for razors and decided to create a business with a better and more convenient service, without sacrificing quality and at lower prices for their customers. These two men are Andy Katz-Mayfield and Jeff Raider and they created Harry’s, where you can subscribe to have shaving goods delivered to you on a regular basis.

Harry’s homepage

Harry’s homepage

The first thing you notice about the design is the sophisticated look and feel. And it’s very important they portray a great visual aesthetic. After all, they’re selling a product to help men look their best. Would people trust them with a site that didn’t look great too? Probably not as much. First impressions count on the web as much as they do face-to-face.

Shave Plans

The main selling point is the subscription service. You can choose from a pre-made plan:

Shave plans

Shave plans

Or you can create your own shave plan:

Create your own shave plans

Create your own shave plans

The use of natural language is a great way of literally talking to your audience, or your audience talking to you, in this case. It’s super simple to understand and it is very easy to scan and understand even if you only focus on the interactive elements. Another example of design by writing.

Update: During the process of writing this (at the last minute no less!), Harry’s have changed the design of this page and seemed to simplify it even further. It now no longer has the create your own option but only offers choice based on frequency instead.

Harry’s new shaving page design

Harry’s new shaving page design

Now the simple question of “How often do you shave?” is introduced, with simplified call to action areas which visually have more weight than previously and with less wording, only focused on how often someone shaves. They’ve removed the slightly ambiguous terms “everyday shaver”, “occasional shaver” and “infrequent shaver”, which were pointless considering they had the actual frequency underneath.

Interestingly, the wording of the call to actions have changed from “Enroll” (which I always thought was a little odd) to “This is me”. This change feels much more personal and assertive. Enroll sounds too scholarly, far from the target audience.

It’s entirely possible I saw a version of an A/B test but I have no way of knowing. Perhaps they’re testing whether people will create their own by using the checkout cart page to edit quantities and add/remove items or perhaps they’ve done user testing and found this is the best way. Either way, it’s worth including so you can see the difference and possible evolution of the design.

Product Page

The product pages include fantastic looking images. As items are arranged into sets, they are laid out neatly. This practice is known as “knolling”. It’s basically a term for laying out things in a neat fashion. For Harry’s in particular, it exudes quality and there’s something to knolling that gives a real sense of attention to detail.

Harry’s Product Page

Harry’s Product Page

Knolling the items also allows them to swap specific items out depending on options selected on the product page. Here you’ll see the image change to include an engraving example as I’ve selected to have the handle engraved.

Engraving selected

Engraving selected
Selecting shave cream instead of foaming gel

Selecting shave cream instead of foaming gel

This is a very effective (and simple) way of informing the user what they have selected and what they will receive. Rather than simply selecting the option and see that as an indicator, you will see the image change to reflect your chosen selection too.

Checkout

Harry’s checkout page

Harry’s checkout page

The first thing you’ll notice about the checkout page is how simple and clean it is. They do try to upsell you but it’s subtle and not annoying. In fact it will probably be helpful for some customers.

Other than the tidiness of the page design, you’ll notice the call to action is extremely prominent and in fact, appears twice on the page, giving it extra attention. I assume it is included at the top and the bottom in case there’s a large list of items but the majority of the time you will see two “Checkout” buttons, which isn’t a problem at all.

Their Story

As I believe writing is one of the most overlooked skills a web designer should have, I want to highlight some great text from Harry’s story to show you how they effectively talk to their customers.

Harry’s story

Harry’s story

Harry’s do a great job of telling their story, as you’ll find in their about section. Here’s the very first wording on the page:

Harry’s was built out of respect for quality craftsmanship, simple design, modern convenience and most importantly for guys who know they shouldn’t have to overpay for a great shave.

“Respect”, “quality craftsmanship”, “simple”, “convenience” and “shouldn’t have to overpay” are the key words and phrases here. They are talking about everything the big companies aren’t even thinking about. They don’t have respect for anything in that list really. Gillette have only started their own subscription service because companies like Harry’s exist and could eat into their market and even then, they don’t have respect for price as they don’t seem to have reduced them.

The story supplements their offering of what their audience want with the actual service without getting in the way. It exists for those who want to go exploring to find out more about the company, so it’s in a completely different section of the navigation and never distracts from the main focus of the website.

Other Examples

I’ve already run through some wording changes on the most recent version of the shave plans page but the following text is worth noting too:

You can cancel or modify your plan at any time, no questions asked (but why would you do that?)

The decision to include the phrase “but why would you do that?” at the end of the share plans page is bold but demonstrates they have confidence in the service and products they offer, doing so in a fun and memorable way.

Special Edition

Harry’s Special Edition microsite

Harry’s Special Edition microsite

At the time of writing, Harry’s have a promotion on special editions of their razors, using some mountain climbers. They set up this interesting microsite to promote them and it is very well designed.

It does have one strange quirk though. You start at the bottom of the page and scroll up. It works well once you realise they’re using it in the context of climbing up a mountain. Even though that particular aspect feels a little odd at first, by going against the way sites are normally used (without being difficult to use), it makes it more memorable.

Mobile

Strangely, Harry’s website isn’t responsive. You would think this is the ideal design to make responsive, as anyone with any experience of responsive design can imagine how they would easily turn it into a responsive site. I’m sure you’re doing that right now.

Harry’s mobile site

Harry’s mobile site

What they do have instead is a separate mobile site, so at least they’ve created some sort of dedicated experience, rather than making people pinch and zoom.

The important thing however, is that you can do everything on the mobile site that you can do on the desktop version. It even contains the same natural language system for building your own shave plan.

I know many designers would probably scoff at it not being responsive but at the end of the day it doesn’t really matter if it is responsive or not. What really matters is the experience and they definitely haven’t compromised on that. Sure, responsive design could make development easier but the customers don’t care about that.

How are they doing?

At the end of 2014, Harry’s have raised $200 million of funding, which is staggering considering they’re not even 2 years old yet. They’ve even inspired a copy-cat company to launch the idea over here in the UK, before Harry’s make their way over here, if they decide to.

Really the magic is in the unique service (at least it was when they launched) but how much is their website helping with this? We can’t be entirely sure of course, but we do know it’s the gateway to purchasing their products and the only way to do so, so obviously it plays a major role.

The idea definitely resonates well with men who’ve had to put up with years of big companies charging almost stupid prices for what essentially are small items made of plastic and metal. The two co-founders spent the better part of two years researching the global men’s shaving market.

You can definitely say they understand mens’ appearance, given their success, and that shines through in their website. If the actual shaving experience is anything like their web design, they’re on to a winner.

Improve your design knowledge in just a minute or two a day, for free

with...

You'll get a free email every Monday to Friday with actionable design details that will increase the effectiveness of your designs. Each one only takes about a minute or two to read.

Free. No spam. Unsubscribe anytime.

by Tom Kenny

I’m a freelance web designer and front-end developer with 9 years of experience designing for the web. Follow me on Twitter here.