Empowering Productivity Through Scheduling Tasks
I designed a Google Calendar mobile app feature for working professionals and students to maximize their productivity by scheduling tasks.
My Role
UX Design
Prototyping
Duration
6 weeks
Tools
Figma
Protopie
Introduction
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
Understanding how people manage their tasks
I surveyed 30 full-time students and working professionals to learn how they manage and schedule their tasks.
63%
people schedule tasks into their calendar as events
63%
people who schedule tasks plan a start and end time for the task
56%
people who schedule tasks have the task only in the calendar
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 other apps integrate tasks into calendars?
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:
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.
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.
Beginning to brainstorm solutions
How do we bring task management and scheduling into Calendar?
I explored a wide range of sub-problems and concepts to determine the best direction to pursue.
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.
Refining the 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
Designing for the worst case scenario: Week view
During the competitive analysis, I considered the risk of adding tasks cluttering the calendar view. To address this, I started by designing tasks for the Weekly view. My approach was that if the design worked in a more cluttered context, it would perform even better in the 3-day and Day views.
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 can we make completing a task 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.
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.
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.
The solution
Create and schedule tasks easily
Tap on the + icon or a time frame to schedule a task
Mark a task as complete or undo
Completed tasks look more similar to events, which makes the incomplete tasks stand out.
Hide tasks easily
Users can easily toggle tasks on and off with one tap if they want to view only their events.
Learnings
Stay focused on the primary use case
It can be easy to want to solve everything all at once with a personal project. There are always going to be edge cases but focus on designing for the main 90% first.
Elevate the user experience with fun animations
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.