A product manager’s guide to working with visual designers

Today I’m talking to Erik D. Kennedy, a self-taught designer and former product manager (PM) at Microsoft who also has a background in computer engineering. He just released an awesome UI design course for non-designers.

What’s the best way to give designers effective visual feedback?

First, never say ‘I don’t like it’ without giving a reason. With enough people in the room, a design will never please everyone. What matters isn’t whether a design meets the aesthetic preferences of every soul present, but if it solves the business problem at hand.

Therefore, the best feedback is about problems, not solutions.

Related: Designers share the worst feedback they’ve ever gotten

It’s not “I don’t like this shade of blue,” it’s “I feel like this button doesn’t draw attention enough given its importance”. Maybe the way to fix the button is to change the shade of blue, but maybe it’s to change the size or position or alignment or white space or any number of other properties. Your designers should be brimming with ideas about how to fix the problems you raise.

I’m a firm believer that a PM should be an expert in the user, the user’s problems, and the business. The designer should be an expert in user interfaces. So if the discussion takes place at the border of those 2 specialities, it can be fruitful for both parties. A solution just handed to a designer for tweaking is of negative value—first the designer has to reverse-engineer your logic for coming up with this solution, then re-work how the design should appear. It’s less work to talk about business or user problems and let your designer astound you with their brilliance.

That’s what we shoot for, you know!

And not to invalidate everything I just said, but I do have some clients who’ll make direct interface suggestions. “Dude, move this button here”. Sometimes, those solutions are clearly awful and I need to train my client to give better feedback, but sometimes I have clients whose sense of design is so sharp, I feel that in another career, they’d have done just fine in my role. I have no problem there. It’s like working with another designer, even if that person is a PM or CEO or whatever.

So how do you draw the line and know where you fall? Ask yourself if you have a good gut sense of design. Ask yourself if designers feel sharpened by your feedback.

What design terminology should PMs be familiar with?

Well, I wouldn’t expect my PM to be intricately familiar with design terms, but I guess I can list a few things that come to mind.

Of course the most hated piece of feedback is: “it needs to pop more.” So let’s start with the term that will eliminate that from your vocabulary: “visual weight.”

It’s the fancy designer term for pop. It refers to the visibility of a given element. Visibility can be influenced by any number of things—size, shape, space around it, color (really contrast), etc. So the sum of all of these things is called visual weight, and it’s of the utmost importance that each element on a page have an appropriate visual weight.

You can measure this with a squint test: scrunch up your eyes and list the elements of the page in the order they draw your attention. Does that ranked list correspond with which elements on the page are the most important? This is not a high-fidelity test, but it’s a useful measure that you’re going in the right direction.

Ultimately, visual weight is about corralling attention. The design should direct users’ attention very precisely. PMs will want to know if a design is doing this, and then communicate with designers who will know a bunch of ways how to do it effectively. As a PM, a huge proportion of your feedback might be about this.

It’s that important.

“X-height,” “baseline,” and “cap-height.” Typography terminology is crazy. On one hand, you have these totally basic terms—”serif,” “sans-serif,” which I hope you know already—and then a lot of typography guides jump straight into this rather useless, arcane, and somewhat overlapping historical classification scheme—”grotesque,” “geometric,” etc. all come from that.

Skip the historical naming scheme for now, and learn to focus a bit on 3 lines defined by most fonts.

Fonts that butt up against the cap-height and baseline are going to have a neat, crisp, clean feel. Fonts with a high x-height are going to make more legible body fonts. The cap-height and baseline are also useful for talking about centering fonts vertically.

So the applications are pretty varied, but as far as practical terms surrounding type, these are ones that come up a lot for me.

Note: I 100% recommend getting the chrome extension WhatFont. It allows you to quickly identify a font you see on any website. This is fantastic because it allows you to organically start building up the list of fonts in your head that you know. Maybe you like the font on Mint.com. “Oh, it’s Circular, cool.” Then you think, “Man, Airbnb’s font is so slick!” And you realize that’s Circular too, and you can develop this mental model about when Circular looks awesome, and what sort of site or app might want to use it.

To be fair, this is your designer’s job, but if you’re able to converse fluently and throw out references and inspiration, I’d respect the heck out of that.

