Tasks in Google Calendar

Schedule tasks into your Google Calendar

Taking your productivity to the next level

A six week solo product design project where I designed and prototyped a feature for the Google Calendar mobile app that would allow users to maximize their productivity by scheduling their tasks.

Create and schedule tasks easily

Mark tasks as complete

Hide tasks

Skip to more detailed final designs here

At a Glance

Timeline: Jul 2020 - Sep 2020 (6 weeks)
My Role: Sole designer - User Research, Wireframing, User Experience Design, Prototyping/Animations
Tools Used: Figma, Protopie

I completed this project as part of the Design Collective Fellowship. Thanks to Jessica Ko, Moses Ting, David Lie-Tjauw, and Brian Lin for their mentorship and guidance!

How are your days structured?

What do people's day-to-day schedule look like? They might have a couple of meetings or classes to attend and outside of those events, they also have to work on their individual tasks such as prepping for a meeting or studying. To put it simply, people's days are split between events and tasks. However, the current Google Calendar mobile app only allows users to schedule events and not tasks.

And that's exactly what the problem is.

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

Allow tasks to be scheduled

My solution is to allow Google Calendar users to schedule tasks on the mobile app. This would allow Google Calendar users, especially students and working professionals, to create a more holistic schedule of their day.

People use calendars to keep themselves accountable to attend their events. We can use this same framework to keep ourselves accountable to finish all of our individual tasks in between our events.

Events vs. Tasks

But first, let's clearly define what the difference is between an event and a task.

How can this framework be applied to Google Calendar users?

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.

Google Tasks is flawed

After defining the problem, I started to explore the current space.

Google Tasks is an existing product that allows users to keep track of their tasks through a stand-alone mobile app and an add-on on desktop.

Problems with Google Tasks

Quick user interviews and surveys

For this project, I focused mainly on design iterations so I didn't allow as much time to conduct user research. However, I interviewed 5 individuals and got 40 survey responses.

  1. When people schedule tasks, most plan a start and an end time. If not, they plan start times, or how long the task will take.
  2. People schedule tasks by adding them into their calendar as events.
  3. When people schedule tasks, they're not including much information about it since it's just a quick reminder to get it done during a certain time block. They have more information on the task in other places such as a notebook, email, or ticket.
  4. People always indicate that the task is done, whether that's by crossing it off or updating others.

Starting to design

After exploring the current space with Google Tasks and talking to Google Calendar users, I started to brainstorm solutions and go through lots of design iterations!

Iterations on the Week View

Google Calendar has 5 different views on mobile: Schedule, Day, 3 Day, Week, and Month. I decided to start designing for the Week view. If an already cluttered view can look good with more added content (tasks), then it's bound to look good on 3 Day or Day view right?

Marking a task as complete occurs on a day-to-day basis

After going through several rounds of high-fidelity iterations on what tasks might look like on the Week view, I started to explore the user flow of how a user might mark a task as complete.

Since the tap space for each event/task is already really small, I came up with two flows that a user could go through to mark a task as complete. Each would require 2+ clicks. 2 clicks too many!

However, I realized that marking a task as complete typically occurs on a day to day basis. With this in mind, I decided to switch over to designing on the Day view.

Iterations on the Day View

Exploring task completion animations

People love marking tasks as complete. It's a really small gesture, but can make people feel proud and accomplished! I wanted to create that same feeling of satisfaction with this interaction by creating a micro-animation for marking a task as complete.

The Final Design:
Tasks in Google Calendar

Create and schedule a task

Users can click 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. The task form is short because users won't need too much information about the task when they're looking at their calendar to see what tasks they have to complete.

Tap on a time frame to schedule a task

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

Mark a task as complete

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.

Un-check tasks

Accidentally mark a task as complete? No problem, users can un-check tasks that still need to be done.

Hide tasks easily

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

Reflection

Next Steps

  1. Integrate this with Google Tasks. It would be great to integrate this feature with Google Tasks so that users would be able to access their tasks on Google Tasks and schedule those existing tasks. Joining these two apps together would really make this duo a powerful Google productivity tool.
  2. Design for the rest of the views. Google Calendar has 5 different views. For this project, I was only able to focus on one view. It'd be interesting to see how the design on the Day view could be applied to the 3 day, Week, and Month view.

Takeaways

  1. I learned how to animate! This was my first time creating micro-animations and it was really fun. I'm excited to learn more and bring this new skill to my future design projects.
  2. For short design projects, focus on the main use cases. Before I started designing, I had brainstormed many different solutions. However, after showing them to my mentor, she reminded me to focus on designing for the main 90%. There's always going to be that 10% that you can't design for, especially with short design projects. Design for the primary use cases before moving onto edge cases.

Conclusion

Really big thanks to Design Collective for creating this opportunity for me to get guidance and mentorship on a product design project. This project was full of many firsts. First solo product design project. First time getting mentorship on a project. First time animating. I learned a lot and I'm very grateful that Design Collective gave me the opportunity to join! Excited to bring everything I've learned to my future projects!