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…
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?
Ricky Irvine
on 06 Mar 08I’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
on 06 Mar 08This 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
on 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.
Ricky Irvine
on 06 Mar 08@JF: Yes!
Pedro Melo
on 06 Mar 08Hi,
do you use or support Microformats like hCal on those events?
Thanks,
DHH
on 06 Mar 08Pedro, no. Calendar is available as iCal, though.
Anonymous Coward
on 06 Mar 08These pages are starting to look busy. There’s not enough focus or visual hierarchy. Keep it simple boys…
Brandie
on 06 Mar 08While 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.
JF
on 06 Mar 08if 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
on 06 Mar 08I 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
on 06 Mar 08Yes! That was what I came here to inquire about.
@Ricky: We are planning on adding the Newsroom to Solo plans shortly now that we have the calendar strip in there. Stay tuned.
Anson
on 06 Mar 08Very elegant implementation.
BTW I have a feeling 2008 is going to be the year of the activity feed….
Warren
on 06 Mar 08Have you manage to get calendar working with google apps yet?
I have contacted support twice and didn’t even get a reply sent to [email protected] on 20th and 24th of feb.
Are you guys reading this mail box? :o)
Matt Radel
on 06 Mar 08These pages are starting to look busy. There’s not enough focus or visual hierarchy. Keep it simple boys…
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.
JF
on 06 Mar 08Have you manage to get calendar working with google apps yet?
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
on 06 Mar 08Like 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
on 07 Mar 08You 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
on 07 Mar 08FYI: Solo plans get the Newsroom as of now. Just deployed the update.
Jochen
on 07 Mar 08Maybe 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
on 07 Mar 08It was a great surprise to see Newsroom on my Solo plan this morning. Thanks!
Adam Wride
on 08 Mar 08JF, how do you do your mockups? All in Photoshop? Then you hand off to Ryan to code?
JF
on 09 Mar 08Adam: 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 discussion is closed.