Helpful reference here.

What UI basics are good for PMs to know?

There are 2 basic use cases where a PM would want to be designing user interfaces

1. You want to create a vision mockup of a new feature or flow
2. You don’t have a solid visual designer and need to spearhead this yourself

In the former case, I think the biggest thing is this: don’t re-invent the wheel! Recycle anything from existing designs—fonts, font sizes, colors, layouts, etc. This is certainly what I do when I’m waltzing into a new gig and they have an established brand.

But creating something more from scratch is tough. I can throw out a few pointers, and maybe that’s about as good as we’ll get in this article.

Let’s talk about alignment. When I was just starting out as a designer, I really had no idea just how important alignment is.

What I’ve realized since is alignment is the universal mark of human effort.

Think about it: straight lines and alignment and right angles don’t appear in nature. Rough approximations, sure, but not the real thing. I mean, I remember learning in Boy Scouts that if you’re lost the wilderness you should make squares out of logs to attract attention from the sky, because geometric shapes just aren’t natural.

On the other hand, look at New York City, one of the most iconic human efforts of all time. It’s full of alignment and right angles. The streets are a perfect grid. The skyscrapers reach up in parallel. Everything is lines. Lines, lines, lines.

And so it is with our neatest, cleanest designs.

You can see over a dozen straight lines in this design (by Creative Dash). But what’s even more impressive is that of the forty-odd elements on the first screen, every single one of them is aligned with at least one other element.

That took me by surprise. Every single one! (We’re counting centering as a type of alignment, by the way.)

So this sense of alignment is huge.

Unless you’re making a data table with the expressed goal of showing as much data as possible, then you’re going to be adding in some whitespace to your designs. And, if you’re anything like me, the best amount of whitespace is almost always more than you initially expect.

Why?

At least for me, I came from the developer world. Whitespace is something you added in via CSS once the markup was there. But think about it. Unstyled HTML is all squished at the top of the page. It takes the maximum possible width and the minimum possible height. So when I’d add in whitespace via CSS, I’d be like “One pixel? Nah, more. Two pixels? Hm, more. Three pixels? Come on, we gonna do this forever!?”

The opposite approach is to design starting with pen and paper, or with a design program like Sketch. When you start with a blank page or blank artboard, whitespace is the default. Every element you add is a conscientious whitespace-removing decision. So you could easily draw something, and its digital equivalent means a piece of text has 50px of margin on top and bottom. “Whoa, that’s a lot!” “Sure, compared to what? Three pixels? Well, duh.”

One thing I go back to time and time again is a technique I call “fail left, fail right.” The short version of the story is that, when I was learning to ride a unicycle, I hit a (metaphorical) plateau where I’d keep falling off the front after pedaling about 1.5 rotations. Another more experienced rider saw me and instructed me to alternate falling off in front and falling off behind the unicycle.

This was initially very challenging to do. You’d think it wouldn’t be. Lean back, dummy. But I had trained myself very carefully to always fail in the same way. By alternating failure between falling forwards and backwards, I taught my body where the range of possible solutions was—between the failures!

Likewise, in design, with whitespace or any other property you’re adjusting, instead of starting at “normal” and adjusting from there, try to determine what is absolutely, positively too big of a value (“Hm, this h1 cannot be 100px—that’s way too much”). Then determine what’s too small (“It’s also pretty uncompellingly small at 24px”). And once you’ve seen the extremes, you’ll have a good sense of what might look best in the middle (“Cool—44px is pretty beefy, but I really love how much it stands out!”).

What’s the best way to get better at design?

I suppose this is my “teach a man to fish” answer here. If you really want to improve at design, it might be more useful for me to recommend exercises where you can teach yourself visual design, rather than insufficiently instruct you in all the intricacies of it in a quick interview.

Copywork (recreating someone else’s design pixel for pixel) is one such exercise. From my article in Smashing Magazine:

Copywork is a technique that writers and painters have been using for centuries. It is the process of recreating an existing work as closely as possible in order to improve one’s skill. In our case, this means recreating a user interface (UI) design pixel for pixel.

The trick is to pick a design that is better than what you are currently capable of. By copying something outside of your wheelhouse, you will be expanding your skills.

