Basecamp’s marketing designer, Adam Stoddard, talks about how HEY’s visual brand came to be. He discusses influences from Pixar to Charles and Ray Eames to The Raveonettes, and reflects on what it’s like to work as a department of one on such an all-encompassing project.
- Manos: The Hands of Fate - 00:04
- Mystery Science Theater 3000 - 00:07
- Our previous episode “HEY, What’s Going On?” with Jason Fried and David Heinemeier Hansson giving an overview of HEY - 00:35
- Our previous episode “Designing HEY” with Jonas Downey - 00:38
- Our previous episode “An Email Account Is Born” with Merissa Dawson, on creating a demo account - 00:40
- Adam Stoddard on Twitter - 00:58
- HEY.com - 1:08
- “Screen emails like you screen calls” - 2:59
- “How it works” - 4:25
- Toy Story of Terror! - 8:42
- Procreate app - 9:27
- Charles and Ray Eames - 16:22
- A 2003 article about The Raveonettes albums that are written with just three chords and in one key - 21:12
Transcript
Shaun: (00:00:00) Has anyone ever seen Manos: The Hands of Fate outside of the context of MST3K?
Wailin: (00:00:05) No. I mean, I only know about it in that context.
Shaun: (00:00:09) Same.
Wailin: (00:00:09) And I’ve never even seen the MST3K episode. Or at least not… I don’t think I’ve seen it all the way through. I don’t have a memory of seeing it all the way through. I’ve probably just seen clips of it.
(00:00:19) Broken By Design by Clip Art plays.
Shaun: (00:00:22) Welcome to REWORK, a podcast by Basecamp about the better way to work and run your business. I’m Shaun Hildner.
Wailin: (00:00:26) And I’m Wailin Wong. We’re in the middle of a mini-series about Hey, Basecamp’s new email service that was launched in mid-June. So far we’ve covered the philosophy behind Hey, the two year process of designing the product and some behind the scenes work to create a robust demo account for marketing and customer support. And we’re working on a big retrospective episode about the launch and fight with Apple over the Hey iOS app. So stay tuned for that.
Shaun: (00:00:53) But first, on today’s show we have marketing, designer, and all-around incredible human being Adam Stoddard. He’s designed the wonderful Basecamp.com and of course our very own rework.fm. And he’s also responsible for the look of HEY.com, which started as this little teaser page and is now a full-blown marketing site with a detailed tour of the product, FAQs, a manifesto about email. And he did this all as a department of one working with our CEO, Jason Fried.
(00:01:22) During this interview, Adam talks a lot about the visual design of HEY.com, so if you want to follow along, just simply go to HEY.com and check out all the little things he’s talking about. And now, here’s Wailin’s conversation with Adam.
(00:01:36) Broken By Design by Clip Art plays.
Adam: (00:01:42) I’m Adam Stoddard and I’m a designer at Basecamp.
Wailin: (00:01:46) Where do you even start with a brand exploration like the one you had to do for Hey. I mean, at the time you started, did you even know it was going to be called Hey?
Adam: (00:01:53) No. I mean, it was all the original concepts were still dealing with Haystack. So there was a whole round, multiple rounds of Haystack brands that are in the digital dumpster at this point.
Wailin: (00:02:11) And was this because we were feeling iffy about whether or not we’d be able to get HEY.com so we were working with Haystack, or was Haystack the original idea for the name?
Adam: (00:02:22) It was the original idea for the name, because that was a domain that they owned.
Wailin: (00:02:25) We owned Haystack?
Adam: (00:02:27) Yeah. I don’t know why. I have no knowledge about that piece of lore. I think it was because of the old, never-released app that was also called Haystack. But yeah, but it was Haystack for a good long while. But a lot of those original versions were more about kind of feeling out the themes that we wanted to hit than the kind of specific look and feel and implementation. Getting pieces of copy together. You know, like the screen your emails like you screen your calls, or kind of contrasting the time period that email was designed in and what using email was like at that point in time versus today.
(00:03:11) A lot of those original rounds were more kind of honing in on those ideas.
Wailin: (00:03:15) So some of those principles, these first principles of email that are in the finished product, such as The Screener, for example. Those were around early enough that you had something to kind of hang your hat on and start thinking about how that might translate visually?
Adam: (00:03:32) Yeah, and we always wanted to really have this be more about messaging specifically and not like, get into a lot of heavy visuals. It was so strong that it could stand on its own for the most part without having to really wrap a lot of visuals around it to try to make it more appealing.
Wailin: (00:03:57) And so, when you say “we” is it really just a very collaborative process between you and Jason where he’s riffing on copy and you’re talking through some ideas and then you take those ideas and try to make them into something visual?
Adam: (00:04:10) For the most part, the division of labor is he copywriting and me doing all the graphic design and development of the website. But sometimes that would flip around a little bit. Especially like the current How it Works page is a good example where I’ll basically frame out the entire page and make sure everything is copy-fit kind of as I’m building the page. And then he came back through and rewrote it into his voice.
Wailin: (00:04:40) When you and Jason are talking about ideas, do you throw out terms for emotions and feelings that you might want to start building some things around or what’s kind of the different sets of vocabulary that you’re able to use to communicate how things are shaping up?
Adam: (00:04:59) We don’t really talk about feel of entire pages in that way. We do in terms of copy, but when we’re talking about elements of graphic design, it’s usually more tactical than that. I mostly am trying to translate the tone of the copy into the feel. We just kind of go from there. But something that was a running thread throughout this project, and this is something that I had been exploring in the Basecamp redesign, is really trying to come at developing the brand for Hey in a little bit of a different way than a lot of people who do brand development are thinking about it. Where they’re more or less thinking about it on aesthetic terms and the general feel of it, and those are obviously very good things to consider. But I also wanted to make sure that it reflected other requirements that we have, like the fact that basically all of this has to be produced by one person. And that we generally build very light-weight websites and so I wanted to be able to develop a brand and these kind of graphic elements that I know are going to be super fast for me to produce. They’re going to translate into very, very tiny web graphics.
(00:06:26) The kind of kaleidoscopic blobs are a good example. Those are really suitable as vector graphics on the web, where if I was just doing an image they’d be massive and huge. So it’s really kind of taking this broader perspective than just the aesthetics of a brand and kind of making sure it hits all these other points, too. And that’s kind of a benefit of how we work as designers here, coming at it from this kind of integrated perspective that we have as both visual designers and front-end developers as well.
Wailin: (00:07:00) Is it pretty unique and different from the way some of your other jobs have been?
Adam: (00:07:05) Definitely. Because it’s more common to split up all of those domains. You would have someone who’s doing branding. And you have someone who’s doing web design or product design. And you have someone else who’s doing front-end development. And you have someone else who’s doing copywriting. And so a lot of those things that kind of straddle the fence of those concerns kind of get lost in the mix. So someone who’s designing a brand, I guarantee you is not thinking about how that’s going to translate to how many kilobytes they’re sending over the wire. That’s literally not their job, that’s not their area of expertise.
Wailin: (00:07:46) How did we settle on… I say we as if I had anything to do with it. How did you and/or Jason settle on the idea of the hand or hands as a dominant visual motif?
Adam: (00:07:59) As we’ve done with many other projects, usually we’ll do a call for ideas. We did this with the book. We did this with both the Haystack and they Hey logos. And the hand, if I remember correctly, that was something Ryan had mentioned. It’s pretty obvious, the connection with a waving hand to the name Hey, which is a good thing. I think it’s generally not a good idea for logos to get too clever.
(00:08:32) I have a kid and so he watches a lot of Pixar movies, which means I watch a lot of Pixar movies. And there’s a great behind-the-scenes about the Toy Story Tower of Terror short video where they’re talking about this little scene at the beginning where in the graveyard and a black and white scene like the old Dracula movie. And they’re talking about finding all these different rubber bats and finding just the one that has the right level of floppiness and weirdness in just the perfectly wrong way. And I feel like it was a very similar kind of thing. Just trying to find just this right shape where it feels like the hand is in motion and it doesn’t feel too polished but it also, it is a logo. And it does have polish.
(00:09:26) I use Procreate, an iPad app with an Apple Pencil and in a very quick fluid stroke would draw this shape, like, I have hundreds of them. Just to find like that one. There was a lot of hands being drawn at that period in time. And that was also extended to some of the branding where, as you know, there’s this kind of collection of all these wire shapes. Kind of like, you know, when you’re in kindergarten or first grade, that’s one of your drawing assignments, is to draw pictures without picking up your pencil. That constraint was one that we ran with to give a unique identity to all these drawings. So they’re not just this random little line drawing.
(00:10:16) So that was a nice way to add a nice bit of uniqueness. Some style. Which is challenging to do when it’s literally just a single stroke at a single width.
Wailin: (00:10:25) When you look back now at all of the hands you drew, hundreds of hands, was the final hand, in the middle of the bunch or was it one of the last ones you drew? Do you remember?
Adam: (00:10:36) It was somewhere in the middle. Yeah. It did not get better with time. Because this is the funny thing, and this is not the first time I’ve had this kind of experience. Lettering their last book was kind of a similar thing where I have absolutely atrocious handwriting, and similarly, I cannot draw an anatomically correct hand to save my life. So it was very interesting to me that this is the thing that I end up doing here.
Wailin: (00:11:09) And so, how many different hands do we have across Hey? You have the main hand and then on the website you have the kind of peace sign hand, right?
Adam: (00:11:18) Yeah, and there’s a couple different ones throughout the app. There’s another one on the home page, it’s this very long pointer one. I have one with an exceptionally long pointer finger that I’m still trying to find a good use for.
(00:11:34) It’s interesting. It’s really easy to kind of go overboard with them. You basically have to keep them completely away from the logo, otherwise, you’re just kind of undermining it.
Wailin: (00:11:43) And then the logo itself is a whole other exploration, right?
Adam: (00:11:48) Yeah, that was actually quite a challenge, especially once we decided to go all uppercase with Hey in our internal style guide. Because the particular nature of a capital E and a capital Y. The Y, the top left corner of that Y and the top right corner of that E jam up together. To deal with that, you either have to space them further apart, in which case the bottom area of those two letters look like they’re very, very far apart and it looks bad. Or you jam them together and it also looks bad. I was trying to deal with that problem in different ways where the letters are just kind of overlapping in a different way, and yeah. There was a lot of variations of it and it was, that was annoying. That was actually… I’m not even going to say that was an enjoyable experience. That was just kind of a frustrating challenge. It’s all an integrated unit right now where the HEY are just kind of blended into a singular shape. That was a direct result of that problem.
Wailin: (00:12:57) And can you remind me? When the teaser page went up, was the logo on the teaser page, or were we not even revealing the look and the name of it yet?
Adam: (00:13:04) No, it was just the hand at that point. I think the rest of the logo wasn’t locked down. It was just the little hand, and then did a little wave when you hovered over it.
Wailin: (00:13:13) And so then that was the debut, then, of the hand, and all the work you had done on the image was that teaser page.
Adam: (00:13:20) It was a very, very small, simple website to start.
Wailin: (00:13:25) And that’s by design, right? I mean, I think one theme I’m hearing from you a lot in our conversation is that it’s very copy-driven, it’s very writing-driven in terms of all the information we want to convey about Hey and what it does. And so, I mean, that teaser page, was actually like a pretty long letter from Jason, so it kind of really rewarded you when you got to the end of it and you wanted to sign up for an email. But there wasn’t a lot to it, visually, right? It’s just text on a pretty simple page.
Adam: (00:13:55) There was a big “try it” piece of text that had this very colorful background pattern in it. A very kind of ‘90s looking colorway. Something I’ve been kind of working into Hey, and this was a really good example of this is is this kind of… Almost like the beginning of Wizard of Oz when it’s still black and white and Dorothy opens the door and it’s color. You’re in this very kind of minimal environment, and you’re kind of color starved a little bit when you first hit that page. And then you scroll down to this bottom piece, and it’s just like, WHAA, you know. Color. And it makes this small thing, this small placement feel much more powerful, because it’s a cup of water in the desert if you will. And so that’s something that’s kind of worked throughout is juxtaposing these two things. This very kind of clean and simple layout with these very phrenetic, energetic, colorful, freeform shapes.
(00:15:03) This is possibly, probably, a reaction to working on Basecamp for a while now, which is a little more restrictive and muted in terms of colors. We all have opinions about Basecamp beige. I’m actually pro-beige, but regardless, it’s not a, you know, it’s not a particularly vibrant color palette. So I wanted to really inject some life into Hey’s brand. Not necessarily a lot of color all over the place, but kind of juxtaposing this very, very clean layout that’s very text driven against these very, very, very rich kaleidoscopic little pieces of color.
(00:15:49) And it didn’t quite start that way, like that kind of blobby pebble, whatever you want to call it, motif, has been around since some of the early concepts but the colorful gradient version was kind of a later addition to align a little bit better with what was going on in the app at that point in time.
(00:16:10) And a lot of that style actually comes, was very directly inspired by, and this goes for both kind of the wirey shapes, too. A lot of the work, the graphic design work that Charles and Ray Eames did where it had this very playful quality to it, where there’s just a lot of these freeform shapes and loose hand-drawn illustrations. It’s a really effective style. Especially, again, for our particular scenario where it’s a department of one to do all this work and there’s not a realistic situation in which we spend multiple weeks working on one perfect illustration for something.
Wailin: (00:16:49) Was there a lot of exploration of how to display the text, especially for kind of the explanation, like the manifesto of what Hey is and stuff like that on the main page? Was there a lot of exploration of how to display that information in a way that would be not overwhelming, and visually appealing, but also really take the time to explain what this is about?
Adam: (00:17:13) We really spent a lot of time on the features section. I feel like that’s where both of us ended up spending quite a bit of time breaking out these, what is it, 20 or so distinctive features and/or problems Hey solves compared to traditional email. But even just kind of the format of it. It’s very common, right now, to have, especially on your home page is just this like, forever scrolling page of stuff that you scroll down. And we wanted to make something that’s a little bit more bite-sized. You have this, the problem that Hey’s addressing. This video that, in sub-20 seconds shows you exactly how that interaction works, and then a couple FAQs about it.
(00:18:09) And one of the unique things about an email application is you’re mostly looking at text so a static screenshot isn’t really compelling. And it really doesn’t put Hey in it’s best light. There’s a lot of really, really nice interactions in Hey and so these little videos show those off in a much more flattering way than if we had just put some static screenshot in there.
Wailin: (00:18:38) What’s the interplay between the visual look of the app itself and what you’re doing on the marketing side? Are there bits of ideas and things that end up flowing back and forth and giving you some new ideas or you’re feeding some ideas to, let’s say Jonas as he’s designing the overall look of the app?
Adam: (00:18:58) yeah, it’s definitely flowed both directions at times. There was a point at which I was working on some of the marketing side stuff. It had more of a literary feel. It was still using a serif font. It looked, the colors were on the warmer side. It had a little more of the vintage vibe to it. And then we decided to kind of align it with the app at that point in time, and so I pulled in some of the colors that they were using, tweaked them a little more, switched to a san serif font. And then down the road, the colors I ended up changing got pushed back into the app. I lot of the blobby things started getting pushed into the app.
(00:19:47) And even before, like, way back when, I had done some concept work. I had worked in a bunch of these gradients into things. That continued to stick around to this day as a general motif in the app of just using these kind of gradient backgrounds on buttons, on the Hey menu itself, where it has this kind of blue to purple gradient. So yeah, there’s definitely been a lot of cross-pollination of the various ideas there.
(00:20:19) This is probably the most integrated aesthetic we’ve done.
Wailin: (00:20:24) This priority that we put on having our apps and our webpages and everything be very lightweight. Do you find that to be a really nice constraint?
Adam: (00:20:34) I love constraints. I think they breed an enormous amount of creativity. To a large degree that is a self-imposed constraint anyway. Jason or David are not coming by and saying, Adam, make this website smaller. That’s a thing that I’ve been pushing as a constraint on myself. I just always find it fascinating how constraints can produce interesting outcomes that you wouldn’t have if you were not enforcing them on yourself.
(00:21:07) There’s a band I like called The Raveonettes and one of their albums, it’s entirely composed of like, two chords. And it’s just this really interesting thing, and that always stuck out to me as just kind of an interesting thing to explore. Of like, how creative you can be in these, what otherwise might seem like very limited boxes but they’re really not when you kind of put your mind to it.
(00:21:34) Broken By Design by Clip Art plays.
Shaun: (00:21:39) REWORK is produced by Wailin Wong and me, Shaun Hildner. Music for the show is by Clip Art.
Wailin: (00:21:43) You can find show notes and transcripts for our episodes at rework.fm. We’re on Twitter at @reworkpodcast.
(00:21:49) If you want to try out Hey for yourself, we’ve fully opened sign-ups and you don’t need an invite code to get in. So just go to HEY.com to get started.