Episode #16: Design roundtable (Part 1 of 3)

Matthew Linderman: On this episode we've got a design roundtable featuring three of the members of the design team at 37signals.

Jason Fried: I'm Jason Fried.

Jamie Dihiansan: I'm Jamie Dihiansan.

Ryan Singer: I'm Ryan Singer.

Matthew: And here's each of them talking about what their role at 37signals is, starting with Ryan, then moving on to Jamie, and then Jason.

Ryan: I'm a product manager, you can say, but it's not clear what that is. Most of my time is still spent thinking about the products in terms of the UI and how that can be better and where the rough spots are and what we can do to improve them.

Jamie: I'm a designer and I'm one of three here at 37signals, and basically what I do is design interfaces with Ryan and Jason. Could be anything from marketing to email to stuff for the apps.

Jason: And I typically, these days I'm doing a lot less design than I used to, but I also do some sort of high level concepts and then hand them off and have everyone else make them work and tweak them a bit. Ryan and I work together pretty closely on conceptual stuff.

Matthew: What do you mean by that? What's conceptual stuff? Sharpie marker, just big picture things?

Jason: Yes.

Matthew: Ryan is doing more of the actual coding?

Jason: It's a little bit of both. Ryan's definitely a more adept, or actually, far more adept at like implementing, in terms of integrating with Rails in our infrastructure. I still do plenty of HTML and CSS and whatnot, but as far as like making the designs work in the apps, things have gotten a lot more complicated in the apps lately. So Ryan is typically doing that when we work together. But as far as high level goes, maybe, like we just redesigned the blank slates in Basecamp. It's a design that I came up with and then we went back and forth And then Jamie actually designed the icon. So it's kind of a collaborative thing, but I like kind of came up with the initial idea. And then everyone else pitched in and tweaked and adjusted it and made it better.

Matthew: And Jamie we haven't had you on the podcast before, maybe start talking. You've been doing a lot of work on the marketing sites.

Jamie: Yes, yes.

Matthew: And I'm wondering, that was one of the first things you did when you came aboard here at 37signals, overhauling the marketing sites. And I'm wondering were there any specific challenges when you did that or what was that approach like?

Jamie: Sure.

Jason: And maybe you could talk about coming from...

Matthew: Another experience.

Jason: Another experience.

Jamie: Yes, well it was interesting coming to 37signals because they have a, you know, distinct style, right? Everybody knows, OK, that's like a 37signals look. But then when you actually get down to it, it's really hard to distill that look into words. At Crate and Barrel, I was a designer at Crate and Barrel for about seven years. And it was easy there, because it's like, OK, Crate and Barrel it's all about the product, it's all about white space, it's all about Helvetica. So the product is hero.

When you come to 37signals, it's sort of like, OK, what's the hero? Well over the time of working with Jason and Ryan, I've realized that the hero is kind of making it clear, right? Clear about what we're trying to sell, clear about what does this app do. So it's almost like the language is far more important than visual design. Where visual design is really supporting the idea, which is the words or the UI. So that's kind of been interesting.

Matthew: I like that angle because it's like instead of the hero or your guideline being a certain style, it's almost like the guideline is this ongoing challenge.

Jamie: Yes, definitely.

Jason: Yes, like we're going to make an HTML template, or we're going to make a marketing site or a signup form or a form to add a new person or whatever it is, and it's always like how can this be as clear as it could possibly be? To the point that it's so clear that it's got our mark on it.

Jamie: Oh definitely, definitely. So that's been something that I've been learning. You know I think that's the other thing, too, is now as a designer you're constantly learning about things. It's not like you get out of school, you go do a couple of sites and like you're there. I've been doing this for a while and I'm still learning, so...

Matthew: What do you feel is something that you've learned recently?

Jamie: Well, definitely technology, or just HTML and CSS just working with Ryan on stuff. And even like Jason Zimdars has been a great help just because he's looked at that stuff more than I have. So learning more about how to produce designs.

Matthew: And how about coming from Crate and Barrel, what's been the biggest changes or what's been surprising?

