DatePicker is an event planner that serves as an extension to Google Calendar. DatePicker contains tools for customizable date selection and group collaboration to streamline event planning.
1 UX Designer
Scheduling aperiodic events on Google Calendar is very difficult to do. An aperiodic event is an event that has an inconsistent pattern of days. When scheduling an event aperiodically, Google Calendar does not support a fast way to do this. In this case, our stakeholder, Craig, who is a teacher and basketball coach, has to frequently coordinate sporting events at various levels with distinct dates and frequencies.
In the image below, we can see that when creating a custom reccuring event in Google Calendar it must fall under a consistent pattern across multiple weeks. Scheduling an event on Mon,Wed,Fri on one week and then Tues,Thurs,Fri on 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.
I began this project with surveys and market research to clearly
define pain points and what role DatePicker will play in the event
planning process. 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 conducted a competitive
analysis with calendars products such as iCal, BAND, Checker Plus, and
more to get an idea of current solutions on the market regarding event
From the research I concluded that:
“I need a way to schedule my basketball
practices with custom reoccurences. On my current calendar I can't
customize it the way I need to.
-Craig, basketball coach and teacher
Using the research as a guideline, I identified a few problem statements and proposed solutions to address user needs. Our stakeholder, Craig, was used as our persona because he was a great representation of the needs that a user would have when event planning.
By determining where the pain points were in the event planning process and brainstorming solutions for them, I was able to determine the main features of DatePicker:
Keeping in mind the research findings and problem statements I began to ideate on layouts and navigation options.
We decided to move forward with a calendar layout that allow for a preview of events, does not vary radically from the google calendar design, and has a clearly defined area of clickability for date selection. Layout C also happens to be the same calendar style as Google Calendar, allowing for users familiarity of that calendar to transfer over.
Explored navigation options and placement of the primary call to action "Add event" button.
There was one step in the flow of creating a event that I was
particularly interested in testing because it is not present in Google
Calendar. The final step in the flow for scheduling an event is to
confirm the dates. Rather than make the user remember the event name
and times chosen in the previous screen, that information is place to
the confirmation button. I waited until the high fidelity phase to do
rapid user testing 5 participants for several iterations of a
The three main areas in question were:
Receiving feedback and observing people interact with all the iterations showed that:
With options C and E being very similar, I ended up moving foward with Option E because the circular pill shape provided more visual contrast amongst the square grid calendar shape.
Since DatePicker is solving a very niche pain point in Google Calendar, the functionality is much simpler than a comprehensive calendar app. Even though in terms of functionality it is simple, mapping out the flows was important to determine the necessary screens.
This simple interaction shows is the most important part of
DatePicker and solves the biggest user pain point. A "click and
pick" selector allows for fully customizable patterns of date
Simply click the dates in any frequency or pattern to schedule an event on that day.
I ran final usability testing with a high fidelity prototype amongst 7 participants that includedteachers 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.
After participants confirmed their event dates I realized that next
screen appears instantly without any confirmation feedback.
This animation of the event sliding in from below indicates that the event hassuccessfully been added without the need for a confirmation modal.
The process for selecting dates in DatePicker may be unfamiliar to some users who exclusively use Google Calendar. This tutorial provides a quick demonstration on how to select dates.
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.
Towards the end of the project our whole team agreed that the current logo could use some fresh paint. I incorporated the two primary colors of the app, along with scattered colored squares to represent the purpose and function of DatePicker. Incorporating both primary colors from the app into the logo creates a cohesive look and feel between the logo and app.
DatePicker was an learning experience to work on because it was a
great example on how sometimes a solution to a problem does not have
to be fancy or complex. It was great to receive positive feedback from
the stakeholder and see how such a frustrating problem in widely used
product could be resolved with a straightfoward solution.
Our team was able to get DatePicker into a deployable stage, but there has yet to be a planned release date for it onto the app store. Hopefully the next team that works on DatePicker can plan for a release because due to discussion with teachers and coaches DatePicker could provide a lot of value to their event planning experience.