TIMEFUL TASK LIST

list_view_snooze_thumbnail.png

Project Summary

Timeful has two main views: a calendar and a task list. The calendar displays a proportional view of the user's day, including events and tasks. The task list is a condensed look at all upcoming to-dos.

The objective of this project was twofold:

  1. Make the ordering of the task list useful and understandable.
  2. Develop a framework of useful snooze actions for every possible task state (e.g. overdue tasks, tasks without deadlines, ...).

My Role

This project was an iteration of an existing view in the app. I managed the new snoozing framework and the interaction and visual design of the new list ordering system.

Updating the Task List

Challenges

In Timeful's previous release, the task list separated repeating and one-time to-dos. In user interviews, I found that people were unable to understand the ordering of tasks within each section.

To update the list to an understandable chronological order, I identified three main challenges:

  1. Clearly indicating whether a date listed is a task's scheduled date or its deadline.
  2. Giving appropriate visual feedback when Timeful is busy contacting the server to schedule a task.
  3. Providing a limited set of snooze options that apply to very different types of tasks.

Here's the Old Task List:

An earlier version of Timeful's task list, sorted by to-do type and deadline.

An earlier version of Timeful's task list, sorted by to-do type and deadline.

Updated Ordering

Bucketing

By sorting tasks chronologically, I saw an opportunity to make this list feel more like an agenda view of the day than just a to-do list.

To facilitate the use of this page as an agenda view, I introduced a separation between "Today" and "Upcoming" to-dos. This bucketing helps people focus on what's next and makes it easy to triage top items.

I also added a simple toggle in the list filter to hide completed to-dos. A much-requested little feature!

The Updated Task List:

The updated task list, ordered chronologically.

The updated task list, ordered chronologically.

Adding a Toggle to the Filter:

I added a simple toggle to the list filter menu to make it easy to hide completed to-dos.

I added a simple toggle to the list filter menu to make it easy to hide completed to-dos.

Visual Feedback While Timeful "Thinks"

When a user creates a new task, Timeful needs to contact its servers to figure out when to schedule it. During this processing time, we need to indicate that the task is in a "thinking" state.

To accomplish this, I replaced the scheduled date with a rotating processing icon. I also worked with an engineer to limit how much resorting happens as the server schedules tasks at new times.

Below is a screen capture of a FramerJS prototype used to convey the thinking and reordering behavior.

FramerJS Prototype of Thinking State:

timeful_list_reorder.gif

Snooze Framework

The final component of the list redesign project was snoozing behaviors.

The objective was to provide people with the most relevant possible quick snooze options on every task, while at the same time limiting the number of possible different buttons we offer.

Each to-do can exist in many possible states (depending on its deadline, scheduled date, repetition, ...). I captured every state to confirm that our framework would work in all cases.

Spec Laying Out the Cases:

I laid out the desired snooze behavior for all possible task states. I synthesized this framework into a couple rules for the engineers to implement.

I laid out the desired snooze behavior for all possible task states. I synthesized this framework into a couple rules for the engineers to implement.