We’ve been working on Basecamp Next since March 2011 and we’re getting close to the public release. The private beta is now in full swing.
Early iterations on the Projects screen
We thought it might be fun to share some of the early design explorations for one particular screen, the Projects screen. Basically, the projects screen is a list of your projects. You can create new projects there as well. We explored hundreds iterations of the screen – from small tweaks to fundamental shifts in the feature itself. Only a fraction of the explorations are shown in the video below.
What you’re seeing here are discarded ideas. But new ideas are often built on old ideas, so you may recognize some of the design concepts you see here in the actual final product.
Jason Fried wrote this on Jan 26 2012 There are 48 comments.
Benjamin F. Wirtz 26 Jan 12
Nice work guys, we look forward to the final products. Seen something that looks similar to the next version of Handy Elephant, we are more about communication productivity though ;)
GatherContent 26 Jan 12
So freaking excited.
Ben Thompson 26 Jan 12
Nice to see the backstory. We’re giving BCX a test spin today.
Blain Smith 26 Jan 12
Good stuff. I love the focus on people within the project by using profile photos a lot!
Devan 26 Jan 12
So stoked for the final products! And love the music track you have on the video.
dmr 26 Jan 12
There’s an interesting narrative about design here, figuring out what parts matter and what’s purely style. Watching elements get refined is quite fun as it uncovers some of the thinking and process behind crafting simplicity.
Nice thinking out loud!
Gregor 26 Jan 12
nicely done! Did you do the screenshots all by hand or did you use some app for it?
And: what is Bcx Projects?
Eka 26 Jan 12
I like how you do things. Awesome!
Richard Allum 26 Jan 12
Interesting ideas but not sure how the design with all projects showing as an image would have worked for those on max plan with unlimited projects. We currently have 500+ on the go and that would be interesting!
Ryan 26 Jan 12
Thanks for sharing this. I am excited to see the final product. Did you implement/prototype many of the iterations to get a feel of how it works? Just curious on your selection/cutting process.
Neil Kelty 26 Jan 12
Is the soundtrack on the video available for purchase? Who’s the artist?
DHH 26 Jan 12
Richard, the final design works really well for tons of projects. Significantly better than what we have today. I think you’ll be quite happy with it!
Ryan, pretty much all the iterations were live. Hooked up to real code, got used for a little while, then changed.
Eric Fields 26 Jan 12
DHH , do you guys compile videos like this by intentionally screenshotting as you go, or is there an automated way maybe using something like the git commit logs? I’d love to know more about the process for making this.
Also, great work!
Berserk 26 Jan 12
@Gregor:
bcx sound like BaseCamp, with an x added because it’s xml – like Word :).
Richard Allum 26 Jan 12
@DHH Thanks, look forward to it.
Galen King 26 Jan 12
Great work. Pretty cool to see some of the iterations. Really looking forward to kicking the tires of Next after having had used Basecamp for many years. Keep up the awesome work! (P.S., would love access to the beta ;)
Rick Roberts 26 Jan 12
Curious why you guys are using Chrome.
Chris 26 Jan 12
“Ryan, pretty much all the iterations were live. Hooked up to real code, got used for a little while, then changed.”
Love this approach, I need to find a way to push this way of working here instead of water-falling wireframes to comps to html. As a Web Dev I actually found this video pretty inspirational and shared it on Yammer.
Yamil Gonzales 26 Jan 12
Man! I just love the logo animation at the end. Kudos!
JF 26 Jan 12
do you guys compile videos like this by intentionally screenshotting as you go, or is there an automated way maybe using something like the git commit logs
We’re always taking screenshots and posting them to Basecamp. So far we’ve uploaded well over 1000 screenshots of the Building Basecamp Next process.
jeremywho 26 Jan 12
Best part was the animation at the end!
Stacy 26 Jan 12
Looks great and distinctively yours. Maybe a little metro inspired as well. Simplicity written all over it. Good job!
Are you moving toward using different technology for this new build, eg, backbone.js, node.js, etc?
Vadim 26 Jan 12
Really happy to see that some of the ideas we’ve done over a year ago are slowly making their way into mainstream products.
Adrian 26 Jan 12
Some tablet friendly designs there.
Ian 26 Jan 12
I knew it! Basecamp Next is a copy of Trello:)
JF 26 Jan 12
Ian, you mean Sortfolio?
DHH 26 Jan 12
Stacy, Basecamp Next is all Rails on the server side, but we do use a splash of Backbone.js on the client side here and there!
George Gecewicz 26 Jan 12
This is so awesome! Will Basecamp Next come with a new mobile design, as well?
Raymond Brigleb 26 Jan 12
Hey you guys, that’s awesome. Thanks for sharing. How fun to watch!
Bradley 26 Jan 12
I like the inclusion of the live search box. I loved the HR update with this feature. Moved everything over to BC for client access. Bear Down.
Anonymous Coward 27 Jan 12
@37signals
That animation of the logo is just stupid and takes way too long.
More time is spent animating the dot-thing than time spent actually showing the name “37signals”
Dan 27 Jan 12
“What’s next?”. I see what you did there.
FiFi Cars 27 Jan 12
It is just amazing to see how you guys designing new Basecamp! Can’t wait to see it live.
Anonymous 27 Jan 12
Wow, new Trello!
John Ainsworth 27 Jan 12
Looks great. Very excited to see how it looks when it launches.
Daniel Chohfi 27 Jan 12
So freaking excited. +1
AC 27 Jan 12
============== I don’t want to sound like an ass, but does anyone even understand what they are looking at in any of these screenshots?
Yes, they look pretty – but (1) what exactly information are you suppose to gain from these screenshots or (2) action to do?Don Schenck 27 Jan 12
Two things:
1. Excellent tease. Fantastic marketing!
2. Goddammit! I’m working on my own web site, and I’m borrowing from Microsoft’s “Metro” UI language, and damned if it’s not a LOT like you screens. ARGH !
Jacob Fike 27 Jan 12
Some very interesting changes scroll by very quickly. I like the direction it is headed, can’t wait to see the final product!
P.S. BCX = BaseCamp neXt
Mark 27 Jan 12
Just a brief thought on the basic premise of conciseness which has served 37s so well (and millions of us customers)
Regarding the 37s homepage headline…
“Making collaboration productive and enjoyable for people every day.”
- It is assumed that collaboration- and your tools -are for people.
- ”...every day…” is fairly ineffectual. Really, every day? Not just every other day? Simply not needed.
My suggested change:
“Productive and enjoyable collaboration” or
“Collaboration: Productive and enjoyable”
Both versions take the original from 9 words to 4; they are leaner, with no loss of meaning and no ‘stating the obvious’ or ineffectual wording.
Hope I haven’t come across as a d-bag ;-)
Ryan 28 Jan 12
Honest critique: the logo animation sound is kind of…..tacky.
Joe 28 Jan 12
Cool. With this much excitement over “discarded ideas”, it’ll be fun to see the excitement over what made it in.
Todd 28 Jan 12
I wish I could join the beta :) I spend a good majority of my day in front of Basecamp…and while I am not large company I am a loyal Basecamper….looking forward to Next and how it can help my business.
Bow 30 Jan 12
Please, please don’t change. I cannot imagine working with a totally drastic new interface.
improvement yes! but not drastic changes.
Josh Martin 30 Jan 12
Will this base camp next idea be spread to all of the products? IE are we going to see a high rise next, next? As a user of those two programs mostly, any and all integration is great!
Excited to see base camp next in action, we applied for beta, but I guess we lost out. Can’t wait for the release.
Jared White 31 Jan 12
At the risk of sounding like I’m kissing somebody’s backside, I though the logo animation was a very nice touch. (I specifically was noticing that before I read, ahem, certain comments here.)
What I would really like to say is I was quite impressed with the first batch of screens that showed projects as “cards” so to speak. Yes, so perhaps a little Trello-ish but it seemed like a good presentation metaphor. The later screens that were more social-networking-ish didn’t turn me on, but hopefully the final design is some kind of hybrid of the two ideas. I admit I am not currently a Basecamp account owner (use a competing product at present), but I do use Basecamp projects others create and am very very interested in BCX .
Zack Swire 31 Jan 12
Hadn’t seen the BETA until our alliance invited us to collaborate on a project. We’ve been exploring leaving our present version of Basecamp to go towards Jira and Confluence. I just used the BETA version on a project and loved it. Love the timeline view, but missing one critical item. When you’re on the full screen view of proofs, I’d love to be able to mark them up right there – just as you can on Notableapp.com. With that, it would be about perfect.
Thanks!
Zack
DHH 31 Jan 12
Bow, changing to Basecamp Next is entirely optional. If you don’t like Next, you can keep on using Basecamp Classic. We’re not going to force change on anyone.
This discussion is closed.