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.
Benjamin F. Wirtz
on 26 Jan 12Nice 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
on 26 Jan 12So freaking excited.
Ben Thompson
on 26 Jan 12Nice to see the backstory. We’re giving BCX a test spin today.
Blain Smith
on 26 Jan 12Good stuff. I love the focus on people within the project by using profile photos a lot!
Devan
on 26 Jan 12So stoked for the final products! And love the music track you have on the video.
dmr
on 26 Jan 12There’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
on 26 Jan 12nicely done! Did you do the screenshots all by hand or did you use some app for it?
And: what is Bcx Projects?
Eka
on 26 Jan 12I like how you do things. Awesome!
Richard Allum
on 26 Jan 12Interesting 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
on 26 Jan 12Thanks 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
on 26 Jan 12Is the soundtrack on the video available for purchase? Who’s the artist?
DHH
on 26 Jan 12Richard, 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
on 26 Jan 12DHH, 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
on 26 Jan 12@Gregor:
bcx sound like BaseCamp, with an x added because it’s xml – like Word :).
Richard Allum
on 26 Jan 12@DHH Thanks, look forward to it.
Galen King
on 26 Jan 12Great 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
on 26 Jan 12Curious why you guys are using Chrome.
Chris
on 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
on 26 Jan 12Man! I just love the logo animation at the end. Kudos!
JF
on 26 Jan 12do 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
on 26 Jan 12Best part was the animation at the end!
Stacy
on 26 Jan 12Looks 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
on 26 Jan 12Really happy to see that some of the ideas we’ve done over a year ago are slowly making their way into mainstream products.
Adrian
on 26 Jan 12Some tablet friendly designs there.
Ian
on 26 Jan 12I knew it! Basecamp Next is a copy of Trello:)
JF
on 26 Jan 12Ian, you mean Sortfolio?
DHH
on 26 Jan 12Stacy, 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
on 26 Jan 12This is so awesome! Will Basecamp Next come with a new mobile design, as well?
Raymond Brigleb
on 26 Jan 12Hey you guys, that’s awesome. Thanks for sharing. How fun to watch!
Bradley
on 26 Jan 12I 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
on 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
on 27 Jan 12“What’s next?”. I see what you did there.
FiFi Cars
on 27 Jan 12It is just amazing to see how you guys designing new Basecamp! Can’t wait to see it live.
Anonymous
on 27 Jan 12Wow, new Trello!
John Ainsworth
on 27 Jan 12Looks great. Very excited to see how it looks when it launches.
Daniel Chohfi
on 27 Jan 12So freaking excited. +1
AC
on 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
on 27 Jan 12Two 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
on 27 Jan 12Some 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
on 27 Jan 12Just 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
on 28 Jan 12Honest critique: the logo animation sound is kind of…..tacky.
Joe
on 28 Jan 12Cool. With this much excitement over “discarded ideas”, it’ll be fun to see the excitement over what made it in.
Todd
on 28 Jan 12I 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
on 30 Jan 12Please, please don’t change. I cannot imagine working with a totally drastic new interface.
improvement yes! but not drastic changes.
Josh Martin
on 30 Jan 12Will 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
on 31 Jan 12At 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
on 31 Jan 12Hadn’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
on 31 Jan 12Bow, 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.