DatePicker

Speeding up event planning.

DatePicker

DatePicker is an event planner that serves as an extension to Google Calendar. Tools for customizable date selection and group collaboration aim to simplify the event planning process.

Timeline

March 2020 – April 2020

Where does Google Calendar go wrong?

In the image below, we can see that when creating a custom recurring event in Google Calendar it must fall under a consistent pattern across multiple weeks. Scheduling an event on Monday, Wednesday, and Friday in one week and then Tuesday, Thursday, and Friday in the next week has to be done by creating two completely separate events. This inability to schedule events in an aperiodic format causes major delays in event planning.

Google Calendar's recurring event workflow

Interviews and market research

I began this project with surveys, interviews, and market research to clearly define pain points and what role DatePicker will play in the event planning market. Surveys were given to 32 teachers and coaches which provided data as to what products teachers currently use as their main calendar and how they use these calendars.

I need a way to schedule my basketball practices with custom recurrences. On my current calendar, I can’t customize it the way I need to.

-Craig, basketball coach and teacher

From the research, I concluded that

Allowing custom event planning

I began this project with surveys, interviews, and market research to clearly define pain points and what role DatePicker will play in the event planning market. Surveys were given to 32 teachers and coaches which provided data as to what products teachers currently use as their main calendar and how they use these calendars.

The DatePicker workflow for creating a new event
An animation showing individual date selections in the DatePicker calendar view

Aperiodic date selection

A click and pick date selector solves the main point of not being able to schedule aperiodic events.

Improving interactions

I ran final usability testing with a high fidelity prototype amongst 7 participants that included teachers and coaches. Based on feedback and observations made from this testing I created a few interactions to incorporate into the final designs that have the potential to make DatePicker easier and faster to use.

An animation showing the save notification without hiding the calendar

Providing system feedback

This animation of the event sliding in from below indicates that an event has successfully been added without the need for a confirmation modal.

An animation showing the tutorial prompt without hiding the calendar

Date selection tutorial

The process for selecting dates in DatePicker may be unfamiliar to some users who exclusively use Google Calendar. This tutorial provides a quick demonstration of how to select dates.

An animation showing tap-and-drag selection on the calendar

Drag selection

The click and pick date selector works just fine, but adding a drag selector alongside it can allow for even faster and smoother date selection.

Logo update

For the next team that worked on this project, I wanted to leave a logo in the project file. I incorporated the two primary colors of the app, along with scattered colored squares to represent the purpose and function of DatePicker.

The new DatePicker logo

Final screens

TODO

Learnings & Insights