I needed to make illustrations for all of our apps for the new 37signals Suite page. The goal was to give a general idea of what the particular app does for customers that may be unfamiliar with our products. The illustration didn’t need to carry all of the weight since there would be a text description alongside it. However, it had to be attractive and detailed enough for people just scanning the page with their eyes.
Here are the variations I came up with for Basecamp. This particular project (illustrations for all the apps) took about 8 hours. Jason and Ryan both gave feedback which helped me arrive at the final version. There was a similar process for each of the other app illustrations too. I hope this gives you a sense of how we work.
Marketing tie-in
Trying to bring in elements — hand drawn arrows and icons — from the Basecamp marketing site.
Feedback: Good first step. The 2 icons, however, make Basecamp look weak. “What!? Basecamp can only do 2 things?”
Collage background
What if there was a collage of icons that would hint at everything Basecamp could do? It’ll be abstract, but maybe that’s OK. I can picture how the other apps would look like too. The icons can act almost like a pixellated abstract background.
Feedback: The idea is strong enough that I make similar illustrations for Highrise, Backpack, and Campfire to prove the concept. The page with the finished illustrations looks great. Unfortunately they are too abstract and also messy looking. “I thought these products were supposed to help me get organized, etc. It looks a bit chaotic.”
Literally: Project management
Jason starts throwing out ideas in our Campfire chat room: “How about a top down shot of people around a table meeting about a project?” To be honest I am not sure how it will turn out, but it is worth a try. Here’s a quick sketch of this exploration. I don’t spend much time giving the figures detail. I just want to prove the concept.
Feedback: This is way too hard to get right. I have to select the right ratio of men to women. I have to take into account skin color, clothing, etc. Do they wear suits or black turtlenecks? It also doesn’t look like they’re managing a project. They could be playing poker.
Literally: Project management part 2
Let’s try a folder. Most project managers I have worked with use a folder or a binder to keep relevant documents in one place.
Feedback: The folder is dull. It looks messy too.
Warmer folder
Ryan is concerned that the folder isn’t interesting. Maybe it’s the shape and color. Let me try a warmer color and softer shape. I’ll put “Projects” on the tab.
Feedback: Closer, but it is still dull. This is one of our best products and it is not exciting at all.
Add some flair
Jason and I have a quick 5 minute meeting to talk about the folder. We’ll bring back the icons. I’ll get them jumping out of the folder. I can also add some type of seal or sticker the open side to give a little more interest.
Feedback: Still way too messy.
Final illustration
I call Jason over to my computer as he is headed to the kitchen to make tea. I tell him I’m concerned about the messiness. Jason sketches a cross on a piece of paper. It’s like a coat of arms for project management. I like that idea and start working with that.
Feedback: Great! Let’s go with it.
Matt
on 11 Nov 10Is there a difference between managing a project and playing poker?!?
(They look good).
vanmartin
on 11 Nov 10I think the ‘poker’ image conveys what Basecamp is about far better than the dull looking brown folder. The people sitting around the table don’t really need much more detail.
David
on 11 Nov 10It is interesting to see the way your company works. It starts to influence the way brain works ^^
Seriously, I think this post is a great example of how informal but still straight forward 37signals works. Thanks a lot.
Jeff Mackey
on 11 Nov 10The top-down version is neat, but doesn’t really relay Basecamp’s biggest benefit (in my opinion): managing projects with remote teams. I work on several projects within Basecamp, and not one of them ever deals with people in the same room with me. So the image of people sitting around the table isn’t really accurate, regardless of what the silhouettes look like.
Rocky Erwin
on 11 Nov 10Coat of arms. That’s good.
Matt Radel
on 11 Nov 10Thanks for sharing! It’s always nice to see that larger companies go through much of the same process that I do. Great stuff.
Brooks Jordan
on 11 Nov 10Love your process. It’s organic, anyone can do it. And it just works so damn well.
Anon
on 11 Nov 10They are ok. Good effort.
Have you guys ever through of hiring a professional illustrator? I realize as designers we think we can do everything ourselves. What we do not consider is illustrators have an ability to visualize and create concepts much better then designers. They are also perfectionists at execution.
You might want to consider hiring a pro for this type of work if you want to reach a more sophisticated and detail oriented market.
Nick Campbell
on 11 Nov 10@Anon: Jamie’s illustrations are professional as hell. Anyway, wouldn’t a “professional” designer go though the same process? Design is always about trial and error, not about doing it right the first time.
Great work, Jamie!
Joe
on 11 Nov 10Very informative, I like this. Thanks for sharing =)
James
on 11 Nov 10@ Anon +1
Overall, I’m unimpressed. The design seems to be caught in a direction which can yield only good (but not great) results.
jd
on 11 Nov 10Not sure if this post is in response to my question yesterday but is 37s relatively happy with its product names? They strike as one of the few “not real” things about the services. Why not more descriptive names?
Tim
on 11 Nov 10I think I would have gone with a Rambo-type character with machine gun blasting messy piles of documents and files into a neat, blasted pile of rubble all organised by Basecamp…
No?
Julian
on 11 Nov 10It would be awesome if you kept the drawings during discussion and post them here. ;-)
HB
on 12 Nov 10@Anon, @James – So, I assume you guys will be sending out your far superior illustration portfolios shortly then?
qwerty
on 12 Nov 10@HB: by this logic you would not be allowed to criticize a car unless you can build a better one – that’s absurd. The current design is recognizable but I feel it is stretched beyond its initial purpose. For true greatness I find crispness lacking. As an example for crispness, take a look at FF Dingbats http://www.ffdingbatsfont.com/ or the discussion at Brand New.
Mike Watts
on 12 Nov 10Looks cool, although I’m disappointed that you didn’t explore the Basecamp metaphor – I have no idea what you’d do for that, but it’s called basecamp for a reason – it’s where you start your journey to the top, it’s where you go back to when you need ideas.
Still no idea where you’d start with that, but it’d be interesting to see :)
Nathan
on 12 Nov 10@qwerty If I can speak for HB I think the overall point is its kind of poor taste to anonymously criticize the work.
@Jamie I really like what you did – I think it fits really well with the Basecamp ‘branding’ and accomplishes the goal well. Thanks for posting this, I love seeing the process behind this type of illustration work. Great job.
B-ry
on 12 Nov 10@Anon: You are a DICK!
This discussion is closed.