TIMEFUL TASK LIST
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:
- Make the ordering of the task list useful and understandable.
- Develop a framework of useful snooze actions for every possible task state (e.g. overdue tasks, tasks without deadlines, ...).
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
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:
- Clearly indicating whether a date listed is a task's scheduled date or its deadline.
- Giving appropriate visual feedback when Timeful is busy contacting the server to schedule a task.
- Providing a limited set of snooze options that apply to very different types of tasks.
Here's the Old Task List:
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:
Adding a Toggle to the Filter:
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:
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.