Dan Mall On Rapid Ideation

How do you manage client expectations with this new process and convince them that they don’t need to see multiple versions of homepages?

It’s a shift not just in process, but in mindset all around. It’s a shift in the way you’re thinking about designing stuff for the people you work for, and it’s a change you’re asking the client to make, especially if they’ve worked with other web teams and are used to seeing comps. And it starts in the initial conversations with the client. By the time you get to the design phase, that’s too late.

When we’re structuring the statement of work with the client, we specify this process. And when I’m evaluating new projects, one of the most important things I’m looking for is a cultural fit with me and SuperFriendly. And if there isn’t one, it means that no matter what I show them, we’re going to clash at some point. On the other hand, if they’re hiring me because they trust me and trust that what we’re going to do is going to be good for them, they’ll be open to this [comp-free] workflow. If they’re not, that’s something I want to spot early on and basically say, ‘If you’re not comfortable with this approach, that’s okay, but it probably means we shouldn’t work together’. That allows them to say either ‘You’re right. We’d rather work with somebody who’s going to give us something we’re comfortable with’ or ‘Actually, give us a chance. We’ll try to adapt to a new process.’ We’ve turned down projects that ask us to just design Photoshop comps. And from my experience, it’s worth it. Clients who fit your culture are so much better to work with from a financial and happiness perspective. And working with open-minded clients is the best way to try new things.

How do you balance designing for the client versus the audience?

I’m a pretty pragmatic designer, and the reality is that on some projects the client is hiring you to design stuff for them—no matter how user-centric you want to be or they say they are. So you need to sniff that out early on. Are they hiring you to make them feel good, to design a thing they want you to design, or because they trust you to do the best thing for their users?

Once I’ve worked that out. I try to pick deliverables that will cater to that scenario. For example, I’ll sometimes use the visual inventory as the thing that appeases the client and gives a view of what they want for themselves. You get it recorded. You get feedback on it. Then you can tailor the rest of the design process and every other deliverable to the users. It’s not necessarily the ideal way to go, but I find it’s pretty practical. And I have no problem working on projects where that’s made clear up front.

The idea of leading the design process with an element collage is appealing, but what about wireframing? At what point do you introduce that?

I use wireframes really sparingly. To me, the ideation phase is about achieving the highest fidelity in the least time, and every deliverable comes with a trade off. With a comp, you get very high fidelity but must invest a lot of time. With an element collage, you save on time, but it’s a little more abstract, so you have to deal with a little more conversation. Wireframes are fast and easy to make. However, what you trade off is a false sense of fidelity and security. Because they’re high fidelity, clients sometimes get locked in to the way a wireframe looks, but in truth they’re actually an abstract deliverable. So I often present designs and wireframes at the same time. Neither ‘comes first’, and the client never sees the two separate from each other. They can sort of imagine what happens when the two are combined, and that’s the most successful way I’ve found to use wireframes in my process.

When you’re working out type proportions, do you eyeball it or use golden ratio, etc?

I start by eyeballing it. I like to come up with the art direction first and then create the grid that supports it. If the golden ratio supports it, then I’ll start to align things and be more precise about them, but only afterwards and as a helper tool. I think a lot of people start with grids where every column is the same, and that to me is a very counter-intuitive idea. I’d rather design something that feels really good, cause I think that’s what a user is going to really care about, and then find a grid that supports that.

In your RIF element collage you show blurred and static examples of motion states. What tool do you use to create those?

I LOVE Photoshopping motion blur, and I use it and gouging blur a lot. I’ll comp that element in whatever static shape it should be in, duplicate it, convert it to a smart object, and convert it for smart filters. Then I’ll use a smart filter for blurs on it so that I can go back and edit it later, because it’s a little less destructive. I don’t use motion tools for the element collage specifically, but there are a lot of times where I’ll jump into After Effects or Flash to show a motion prototype in addition to an element collage.

The visual inventory and element collage are great for selling the visual inspiration early on, but how does this design phase intersect the the UI phase?

I’m not sure there’s a difference. If visual inspiration is separate from UI, then you just haven’t tackled the UI yet. My most successful element collages are the ones that have included UI because I was being inspired by it. And if you haven’t included it, I don’t think you’ve gone far enough on the element collage and it’s probably still too abstract. I like to make the element collage aspirational, inspirational and practical.

Watch Dan’s full presentation Design Deliverables for a Post-Comp Era over on our seminars page. Time well spent!