.svg)
.png)
Adding a calendar feature to an existing task manager, Todoist, in order to allow users to schedule and review their tasks more efficiently.
Background
Todoist is a task management app, that is available across various platforms (web, Android, iOS, Windows and macOS) and has integrations with multiple apps, used to organize work processes as well as home errands, and life admin. Users can create projects, divide them into sections, add tasks with due dates, assign labels and priorities.
My role
Research
UX design
UI design
Team
Group critique sessions
Project owner
Problem
Currently, Todoist users don't have the ability to quickly review their tasks in a calendar directly in app. The users would like to have a better picture of their project and future plans, easily reschedule tasks, and review the timeline of projects they are working on.
Goal
Create a calendar view that will significantly improve user experience, and user retention, as well as allow managing tasks without the need to leave the app.
During this research phase, I reviewed over 60 requests from existing users asking to add a calendar view to Todoist. I divided user requests into three categories: goals that users try to achieve, certain ways how the users would like to use the calendar, and their frustrations with the current setup:
During the competitor analyses, I reviewed 3 task managers that have the calendar feature, and a calendar app.
.png)
Taking into account In order to have a clear understanding of the value that this feature will add to the users, I created the following user stories:
As a busy professional, I would like to be able to review all my upcoming tasks in the calendar, and have the full picture of the workload for the upcoming week and month.
Ann Holmes Financial Adviser
.jpg)
Being a young parent and working remotely, I would like to have an ability to overview all my family and household errands, and easily schedule my work tasks around them.
Ben Cole Product Designer
After reviewing user requests and the competitor apps, I created a user flow for all the actions a user could take to use the calendar view and access its features.
User task:
Ben is a young parent, working remotely as a Product Designer.
He is using three Todoist projects to plan his daily tasks: Kids' Schedule, Work, And Personal.
At the beginning of each week he is scheduling his tasks in the calendar following these steps:
.png)
After defining all pages that I had to design, I started ideation with sketches and low fidelity wireframes. I focused on allowing users to have a simple overview of all upcoming tasks, but also keeping more advanced features, like filtering by project, or hiding completed or unscheduled tasks.
Day view. Considering the position of the Day/Week/Month drop-down, filters and additional view options.
Week and month view. Focus on keeping the calendar layout intuitive and familiar to the user.
At the stage of creating low-fidelity wireframes, I focused on creating the layouts that would not be compromised if users would like to expand/collapse the sidebars: list of the projects on the left, and unscheduled tasks on the right.
Day view with the hidden sidebar for unscheduled tasks
Day view with expanded the sidebar with unscheduled tasks
Week view. Collapsed sidebar for unscheduled tasks
Month view. Collapsed sidebars
Based on the feedback form design team, I prepared different options of how the task cards are displayed. During the research phase we found, that users wanted to have an easy way to scan through their schedule and understand the workload for the upcoming day/week/month. I reviewed two different variants:
In the next steps, I designed a high fidelity prototype and conducted test with 4 people from the target audience. The goal of this step was to test, whether it was intuitive for users to schedule tasks, switch between different views, find filters and use different view preferences.
Open prototypeI tested the initial prototype of the Todoist calendar with 5 users. The users did not use Todoist before, however, they use other digital calendars on a daily basis.
Wins:
Pain points:
After reviewing the user feedback, I made the changes based to make the calendar more intuitive.
Displaying Todoist task in a Day view
Displaying Todoist task in a Week view
Displaying Todoist task in a Month view
Alternative display of tasks - different color code to display the tasks' project
On the next design iteration, I consider making the following updates:
.png)
Dressera is a web tool designed to help stylists create capsule wardrobes and share it with clients in one space.
View
Let's connect
