So you want to become a product designer?

When I first got into the product design world, I had a lot of difficulties to find any information whatsoever on how to do my job. What are the tools? Where can I find the resources? How will I know that I do a good job? In this essay, I will try to answer those questions that will hopefully help other people who start this really great job.

The tools

Before getting into the design of a feature, I always sketch. All the time. Even though you can spend a lot of money to buy great notepads such as the Dot Grid Book, a simple blank white sheet of paper is enough. Draw as much as you can to find the inspiration. You don’t have to be precise: I would actually suggest the opposite. The more abstract it is, the better. Even if you don’t know how to draw, draw. It does not have to be pretty to make sense. When you are satisfied with what you did, go and show it to your colleagues. They’ll be able to give you feedback instantly.

An example of a very detailed sketch.

After the initial sketching process, I create wireframes. By wireframe, I mean a visual representation of what I want the product to look like and how I want it to behave. Their main purpose is to communicate an idea to the different teams that are concerned by the project. It does not matter which technology you use (we’ll cover that point in a minute). In a startup environment and for a web product, I don’t believe in static, non functional wireframes. A printed image does not say anything. With an image, you are not really in a browser, you can’t play with it, you can’t see how it will behave. Static images as wireframes are great for agencies who need to present wireframes in Powerpoint to their clients – which is insane, but whatever.

Wireframes can be created with a lot of tools. One of the popular techniques, especially in the startup world, is to create them entirely with HTML/CSS/JS. That obviously requires you to know how to code. On small projects though, I don’t recommend it. Coding takes time, no matter how good you are. And once you begin to play with CSS to make it look good, it’s already too late: as a perfectionist, you will lose a lot of time adjusting padding, font-size and this little border-radius that is not yeeeet perfect. I know, been there, done that. So what tools, then? I’ve found that Axure can help you produce functional mockups very rapidly, in a very efficient way. And as long as you use the right libraries and you use masters, Axure beats HTML/CSS everytime. Some people use Omnigraffle (and the great Graffletopia), others use Balsamiq. Those two are great for static images – but you don’t want static images when you design a feature on a web product.

Axure, which is now finally available for Mac.

As a product designer of a web application, you have to know every cool web products out there. As soon as you see something great, don’t hesitate to save this inspiration with tools like Littlesnapper, made by the great folks at Realmac. This software makes it easy to take screenshots and to organise them. Every day, I surf the web a lot – to check a link sent by a friend through Twitter or because I’ve received a newsletter by a company which has updated its product. Every time I see something worth remembering, I take a screenshot. To me it’s an invaluable tool. It’s always the first place I go to find inspiration. For instance, if I have to redesign a registration process, the first thing I’ll do is looking for the tag “registration” in Littlesnapper and all the screenshots that match this tag appear.

A view of my own Littlesnapper.

The mindset

I don’t think you can be a great web product designer without knowing how things work on the web. Technically, I mean. You have to possess strong front-end skills: knowing how HTML and CSS work, and ideally JS, is essential if you want to push the limits further with your ideas. You don’t necessarily have to know how the back-end work – but it would help. Why is that? Well… can a car designer imagine the next car if he does not know what a car is and what the current state of technology permits?

You also need to have strong communication and product/marketing skills. As the guy you will design the product, you will have to convince almost all the departments in your company that the path you want them to take is the right path. You are absolutely certain to fail if you don’t know what you are talking about, and if you don’t know how to express those ideas with a language suited to all those different audiences.

In the end, it is also about respect: as product designer, you will have to discuss with the product team, the management team and the developers. They will not respect you if they know that you speak without knowing their world.

As a product designer, you will also learn to listen. Listening to the customers of your application is absolutely critical. Of course, you will hear countless feature requests, but you don’t have to say Yes to these ones, at least for now. What you will learn, however, are the numerous problems you have created in the application your are in charge of. As good as you are, there are things you have not thought about, problems or bugs you have not encountered despite thousands of tests. Listen, and evolve. Being humble is hard, but this is how your product will become even greater.

There are two moments that are very stressful in the life of a product designer: when you launch a new feature, and when a redesign of a feature goes live. It’s exhilarating, but despite all the internal tests, you are not sure that your users will accept the new features, or simply know how to use it in the way you want them to. It’s stressful because all those countless hour spent on designing something great can be eventually useless if the feature is rejected in the long term by your users. The “in the long term” is important here: most of the time, when you redesign something, you are pretty sure that most of the users will complain at first. After a while though, those complaints fade away and users forget or get use to it (Facebook being the perfect example of this kind of situation).

As a product designer, you should not let emotions go in the way of your design decisions. A lot of times, you will have passionate discussions with other people about the features you have in mind. The button should be placed at the top, not at the bottom. This colour is distracting. This should be placed in the previous tab, not here. And so on. Those discussions will not go anywhere. Data is the only thing that will make everyone agree. When you are not sure, test. A/B test whenever you have the chance to. Analyse. Gather statistical data. And then iterate.

A product designer needs to be very curious. Everything can be the source of a great idea. Product designers usually have strong interests in visual arts (photography, typography, movies) and design in general (virtual and physical). You also have to be perfectly informed on everything that’s going on on the web – reading blogs and magazines, listening to podcasts really help to stay well informed.

Most importantly, a product designer should know the UI patterns by heart. Sites like UI Pattern and the Yahoo! Design Pattern Library should be your bible. Knowing them will ensure that one knows when to apply them adequately – and when to ignore them willingly.