Tasks : A Feature Concept for Google Calendar

How to use a Task List to work smarter

A Brief Introduction

I love being organized.

I’m an avid user of calendars and task lists and rely on them heavily to get through my day. Specifically I use: Fantastical for Desktop, Google Calendar for Mobile, and Todoist for Desktop & Mobile.

I don’t particularly mind having multiple apps across multiple platforms since they all integrate well with each other, but I do have one big problem and that is..

The Problem

I know what tasks I am supposed to do on a given day & I know what events I have to attend said day, but I can never effectively & quickly integrate my tasks into my calendar.

Here’s what my current workflow looks like:

  1. Take a look at my Calendar for the day
An unreasonable number of FB events that I said yes to but will never go.

2. Take a look at my Tasks for the day

Hey! Medium Post! I’m doing that right now! Look at me go.

3. Manually add in Tasks to my Calendar (The worst part)

4. Forget to add Tasks to Calendar and don’t effectively use your time between scheduled events (Optional)

¯\_(ツ)_/¯


The Concept

The core idea behind Tasks is simple: a task list that helps you quickly and effectively schedule your tasks for the day.

Prelude

The ideal execution of this concept involves a standalone app that serves as a simple and basic Task List. The real magic, however, happens on Google Calendar as the tasks seamlessly integrate with your schedule. The concept is designed primarily for mobile use, thus we’ll look at the execution of the concept on a mobile interface, switching between the standalone Task app and the effects on the existing Calendar app.

The Details

I’m extracting most of the design details from screenshots I took of my own Google Calendar which you can access here. Otherwise, all design details/decisions are an attempt to closely follow Google’s overall design approach.

Palette: The Palette was chosen from Google’s UI Color Application. Blue was chosen as the Primary color & Red was chosen as the Accent color.

So ***material design***

Typography: The typography will closely follow Google’s Typography guidelines, mainly using Roboto for in app design and Product Sans for some icon and logo designs.

Tools: All pages/mockups were made using Sketch. Animations done with Keynote.


Design

The Task List

Day — Menu — Week

The Tasks’s app is intended to be fairly simple. It’s composed of a compact vertical feed of your tasks filtered by ‘Projects’ attached to your email. You can also choose to view your tasks by ‘Day’, ‘Week, or ‘All’, to allow flexibility for users to focus on just a certain day or look ahead. Finally there is an additional ‘Inbox’ page that holds all the tasks that don’t have specific dates attached to them. There’s a ‘Search’ button at the top of the app to allow for a fast search of tasks, and adding new tasks is available at the bottom right of the screen through a constantly hovering ‘+’ button.

Adding Tasks

how straightforward

Adding tasks is a central part of any Task List, so it needs to be super simple.

After clicking the ‘+’ button on the bottom right, users are greeted with this screen. The primary color of the screen changes to the color of the project (in this case ‘Personal Projects’). Users just need to:

  1. Name the task
  2. Pick the Project
  3. Select the date it’s due
  4. Add the time the task will require
  5. And THEN..

Schedule

so many options!

Here’s where things get fun.

When you press ‘Schedule’, your task appears on a calendar like interface (as seen here), placing itself near the middle of your screen. All other events/tasks for the day are transparent so you can, at a glance, see what events you have, but not be distracted by all the irrelevant information.

You can then easily drag and drop your task to exactly where you want.

OR, instead of pressing ‘Schedule’ you can decide to...

Auto-Schedule

This took way more than 1 & a half hours.

Auto-Schedule is, at it’s core, a non-thought intensive way of putting tasks into your calendar.

All you need to do is press the ‘Auto-Schedule’ button and the ‘Tasks’ app finds an available block of time in your calendar. The app then asks you if the proposed time works, where you can either:

  1. Press Done — and you’re done!
  2. Press Redo — and ‘Tasks’ finds another time that might work
  3. Press Calendar — which opens up your Calendar and allows you to place your task manually.

During Tasks

Yes computer, organize my life for me.

When your task is scheduled to start, you’ll get a notification on your phone (in this case Android) asking if you’ve begun working on the task. You can choose to respond with:

  1. I’m Busy — auto-reschedules the task for another time.
  2. Ask in 15 — tells Task to ask you again in 15 minutes.
  3. Yes! begins countdown for task which leads to…

Completing Tasks

why are these notifications nagging me

Once you’ve started your task, Task starts to countdown the allotted time for a task. When the time given to the certain task is up, Tasks prompts you with another notification (seen here) that asks if you’ve completed the task, where you can respond with:

  1. More Time — auto-schedules some more time for your task.
  2. Yes — marks your task as completed on your task list.

Putting it all together

Finally, here’s a quick demo putting all the screens together to show a generic user interaction of creating, starting, and completing a task!


And that’s it!

Creating an experience like this would be incredibly valuable for people who rely heavily on calendars and task lists because it allows them to:

  1. Easily Integrate — displaying tasks in a Calendar like environment and thinking of them as ‘events’ makes an incredible amount of sense. It forces users to block off time for their tasks throughout their day, which increases efficiency and task completion.
  2. Know what to do when  actively trying to remember every task you need to finish and manually finding time for it is inefficient and prone to error. Software can fix that.
  3. Increase accountability — reminders & notifications often increase action and prompt users to complete things they are supposed to do (see: email, FB Notifications, etc).

So if anyone on the Google Calendar team is reading this, please make this happen :)


This is my first time doing anything UI/UX related! If you have any questions/comments/feedback or want to talk more about this (I have a lot more to say honestly) feel free to shoot me message on Twitter @MoMazhari. Or you can also email me at mmazhari@umich.edu. I’d love to hear from you :)

You can find all the files for this project on my Github!


Disclaimer: There’s a lot of stuff I definitely left off from here. (Settings for Auto-Schedule is a big one — when should auto-schedule schedule tasks, how long is “More Time” on notifications, etc.) I did most of that on purpose, since I don’t think it’s incredibly important to discuss for the core vision of the product. I tried to keep everything on here super relevant and directed at the day-to-day use for users.