Last night we added a calendar picker to Backpack’s Reminder form. You don’t need to choose a date or time for Reminders if you use the preset options like “Tomorrow morning.” However you can select “At a specific time…” and set the exact date and time yourself. Before today, you had to use pulldowns for the day, month, and year to do this. Here’s the old design:

Old reminder pulldowns

Now you can use a little calendar to visually select the date:

New reminder calendar picker

Let’s take a look at the design process. We had the idea to replace the pulldowns with a calendar picker because we did exactly that in Basecamp a few months ago. Here’s the calendar picker on Basecamp’s New Milestone screen:

Basecamp's calendar picker on the New Milestone screen

First Sam converted Basecamp’s calendar picker into a Rails plugin so we could use it in Backpack without duplicating our efforts. After he inserted the calendar picker into Backpack, it looked like this:

The calendar copied into Backpack's Reminder form

It was good to see the picker in place, but it didn’t look right. There are too many borders and shades of grey. It looked fine on the Milestone form because the calendar is surrounded by white space. Reminders are a different story. The Reminders form is already shaded blue and contained in a box, and the calendar picker appears in a smaller white box that appears and disappears based on the pulldown above. Our challenge was to simplify the calendar design to make it fit more seamlessly into the busier Reminders form.

Original from Basecamp

Step 1: Critique the original

Here’s the original design. Right away a few things hit me. There are too many boxes. The calendar border makes it a box within a box. The header is a box, the weekday titles (S M T..) are a box. The “Due:” line is a box. It’s too much noise.

The grouping is also wrong. The time and “repeat” option are oddly grouped together because they share a white background below the grey footer of the calendar.

Redesign step 2

Step 2: Broad strokes

I dropped a screenshot into Photoshop and started re-coloring the sections. My main goal was to turn the calendar inside out. Instead of grey on top and bottom, I made the days grey and the header/footer white. Now they blend into the surface of the white container. In the absence of a bottom border and shading, the “Due:” date groups with the time pulldowns and anchors them. The time and “repeat” options are no longer grouped separately from the due date. Your eyes are also drawn to the center of the calendar now that the days are shaded instead of the top and bottom of the calendar.

Pleased with the mockup, I reflected the changes in my CSS. Now the grey center block was bothering me. Every month looks the same, and the difference between days inside the current month versus days of adjacent months is too subtle. It’s time for some refinement.

Redesign step 3

Step 3: Refinement

This step shows how small tweaks make a big difference. I removed the grey shading from the “off-month” days. This had a few benefits. First it allowed me to use the same color for the weekdays (S M T..) as the off-month days. The “least effective difference” bells were ringing. The shading also gave each month its own shape. That means you advance to the next month, your eyes immediately register the change without scrutinizing the month name. Lastly I removed the border between the the month pulldown and the weekdays header. That allowed the whitespace to flow from the top of the white container all the way through the calendar to the bottom. All the calendar elements are united with the white surface behind and around them.

Redesign step 4

Step 4: A splash of color

The last thing this redesign needed was some personality. Swapping the grey day cells with yellow made them pop and brought the calendar to life. The yellow had the added benefit of drawing attention to the calendar. The calendar only appears when you indicate you wish to set a specific date and time rather than a pre-set option like “Tomorrow morning.” Now when the calendar appears, it comes on the scene with a flash of color and grabs your attention.

This redesign was an exercise in making differences count. The main function of our eyes and brains is detecting differences in color, in shading, in weight, in grouping. Therefore we make it easy on the eyes and brains of our customers when we consider every line, shade, and color. Clarity and simplicity come from questioning each pixel to ask if it’s doing work. Try paying more attention to differences on your next design and kick out those lazy pixels.