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?