Jamie: Sure. Well, what's interesting about that and probably some of the listeners have these same experiences. A lot of companies are set up with departments. So it's sort of like, OK, you have the design department here and you have the programmers here and you got the IAs and you got the project managers. And while they all work on the same thing, they also have their own sort of turf, you know. So people are really protective about "Oh you can't do that because that's my job. I have to do the HTML. You just make, do Photoshop, and tell me where this should go and I'll do it." Just because it's almost like they take pride in their work as a developer, "I take pride in my work, so I have to do it this way." But at 37signals, it's sort of like the lines are blurred. There's definitely guys that are more on the Ruby side than Rails, but just with Ryan and I doing some front end stuff and working with Sam, working with Pratik. And you know, so...It's a little bit more blurry, I guess.

Matthew: And I'm wondering, working on the marketing sites, we call them marketing sites, the sites that actually sell our products and that are public facing, versus working on the actual applications, like Basecamp, and Highrise and Backpack and the rest, what are the different challenges that you face in designing for each one of those?

Jamie: For the marketing sites it's really interesting because you know, you're trying to sell something that people have no idea what it is. I'm trying to think...

Jason: It's not like selling a table. Like at Crate and Barrel, the picture probably sells.

Jamie: Exactly, yes. And that was the hard thing. It's sort of like you want to talk about features, but at the same time, you don't really want to talk about features, you want to talk about what does this app do. You know what can this do for me, what problems does it solve.

Ryan: Benefits.

Jamie: The benefits. And the one site that I thought we really hit that nail on the head pretty well was Backpack, where we came up with this idea of, OK, what does Backpack replace? It replaces just all this shit on your desk, the papers and all this crap. And so we can depict it that way, and so OK this is what you have now, all this paper and all this crap, and here's how Backpack makes that better. And I thought that was a good breakthrough that we did.

Ryan: Yes.

Matthew: I think it's been an ongoing, maybe the biggest challenge from a marketing standpoint has just been explaining what our products are to someone who has never used them before.

Jamie: Yes.

Matthew: And we've talked a lot about how important copywriting is for design.

Jamie: Oh, for sure.

Matthew: I don't know, how do we work that way? Because I think it's unusual to the way most people work. Is it a constant back and forth between changing the copy and the design? Because I know there's no text up front usually.

Jamie: Yeah. Usually what happens is I put something and then Jason's like, "This is bullshit. Change it."

Jason: I yell. Yeah. That's kind of what's happening, sorry.

Jamie: No, no, no. It's perfect. I mean, what's interesting is that it really feels like we, you know, when we do this like iterative design, we kind of approach it from one idea. And it's usually like too much crap. It's sort of like whittling something out of wood. And you show it to Jason, and Jason's like, "Oh, we don't need this. And this is not important. And maybe focus on this." And you start to kind of mold it together. And Ryan's the same way, you know. Sort of like, "What do we want to focus on." And that's where design, it's really easy to get carried away, especially web design. And with all the new fancy CSS stuff that you can do, it's like everything is shiny. Well, it doesn't need to be shiny. And what's the core of the message?

Matthew: What do you mean by shiny?

Jamie: You know, just with the gradients and drop shadows and bezeled text. You know, I mean it looks great, but is it really communicating what it needs to communicate?

Ryan: Yeah. Like when we start to get into the heat of discussing something that was just marked up, you know, and we're really going through feedback, it's like we're very rarely talking about, "That border should be four pixels instead of three pixels." It's much more, we're pasting different phrases and quotations saying, "How could we say that differently? How could we say that more clearly?" And how does that piece of copy scan differently, you know, like if you put a certain keyword at the front of the sentence or at the back of the sentence, if you make it two sentences or if you make half as long or twice as long. Not only like what is the meaning of the sentence but also when you look at the screen like, does the sentence catch your eye, so that you notice that it's talking about the thing that you're interested in.

Jason: Yeah. A big part of that is recognizing that people probably aren't going to finish a whole paragraph, so what can you front load? So if they finish 10 or 20 percent of the paragraph, like can you actually explain the whole thing in the first 10 or 20 percent. Obviously, it probably shouldn't be that long if we can explain it in the first 10 or 20 percent. But sometimes there are other details that are nice to know, but you don't have to know them. So figuring out like how can we get the information out there right up front, as soon as we can. Even like the shape of a paragraph or a sentence. We're redoing one of the log in screens or the sign up screen for this thing we're working on. And there's like a bar that breaks above the... How can I explain this right? There's like a user and password field, and we have like a bar above that explaining, "Hey, if you already have this 37signals ID, you don't have to create a new user and password. You can just log in."

