April 22, 2010

Design Exercise: daily planner

Last night at Vitorio Miliano's Design Workshop he prompted us with the task of designing a daily planner. The complaint was that Microsoft Outlook's mini calendar doesn't do a great job of displaying both events and time necessary to prepare for them. Daily planners should display a buffering time to help people better manage their time before and after events. For example: if you had a meeting downtown but you know it will take you 5 minutes to wrap-up at the previous event and an additional 30 minutes of driving then the UI should reflect that time needed to prepare for the actual meeting. Here's what I came up with.

This first figure is the framework for our daily planner's data. The upper half is a linear representation of one day's time divded into two halves. In this example, the user has set their normal daily activity from 7 A.M. to 11 P.M. The lower half is a space for daily checklist items.

The first (daily) step to this interaction is entering data into the checklist section. These are tasks that should be completed before the day's end but will not have major ramifications if not tackled before the day's end. In this scenario, our user has to offered to walk the dog for their roommate, take the trash out and call their mother among other tasks.

The second step is entering data into the time bar. Users would reserve blocks (or chunks) of time to represent events. Events should be thought of as highly important tasks that cannot be forgotten or missed. Events, unlike checklist items, must be completed at a scheduled time and in a particular order. The colors used in this example represent different types of events: Blue represents professional/career events, Yellow represents social functions, Green represents personal or family time and Red represents personal development. In this scenario the user has Work starting at 9AM, Lunch with a friend at 12:15, Dinner at 6:15, a graphic design workshop at 6:45 and finally a late night jog with their neighbor at '8ish'. One could see that this user has a schedule conflict: their jog and design workshop overlap each other as represented by blocks. This blocky representation of time allows us to see when we've stacked our time too high with events. Had this user planned on attending a third event at 8pm then another block of time would be stacked beneath the other two events.

The next step in this interaction is entering the last set of data into the time bar. Again users would reserve blocks of time for events; but this time they will determine how much time is needed to prepare for each event. These buffer times should include the amount of time it takes to prepare and travel. These blocks of time are located in the time bar directly above and before the scheduled event takes place. Their color matches the relative event. The buffering block's form is represented as being half solid. Events are represented as solid color because they are non-negotiable time frames. The time it takes to prepare and travel to a scheduled event is subjective: the user could include an extra 10 minutes of travel time but regardless of when they arrive at their destination the event still occurs at a specific time. In this scenario, the user has booked themselves pretty tight with buffer time. This UI also displays to the user that if they should feel like leaving their design workshop to jog with their neighbor, they would have to leave their event at 730. This presentation of time creates an interesting opportunity for people who regularly make brief appearances to multiple events in a single day. It gives them the information they would need to make time-sensitive plans and actions.

In this figure we see what a day in progress looks like. The time of day is just after 10:30 am and the user has completed three of their checklist items. The dashed red line represents the constant of time while it leaves a trail of muted color represented time past.

Another example, this time shortly after 7PM with five items completed on their daily checklist.

Here we have an example of nearly an entire day passed. It's almost 10:30pm and the user is wrapping up their day and checking their daily planner before bed. They've inserted two notes for the day (represented by colored triangles) as actionable items or reminders for the future. We can also see in this scenario that the user didn't manage to take out their trash or get a recipe from their friend, Jillian.

Finally we have an example of a summary of daily notes. This would appear near the end of the day or the first thing to appear the following morning. Daily notes include a list of all incomplete checklist items for the day and footnotes from all events. From here the user is able to automatically include these items into their daily checklist for tomorrow ~or~ delete them.

So there you have it. This started as a simple wire framing exercise sketch turned digital mock-up. That being said this is not the final solution visually as there are more choices to be made and areas to fine tune: but I feel the essence of the interaction is here.


Christopher Griego
graphic designer
Austin, TX
portfolio - christophergriego.com