Tasks in Google Calendar

I designed a Google Calendar mobile app feature for working professionals and students
to maximize their productivity by scheduling tasks.

As a college student juggling internships and studying, I used Google Calendar to organize my life. Between the meetings and work hours, I liked to schedule my tasks, but Google Calendar only allowed users to schedule events.

Timeline: Summer 2020 (6 weeks)
Role: Product Designer
Tools: Figma, Protopie

Intro

How are people's days structured?

Most working professionals will have a couple of meetings. Students will have classes and club meetings. Between the meetings and events, they will also have to work on their tasks such as working on projects or studying.

People’s days are split between events and tasks. However, the current Google Calendar mobile app allows users to schedule events only.

Google Calendar users can't keep track of tasks in their schedules.

user research

How do people manage their tasks and calendar?

I surveyed 30 full-time students and working professionals to learn how they manage and schedule their tasks. The results showed that:

• 64% have a to-do list for tasks
• 43% have daily to-do lists
• 63% schedule tasks into their calendar as events
• 60% of those who schedule tasks plan a start and end time for the task
• 56% of those who schedule tasks have the task only in the calendar and not in a separate list

I found that a majority of those surveyed had a strong mental association between tasks and time. While some scheduled tasks into their calendar as an “event”, others mentally took note of the time they would tackle the task. Those who didn’t schedule tasks would estimate how long a task would take to complete.

Competitive analysis

How do current apps integrate tasks and events?

I tried out different productivity apps to learn how other apps allow users to schedule tasks. I looked into Edo Agenda, Fantastical, Rooster, and Any.do.

My takeaways from this competitive analysis were:

• When designing the solution, consider how to balance event and task management. It can become very cluttered.
• Users should be able to differentiate between an event and a task easily.
• Consider how to accelerate the process of creating and marking a task as complete. Some apps allowed users to mark a task as complete from the calendar view while others required multiple steps.

context

But what’s the difference between an event and a task?

defining the users

Designing for working professionals and students

Students and working professionals make up a large portion of Google Calendar's users. In 2018, 80 million students and teachers were using Google Suite for Education, and in March 2020, 6 million businesses were paying for Google Suite.

exploring the current space

How do users manage tasks within the Google ecosystem?

Google Tasks exists but the integration between Google Tasks and Google Calendar is limited.

• On mobile, there isn’t a way to connect Google Tasks to Google Calendar
• On desktop, tasks created within the Google Tasks app cannot be added to Google Calendar with a start and end time. Users have to tap into the task to mark it as complete from the calendar.

Beginning to brainstorm solutions

How do we bring task management and scheduling into Calendar?

I brainstormed How Might We questions and found that there was an infinite number of solutions to this problem. To start, I wanted to focus on the task management side of integrating Google Tasks into Google Calendar.

These were the three HMW questions I focused on:

• How might users add a task to the calendar?
• How might users view a list of their tasks?
• How might users schedule their unscheduled tasks?

Concept #1:
How can we make the calendar feel manageable now that users can add events and tasks? It might feel overwhelming with how cluttered everything is.

Solution:
“Today at a Glance” screen when the user opens the app for the first time that day

Concept #2:
How can users schedule existing tasks AND view a list of their tasks?

Solution:
A card that slides out 50% allows users to view their list of tasks with a calendar. They can drag and drop the tasks into their calendar.

Changing scope

Task management is complicated → Focus on the primary use case

After getting feedback from fellow designers, I realized that I was trying to solve too many problems all at once. Adding task management and integrating Google Tasks with Google Calendar is such a large scope to tackle, so I went back to the basics of this problem.

How might users add and mark a task as complete in Google Calendar?

I decided to focus on these three questions to guide the design process:

building out the designs

Starting designs in the Week view

Looking back at the competitive analysis, I kept in mind that adding tasks to the calendar could potentially make the view cluttered. My strategy was to design tasks on the Weekly view first. I thought that if the design worked for a more cluttered view, it would work even better for the 3-day and day view.

Shifting to designing for the Day view

The designs for the Week view looked cluttered. After taking a step back, I remembered from the survey that most people have daily to-do lists. Marking a task as complete occurs on a daily basis, so I shifted focus to designing for the Day view. This gave me more real estate to work with.

How might we make marking a task as complete exciting?

I found that Google’s micro-animations really elevate the user experience. I wanted to bring that into the flow of marking a task as complete. As I continued to iterate on various ideas of what the task UI could look like, I also played around with animation using Protopie.

In this iteration, I added fun Google-colored confetti at the end of the animation. It's barely noticeable though.

This iteration gives the most tap space for the check mark but this "button" looks like it's in the disabled state.

I learned through trial and error that micro-animations have to be just fast enough and have just the right amount of details. Too fast or too slow could make or break it.

Final designs

Create and schedule tasks easily

Users can tap on the "+" button at the bottom of the screen to create a new task in their schedule. This user flow is similar to when Google Calendar users create an event.

Users can also tap on a time frame to add a task. This allows a more visual way of seeing where their events are and scheduling their tasks around those events.

Tap on the + button

Tap on a time frame in the calendar

Mark a task as complete or undo

After users finish a task, they can mark it off of their calendar. Completed tasks look more similar to events, which makes the uncompleted tasks pop out more.

If users accidentally mark a task as complete they can un-check tasks that still need to be done.

Mark as complete

Mark as uncomplete

Hide tasks easily

Users can easily toggle tasks on and off with one tap if they want to view only their events.

conclusion

Next steps

Integrate this with Google Tasks. Joining these two apps together would make this duo a powerful Google productivity system and keep users within the Google ecosystem.

Design for the rest of the views. For this project, I focused on the day view but would love to solve designing tasks on the 3-day, Week, and Month view since not all users use the day view on mobile.

Takeaways

Start with the primary use case. It can be easy to want to solve everything all at once, but even starting simply with the primary use case can open a whole can of worms! There are always going to be edge cases but focus on designing for the main 90% first.

Micro-animations can make the user experience delightful! I learned how to micro-animate with this project and loved the process of trying new ideas and studying how Google animates interactions.