And so we went through, I think it was close to a dozen variations on that bar, but not even really the look so much. I mean, there was some stuff with the look, but it was more like, you know, should the sentence be seven words or could we get down to five? Or maybe five's too short, maybe it's not big enough to even notice. So it maybe should be two lines. And we kind of went back and forth on that for maybe like close to an hour tweaking the words.

Ryan: It's a little bit too like this, we'd talk about this principle from Edward Tufte, the least effective difference. And he's usually using that to talk about something visual. Like, you know, if you're laying out a table of numbers, what's the least that you can do to align the numbers in such a way, and group them in such a way that you can scan it and you can see which ones are, you know, like which numbers are in a horizontal row and which ones have to do with each other. And if you have like thick black borders between the numbers then it might be totally clear where the columns are, but you might be looking at thick columns more than you're looking at the actual numbers. So what's like the least that you can do there? And the same thing is happening with language where it's like, what's the minimum that we can do for this sentence to be clear. And then you always kind of cut down to that point where if you lose one or two more words then the sentence, it's gone from being clear to being really, really brief. And sometimes people mix up this idea. I think some programmers do this quite a bit, mixing up the ideas of really, really concise and compressed with being clear. People do this too like if you have a meeting and you try to summarize something, people will write these bullet points at the end that make no fucking sense at all.

Matthew: Right. Yeah.

Ryan: They write these bullet points like, "Add blah to blah." Like you took 15 minutes of conversation with all kinds of rich detail and stuff and you boil it down to this abstract bullet point that doesn't sound like a sentence. It doesn't sound conversational. And it's like it was really concise and compressed, but it's not something where you just read it and you understand what it means, right. It's like, where's that magic point in the middle?

Jason: Yeah. Brevity and clarity are different things. And so we're always looking for clarity. And that can mean sometimes three sentences. That can be better than one sentence. It all depends on what you're trying to do and how it's supposed to look and read and where it is at the time. So we spend a lot of time on copy.

Matthew: You mentioned Tufte, and we've talked about him before. What other designers do you admire or have you been influenced by?

Jason: Web designers or any kind of designers?

Matthew: Any kind.

Jason: I don't know. Just I don't know if there's actually an influence, but I like architecture a lot. So I tend just to think about architecture a lot when I'm designing something. But I don't really know if there's any true influence or not. It's hard to sometimes figure out if you're influenced by something. Like I like architecture.

Matthew: Well, yeah. Admire, I think.

Jason: Yeah. I admire architects. Like great architects I admire. Different kinds. Frank Loyd Wright and those kind of things. I just feel like I draw a little bit from everything that I run into, but I can't really pin it down so much. And like Dieter Rams, I think. You know, his industrial design's amazing. And I mean, I think there's a lot of great stuff. The iPad's kind of showing the way towards simplifying interfaces. There's some good stuff there. Yeah.

Ryan: When I first got into like doing web design, I was paying attention to these, like, really designer-y sites. There was like... I don't know if people remember. K10K, Surf Station.

Matthew: Yeah, I remember that. Right.

Ryan: It was like it was this sort of high tech, cool, the web is this new frontier of graphic design style. It was really more about the aesthetic then anything else. And then when I somehow found out about Jakob Nielsen... Was it Useit.com? That like completely changed my idea about web design. The site is almost 90% text and he's really concentrating on what he makes bold and what he breaks into bullets and what he doesn't and how he highlights things. And, you know, the site today doesn't really look any different than it did ten plus years ago, and I still think it's awesome.

Jason: Yeah. I think it's the best designed article on the web.

Ryan: And he has an email newsletter, and it's the best email that you can get from a website. It's the best email that I get from a website in my inbox because he thinks so hard about how to summarize the article into three lines, and he has a really thoughtful format. And that to me is still really inspiring. [music]

Matthew: Join us next time. We'll continue this discussion with the 37signals design team. Also you can go to 37Signals.com/podcast to hear previous episodes, see related links and also we've started putting up transcripts of each episode there too. Thanks for listening.

More episodes of the 37signals Podcast.