I give a bunch of examples of how it’s improved my own design toolkit in the article, but perhaps one of the most pertinent points is that copywork is something I’ll sometimes do when working on a project for a new client. It helps me absorb their existing style. That way, when I go to create my own designs, I’m already familiar with the visual language that they’re using to solve problems.

Good reading if this is a skill you seriously want to develop.

How does a PM develop a gut instinct for design?

First of all, I think this is totally possible. I think there’s generally 2 steps to this process:

1. Find something that you know is designed well (visually, at least)
2. Analyze why

The cool thing about this is anyone can do this process. You can be almost completely blind to what looks good and what doesn’t, but as long as you can make the most basic distinction of what you like and don’t, you can build from there.

So for step 1, this could be anything. An email client, an ecommerce site, etc.

For step 2, you’re going to use your words and articulate what was done well. At first, this might sound silly and awkward because you don’t really have the language for these things, but try. “I like this because the font looks very… uh…. important.” Boom. Good enough.

The point is, your brain is starting to try and build a framework around these new thoughts. What makes this font look “important”? What other fonts look “important”? When do “important” fonts look appropriate?

That’s the ladder you want to be on. Always recognizing, always analyzing. You’ll develop a greater gut sense of what you like, you’ll start to see patterns, and you’ll develop a language for talking about these things. Then you can go tell your designer, “Hey, the colors are really saturated given how formal this is—it feels a bit incongruous, and I don’t think our users will know we’re a luxury brand” and they’ll be slack-jawed in amazement.

Related: Lessons from 30 days in product management

If you were a PM and were presented with the first mockups of Craigslist, what feedback would you give?

Well, this is tough. Craigslist is sort of the quintessential looks-awful-but-works-great site. Sure, we can all think of a wishlist feature or 2, and obviously the site looks like it had a rough night last night, but the fact that literally everyone knows about and uses it despite this is evidence that it is designed very well indeed.

That being said, you want visual feedback, don’t you, Romy. Hm, let’s look at a page like this one:

https://sfbay.craigslist.org/search/sfc/kid

Here are some questions that come to my mind right away, and if I were a PM, I might relay on to a designer:

1. The terms “pic” and “map” could be unclear to new users. What do those signify? How can we represent that?
2. What does the trash icon do? We obviously can’t delete someone else’s listing. How can we explain that for users?
3. One thing with lists is you want it to make it easy to compare the things you need to compare. For instance, places might be a good comparable. Or price—that could be even better. Can we put those in their own column so they’re easy to compare? That would have a double effect of increasing the neatness and alignment of the page.
4. The breadcrumbs at the top use the smallest text using default browser controls and the logo is literally “CL” in Arial and doesn’t give an impression that we have put a lot of care in it. So, let’s either find a new job or make that look better.
5. Why is there a bundle duplicates option? Would users want to see duplicates by default? I would suspect the opposite is true.
6. The sidebar doesn’t have an impression that it’s separated from the main listings—maybe there is a way to improve it visually.
7. Cards could be an interesting thing to play with for the results. While cards should only be used if there are fairly complex objects represented within them, this might fit the bill. I could see this question going either way.

And so on…

How can PMs earn the respect of designers?

You’re ending on an easy one. I get to imagine my dream PM…

1. They give good feedback. The best product managers give really good feedback. That feedback always ties back to the user or the product or the business. It always makes sense and has me imagining possibilities rather than just shutting down the current solution.
2. They don’t micro-manage. The very best PMs I’ve worked with are really busy and work with a lot of talented people. Maybe that’s the cause of this, or maybe it’s the effect, but they don’t tend to micro-manage designs. They’ll mention a few key points I’m missing (ones that might have large ramifications and cause me to re-design pages and pages), but they have a commitment to shipping, a humility towards what we don’t know about our users, and a respect for my craft—and I never feel like I’m micro-managed. I’m not sure how much other designers would agree with the assessment above, but I can speak from my own experience.
3. They know the user and product cold. In the presence of a great PM, I can sit back and relax. I can stand up (#standingdesk) and do my job. But I don’t need to guess about if a user will understand a concept or metaphor, because I can ask and the PM will know. I don’t need to guess if I’m representing some feature wrong, or too strongly, or too weakly, because the PM will have a clear product vision.