Design Decisions: Adding the "Calendar Strip" to the Backpack Newsroom

Design Decisions: Adding the "Calendar Strip" to the Backpack Newsroom Jason F. Mar 06

22 comments Latest by JF

When we launched the multi-user version of Backpack we added the Newsroom. The Newsroom has a message board (for Basic plans and higher) as well as a latest activity block that shows a list of new pages, changes, calendar additions, etc.

But soon we realized the Newsroom was missing something. It didn’t show you upcoming events from the handy Backpack calendar. Good news: As of today it does.

If you have any events on the Backpack Calendar that are coming up in the next 7 days we’ll show up to 15 of them them in a strip on the right side of the Newsroom. If there are no events in the next 7 days the strip won’t appear.

(Zoom to full size) The name of the calendar is displayed above the event, in the same color as that calendar. (You can color code each calendar so, for example, Sam’s events in the Calendar and his name in the Newsroom Calendar Strip always show up in purple.) And if there’s anything coming up today the date is yellow (otherwise it’s a muted grey).

So how did we get here?

We’re really happy with the way it works and the way it looks. But it took a pile of iterations to get here.

First we started with just text for the dates…

We played with this a little. Instead of bold black dates, we tried smaller grey ones…

We played with a few more versions of this. Different sized text, different colors, different spacing. It was alright, but it just wasn’t obvious enough.

Then I had an idea. Let’s give this more visual punch and at the same time make the dates more obvious. They were getting lost in all the text. So I mocked this up real quick…

We liked it. We were on to something. So Ryan put on his superman cape and started iterating and tightening things up…

Then with and without leading zeros on the dates…

Then we wanted to see what would happen if someone increased their browser’s font size…

Then we started experimenting with different colors. Here’s a version with a pale yellow background and green dates…

And then we started experimenting with different color schemes. Here’s an example for the pink color scheme…

And then Sam put on his detective hat and got it working in IE 6 (which is always the biggest pain the ass):

Broken

Fixed

Ultimately we decided against using different colors for each color scheme. Instead we scaled back the color, went with grey for the date blocks, and used a very pale yellow background for a touch of added depth…

(See it full size in context)

And there you have it

That’s how we get from point A to point B. Sometimes we divert to point C or D along the way, but ultimately we end up with something we’re really proud of. We hope you love it as much as we do.

So, log into your Backpack account and check it out. And if you don’t have a Backpack account, how about signing up for one today?

Looking for a job? Got a position to fill? Check out the Job Board.

Over 1 million people use 37signals' simple web-based software to collaborate on projects, track contacts, and organize their business with an intranet.

22 comments so far

Ricky Irvine 06 Mar 08

I’ve read the arguments against the Newsroom in the Solo plan, and it all makes perfect sense, but having recently upgraded to the Solo plan, I was disappointed that I received a notification for this feature within Backpack. Saddened, even. No new Newsroom feature for me.

This looks like a fabulous new feature, guys. Well done.

Aaron B 06 Mar 08

This isn’t directly related to the calendar on the Newsroom page, but what was the inspiration behind the graphic representations of the messages? And, how was that accomplished?

JF 06 Mar 08

@Ricky: We are planning on adding the Newsroom to Solo plans shortly now that we have the calendar strip in there. Stay tuned.

but what was the inspiration behind the graphic representations of the messages? And, how was that accomplished?

Coming up in a future post.

@JF: Yes!

Pedro Melo 06 Mar 08

Hi,

do you use or support Microformats like hCal on those events?

Thanks,

DHH 06 Mar 08

Pedro, no. Calendar is available as iCal, though.

Anonymous Coward 06 Mar 08

These pages are starting to look busy. There’s not enough focus or visual hierarchy. Keep it simple boys…

Brandie 06 Mar 08

While I know this post is based around Backpack I would love to see something similar in Basecamp. Currently there is a calendar in the dashboard on Basecamp that gives you a two week overview of all your projects, the only problem is that if I have three or more projects going occasionally I can’t tell which milestone belongs to which project/person. It would be wonderful if something similar to what you guys have done above could appear in Basecamp.

My current quick fix is putting a code for each project and person at the start of a milestone so that when it appears in the calendar I have an idea of which project it belongs to and which person.

I apologizing for derailing – great work though, it looks wonderful.

if I have three or more projects going occasionally I can’t tell which milestone belongs to which project/person.

Just hover over the milestone in the calendar and the information will show up as a tooltip.

Jason 06 Mar 08

I noticed that you had used New Glarus and Madison, in this graphic. http://www.backpackit.com/images/bp-calstrip-textonly-grey.png

Those are my old stomping grounds, and just curious if a trip to the New Glarus Brewery for a Spotted Cow was on the agenda?

Another awesome feature, for a great product. Thanks

Arlo 06 Mar 08

Yes! That was what I came here to inquire about.

Anson 06 Mar 08

Very elegant implementation.

BTW I have a feeling 2008 is going to be the year of the activity feed….

Warren 06 Mar 08

Have you manage to get calendar working with google apps yet?

I have contacted support twice and didn’t even get a reply sent to support@backpackit.com on 20th and 24th of feb.

Are you guys reading this mail box? :o)

Matt Radel 06 Mar 08

Agreed. I think it’s right up against the wall of being too much. It could be the sea of blue links across the page now, combined with the bold text headings.

Maybe you could tone it down a bit for the ancillary info (maybe go to a dark gray for headings & text and a little quieter blue for the links in the calendar & latest activity) and then punch them up when you hover over the containing element, kind of giving the area more of a visual punch when you’re actually working with it.

Then again, that could be too busy/quirky as well. Anyhoo, kudos on the calendar addition – it’s a swell idea.

I’m not sure what you mean. The Backpack Calendar is part of Backpack. You can subscribe to your Backpack Calendar via iCal in any iCal-capable calendar program.

As far as support, we read and reply to every email we get. You may want to check your spam filter if you haven’t seen a response.

Andy Kant 06 Mar 08

Like Jason, I also noticed New Glarus and immediately thought of New Glarus Brewery and Spotted Cow (there’s nothing more satisfying than a Spotted Cow right off the tap). I hope if this was a legitimate event that you indulged. ;-)

...Back to the topic at hand. I always enjoy reading these Design Decisions articles to see all of the thought that goes into your UI (which I generally use as a guideline on how to make great interfaces). Thanks and keep up the good work.

Neil Kelty 07 Mar 08

You might want to take a quick peek at the free-version of Backpack. The calendar bark looks pretty darn ugly. (The top doesn’t match, etc.

JF 07 Mar 08

FYI : Solo plans get the Newsroom as of now. Just deployed the update.

Jochen 07 Mar 08

Maybe you have noticed that the calendar items in IE6 are having a slightly different indention when they start below the day/month-icon. If you care about getting rid of that, you can apply a large negative margin (say -9999, doesn’t really matter, as long as it’s higher than the padding used for indenting the items) to the icon only for IE6 .

Geoffrey Grosenbach 07 Mar 08

It was a great surprise to see Newsroom on my Solo plan this morning. Thanks!

Adam Wride 08 Mar 08

JF, how do you do your mockups? All in Photoshop? Then you hand off to Ryan to code?

JF 09 Mar 08

Adam: We avoid Photoshop wherever possible and go straight to HTML /CSS. However, in this case, I whipped up a quick proof of concept in Photoshop since I had it open. But usually I mock things up in HTML /CSS.

This is Signal vs. Noise, a weblog by 37signals about design, business, experience, simplicity, the web, culture, and more. Established 1999 in Chicago. Visit the Product Blog for more information on our products.

Jobs: