Basecamp To-dos with Due Dates

Exploring due dates associated with To-do lists in Basecamp

By Jason Zimdars, designer at 37signals

One of the top requests from Basecamp customers is to assign due dates to to-dos. After a lot of careful thinking and design work, we just launched the feature on Monday (November 16, 2009). We wanted to share some the behind-the-scenes design process.

In our previous article (Exploring the Highrise Edit Contacts screen) we had a clear concept that we carefully refined over a series of design iterations. Similarly, this project started with a solid UI concept, but required careful work to make sure the experience was just right.

Due dates

The first challenge was how to show to-do lists and the associated dates. There are a lot of places that to-do items can appear in Basecamp from the To-Do tab in each project to the activity streams on the Dashboard and project Overview. The dates needed to be visible but not visually dominant.

The original version showed the to-do item, the person or company who is responsible for completing the item (if assigned), and any comments associated with the to-do. Hovering over each to-do revealed the edit, trash, and add a comment UI. That's already a lot of information. We'd need to add due dates without cluttering the list.

  • Original to-do list screen

Right from the start we liked the idea of using a pill shape to enclose the date next to each to-do. This gave the date a distinct look we could use elsewhere in Basecamp that was easily reconizible as a date. The pill shape also visually separated the date from the item’s content and gave each date a large, clickable button target (more on that later). We also thought that the responsible party might benefit from this same visual separation. Previously the party assigned to the to-do was bold and left of the item making it stand out more than the to-do, itself.

The initial versions used a pill reversed from the list’s text color. This treatment was bold and clear, but made the date more visually important than the to-do. After exploring several variations, we settled on a subdued grey and combined the responsible party with the due date in the same pill. This cleaned-up the left edge of the list making it easier to scan and read the to-do items. The responsible party and due date now feel appropriately secondary and follow the item contents.

  • Pills variation 1
  • Pills variation 2
  • Final pills design

Quick-edit

Another idea we had was to be able to assign to-dos to people and change the due date without leaving the page. You could edit the to-do which is fast and loads the form via AJAX, but we thought it would be even better if you could just click the pill to change the party/date right there. This is a case where we felt the pain of managing long to-do lists because we use Basecamp to manage our own projects. So, as we considered the display of the due date pills, we started experimenting with a quick-edit UI. Here are some early attempts:

  • Quick-edit UI
  • Quick-edit UI
  • Quick -edit UI

Clicking to reveal controls or turn the pills into native widgets was too clunky and really limited what we could do. We liked the idea of a small pop-over that appeared when you clicked the combined due/responsible pill. This gave us much more flexibility in how to display the choices and it could be clearly associated with it’s to-do item when open (something the inline attempts struggled to do).

In one of the simplest versions, clicking the due/responsible pill popped up a small bubble with a pulldown to choose a party and another to choose a date. The date pull-down was full of shortcuts like “today”, “tomorrow”, and “next week”. So clicking “tomorrow” would set tomorrow’s date as the due date; “next week” would make it 7 days from now. A full calendar picker was only revealed when “a specific date” was choosen. This approach might have been really fast and convenient in some cases, like pushing back a to-do to another date. However, it is’t very good if you just want to choose a particular date or day of the week.

  • Quick edit UI
  • Quick edit UI

This approach also failed to display dates in the way that people are most accustomed to: as a calendar. We explored some ideas for showing a pull-down for the party matched with a calendar for the due date. After a few iterations we had a cleanly stacked pop-up that fit nicely in our bubble.

  • Quick edit UI
  • Quick edit UI
  • Final quick edit UI

Filtering by date

Similar to the way that the lists can be filtered to show only items assigned to a specific person, lists would also need to be filterable by due date. Because to-do lists can be manually ordered, we couldn’t simply order by date with the newest or most-pressing items at the top. The solution turned out to be one of the earliest and most obvious we tried. Simply adding a second pull-down for dates below the “Show to-dos assigned to” filter was clear and consistent but we did experiment with a few other ideas before coming back to it.

  • Filter by date due
  • Filter by date due
  • Filter by date due

We really liked the filtering on the right side of the lists and it stuck around for quite awhile. It made it easy to see which filter was selected and what other ranges were available. Here you can see how it worked with several treatments of the sub-heading that appears when the list is being filtered. This element was surprisingly tough to get right. It needed to fit in the visual heirarchy between the page title and the title of the to-do list, prominent without over-powering either. Still, it had to stand-out enough to indicate something has changed. The yellow color improved upon the initial treatment, but it was too close to the yellow used to highlight “your” to-do items. We liked these solutions when looking at mock-ups, but once inside the app, they felt over-designed. The finished heading is more subtle and draws just the right amount of visual attention.

  • Filter by date due
  • Filter by date due
  • Final filter by date due

Final steps

Finishing up this project required a few more design ideas. For one, the ability to assign due dates to to-dos needed to be part of the UI for adding and editing to-do items. Re-purposing our bubble as a date picker that opens when you click into the due date field saves development time and offers a consistent experience. Additional finishing touches included displaying to-do dates in notification emails, daily digest emails and on the project Overview.

  • Edit by date due
  • Due dates in Daily Digest email

See it now

These improvements have recently been added to Basecamp so you can login to your account and try them today. We’re very excited about this new feature and we think it adds a whole new range of uses for to-do lists. We hope you enjoy it and thanks again.

  • Final list view