10 Product Design Guidelines08.23.11
One thing that I often get asked to give feedback on is a set of mocks, a beta, or a website. Sometimes this is within the larger context of, "What do you think of my idea?" -- other times, it's more functional in how something works. I noticed that, thematically, I was giving similar sets of feedback so I wanted to do a little experiment. Using only companies in articles on the current home page of TechCrunch (which will obviously change depending on when you read this) -- I would illustrate 10 product design guidelines. The companies I pulled out were Codecademy, Erply, iSwifter, Proxino, SimpleGeo, Square, and Wanova.
1. Single Message: SimpleGeo [link]
I think this is a really good website and I'll refer back to it several times. But they do something on their homepage which is very rare -- which is having a single message and sticking to it and hitting that message in multiple ways. They actually state it upfront, "We make it easy for developers to create location-aware applications". Pretty straightforward huh? You know if you're their customer or not... are you a developer who is making a location-aware application? You also know their value proposition: ease. Right below that, they hit that message again -- 30 free days of unlimited use, $0 / 10K calls per day, and a free database of business listings and points of interest. I won't read off their entire homepage -- but just check out the rest of the page. The page is elegant in its simplicity and repetitiveness; they know what they're selling and they sell it repeatedly.
2. Social Proof: SimpleGeo [link] and Erply [link]
Social proof is really important -- it's a mental shortcut that says, "This company is legit or, even better, you should work with this company." There are obvious forms -- such as who funds the company, who runs it, who has written it up, or even (which is much more subtle), how the company presents itself. If you're thinking of buying products from, say, Apple -- you know that Apple is a large, technologically savvy company that sells a ton of stuff and probably makes a lot of money. They're probably relatively safe to work with. A startup -- to convince their prospective customers to work with them -- has to do the same thing but without the brand value of an Apple. So here are two examples that do this -- one better than the other. In the case of SimpleGeo -- they do it in 2 ways. The first way is very traditional -- press quotes. Read/Write/Web, TechCrunch, and GigaOM. I've seen this taken to an extreme where the homepage of a startup will have who backs them (institutional investors + prominent angels), where they've been written up (TechCrunch, etc.), and awards/accoldates/other forms of social proof (e.g. Y Combinator graduate, etc.) SimpleGeo also achieves social proof purely in terms of how they present themselves. They have a design that clearly expresses themselves, probably cost a lot of money, and clearly says, "We're a real company." Erply, doing the more conventional things, cites the publications they've been in (though less effective as the quotes aren't right on the page and the logos are a little buried within the larger noise of the homepage), lists out some awards they've won (which is not done well since these are not really well known tech awards), and their customers (which, once again, isn't super powerful because most people probably haven't heard of most of these companies.)
3. Show Don't Tell: Codecademy [link]
I frequently see startups that try and describe with many words what they do. It's the old adage: show, don't tell. What Codecademy does is great. You get to the homepage and it's right there for you. Start coding with their faux command prompt. It's pretty awesome and kind of brilliant.
A second example -- not quite as powerful for me but still really good, is Square [link]
What's Square? Well, they make it clear by having a giant picture of someone swiping their credit card through a Square card reader that is attached to an iPhone. Clear enough. They reinforce this with text that says, "Start accepting credit cards today." It's somewhat similar to "Single Message" in that there is great clarity in terms of exactly what the company does, who their customer is, and how to interact with the company.
4. I don't understand what this is: iSwifter [link] and Wanova [link]
Unfortunately, I often write this feedback, "I don't understand what this is." Sometimes I'll figure it out after some digging, or watching a promotional video, or going through many pages. I shouldn't have to do any of this. I should be able to see it, comprehend it, and understand how I do or do not fit in with the company. Take a look at iSwifter. "World's first cloud-based content streaming platform for mobile devices". I don't know what that is. They also use up really valuable real-estate to 1) promote in two places that they're hiring (is that really the best place to do so? Inspired people will find their jobs section and for everyone else, this is just distracting) and 2) They have a "news" section. Why do I care about the news when I don't know what the product is? They could use all this valuable real estate to explain what iSwifter is or their value proposition. In the case of Wanova, well, I don't really know what to say. Judge for yourself. On a basic level -- I don't understand what they do. On a more sophisticated level, there's a lot of jargon, there's a lot of randomness (5 product demo videos?), and it's a very uninspiring design. Imagine your Mom was the one looking at the homepage. Will she understand? I realize in some cases there's a slightly higher level of sophistication required -- but start there. Don't start with something only early adopters / your best customers / the most technologically advanced people will understand. Even those people prefer the beauty and simplicity of Apple products.
5. Low Text: Codecademy [link] and Square [link]
This is not always the case, but it is a good guideline. Less is more and less text is more. Here's a good exercise. Count up the # of words on your homepage and compare it to the # of words on the homepages of your best competitors. You can define "best" however you want but it should include the competitors who are better funded, have more customers or revenue, and are the ones that you respect. Include all of them. See who has more. Try conveying as much as you can with as few words as possible.
6. Right Amount of Information: Codecademy [link] vs. Erply [link]
Look at Codecademy's homepage. There's a reasonable number of distinct sections. I'm not going to break everything down, but just take it in viscerally. It's something that you can feel, look at, and comprehend. It doesn't feel overwhelming. You can process it. Now look at Erply. There are tons of boxes, lots of colors, lots of logos, and a lot of words. It's hard to know where you should focus your attention and which areas have more value. There's an interesting book called "The Paradox of Choice" [link]. In it, the author describes a test at a supermarket where researchers put out 3 jars of jam vs. 24 jars. One would think that 24 jars of jam would sell more (maybe much more) than 3 jars. After all -- so many more flavors to choose from, right? Turns out that with so much more choice, people didn't buy more -- they bought much less. Choice can be paralyzing. I think a similar concept occurs here -- when you don't know how to organize the information on a page -- where one should look, where one should look first, and how one should interact with the page -- more becomes less. It causes uncertainty, and likely, a departure from the website. We're not going to stick around to figure out what's going on. We'll just leave.
7. I didn't have time to write a short letter, so I wrote a long one instead: Proxino [link]
I saw Proxino's website and thought of that famous Mark Twain quote. Look at how much scrolling and thinking and processing I have to go through to understand what this company does and what its value is. It's not the responsibility of the user / customers to figure it out. It's the responsibility of the company to convey this information as concisely and efficiently as possible.
8. Personality: SimplyGeo [link] vs. Wanova [link]
I saw SimplyGeo's website and thought, "Fun, easy to use, and visually appealing." I saw Wanova's website and thought, "Microsoft, enterprise, and difficult to use." You can feel the personality of the company, the people that work there, and most importantly, the product. Which product would you rather use?
9. Simple Sign Up: Square [link] vs. Codecademy [link] vs. Wanova [link]
I think Square is the best here. It's clear how to sign up, where to sign up, and what's at stake (nothing -- free Square card reader.) Codecademy is not bad. "Getting started" is actually them getting you to use their coding applet. Want to find out more information? They have an email newsletter with a simple button that says, "Add Me". By comparison, Wanova has a button that says "FREE Trial Download Now" that logically seems easy to use -- but (and I deliberately didn't press the button) -- doesn't it feel like that button is going to bring you to a giant form that requests all sorts of information from you? Doesn't Square and Codecademy essentially say, "We don't need any information from you. We're so confident in our product that we want you to try it out, and you'll love it, but if you don't -- no big deal." It's a totally different mindset. They're operating out of confidence.
10. See the Future: Square [link]
I often use this phrase with startups in reference to raising money. Investors want to be able to "see the future". They want to so clearly see how a small company will become a large company (and hence their investment will multiply many times over.) Sometimes they look at a product / website and don't like what they see (e.g. they can't figure out how to make money or think that it will be hard to make money.) Other times, they can see a product and realize, "Wait, if they're doing X, and then they get some traction, then they can do Y and eventually become really big." Square is a great example of this. Payment processing is an old, very profitable business with very unhappy customers. Lots of people know this. Look at Square's homepage -- what do you see? Someone trying to disrupt it. So then they see, "Wait, if they're creating a much easier and cheaper way to process credit card transactions, if they get a little bit of traction, why wouldn't many many businesses move to them and then they'll have built a massive company?" Investors can see the future. Customers can see the future. People want to work with and be associated with an eventual winner.
Before I close this blog post, I want to cover one last topic -- design standards. These aren't the design standards one typically hears of. Instead, it's taking a catalog of what's "standard" within your industry. Let's take an obvious example -- ecommerce. Where is the buy button? Always upper right hand corner. That's a standard to me. Where's the store navigation? Typically across the top or on the left hand side or both in some cases. Take an inventory of what's standard and start from there. You can deviate from the standard -- but it has to be an active deviation. Don't start with, "Where should the buy button be?" Start with, "Here's what everyone else does. If I want to put it someplace else, what's my reason for doing so?" You can deviate -- but it has to be a good reason or at least an active reason. Take advantage of the collective work that everyone else has done over many years. Build off of that. Building from scratch will almost invaraibly result in a massively inferior design. (It's like coming up with 10+ years of collective learning all by yourself.)
At the core of all of this is having an opinion -- and unfortunately, a strong opinion. Obviously you can disagree with me on any or all of these guidelines. But I'm working from a place of, "I like this, not that." That's where I'd encourage you to work from. Having a large enough library of examples you can draw upon, personal feelings about good and bad design, and then an ability to apply all of that to your own company's design work.