I’d like to share the design process that went on behind the scenes for the recent Basecamp email redesign. In this case we started at one point and wound up with a very different design in the end.

All of the conversations happened with me, Jason Fried, and Ryan Singer in our Campfire chat room. I would upload a design to the room and Jason and Ryan would give feedback. This process lasted for 1 day — start to finish.

I created many different iterations during this process. Here I’m showing the main shifts, so you’ll see “Version 2” followed by “Version 6”. You’re not missing anything.

Original plain text
We still send this out if you don’t want to get HTML.

Version 1
Here I tried to emulate the actual to-do page in Basecamp.

Version 2
Jason thought the checkbox in the email was confusing. If you finished the to-do would you click this checkbox? The checkbox wasn’t actually functioning too. It was fake. Let’s get rid of it.

Version 6
Jason said there was too much junk around the actual to-do. The to-do wasn’t the focus of the email. He suggested to try making the to-do the hero. Ryan thought I could try and icon of some sort to spotlight the to-do.

Version 8
The checkbox icon was too much. Too big, too blingy. Also, since it was checked already did that mean it was done? Kind of confusing. I tried just creating a graphic that said “To-do”.

Version 11
The to-do graphic was a little too glittery. It was detracting attention away from the actual to-do. Jason was still bothered by all the “chrome” in the email. The company name, 37signals, was more important than the to-do. So I tried stripping everything away.

Version 12
Here’s where we finally ended up. We stripped away all the “chrome” and made the focus the actual to-do. I also flipped the link so the to-do item that was assigned to you is blue. You can still also click on the to-do list title — in this case “HTML emails for notifications”.

Here’s a little something
Thanks for taking the time to read about this design iteration. I didn’t want that fancy checkbox icon in Version 6 to go to waste. You can click the link below to download the fancy checkbox icon. Hopefully you can find a use for it in your app, on your site, or for your next project!

Download Fancy Checkbox Graphic EPS (221K)