Last week we released a redesigned project switcher in Basecamp. The project switcher lets you move between projects when you are inside another project without having to go back to the Dashboard.
The best way to get a feel for the change, and why we made the change, is to watch a before and after video (below).
NOTE: Unfortunately the text on the video is distorted when scaled down to the size required to fit in this post, but you can watch the full size version which will bring it all into focus.
How we got there
Ryan started by mocking up the first version of the idea. It was a two column list of the last 20 projects you accessed. The grouping by client was derived from the project list in the Dashboard sidebar. It was basically a miniaturized version of that list.
Then we added a “(continued…)” blurb at the top of the second column if the client’s projects spanned two columns:
The idea was OK, but it wasn’t really clear enough. All the projects were still being treated equally. 20 most recent is nice, but there are probably a few on that list that are accessed a lot more than the others.
I mocked up a new version with more recent projects on the left and the rest on the right:
This direction also introduced a new way to label the projects. Instead of grouping them by client like we do on the Dashboard, we could just include the client name after the project name. It took up less space and was more direct.
We thought it might help to explain the difference between the two columns so we added red labels to the top of each column:
Then we were looking at it and we said… Hmm, it’s still a bit messy. And it’s getting pretty wide too. We could do better.
So we combined the original idea of a pulldown menu with the new idea of prominently displaying the last 5 projects. Last 5 on top, the rest below in a pulldown:
We loved this direction. But it was a little narrow so we widened it to account for longer project names and to give the menu a little more presence.
Nice. Then it was on to the UI polish. We touched up the type, spacing, proportions, hover states, targets, got rid of the subtle border color, and added a wide shadow behind the menu to give it some depth.
The final version:
Also worth noting is that it took an extra day or two to get this working in IE 6/7. And then a few more hours post launch to deal with some lingering IE issues.
We hope you enjoyed a look at the design process, trial and error, and thinking behind the new project switcher in Basecamp. So far the customer reaction has been overwhelmingly positive. Thanks everyone!