DatePicker

The problem

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.

Where does Google Calendar go wrong?

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.

Interviews & 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 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 planning.

From the research I concluded that:

1. Majority of teachers from our sample exclusively use Google Calendars
2. DatePicker will not be built to replace Google Calendar, but to complement it
3. There is no available solution on the market for this specific problem space

Design Requirements

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:

1. Choose dates for event in any pattern of frequency
2. Allow collaboration by assigning groups to an event
3. Provide push notifications for event changes to group members
4. Transfer events made on DatePicker to users connected Google account

Ideating

Keeping in mind the research findings and problem statements I began to ideate on layouts and navigation options.

Exploring calendar layouts

Also the grid format is what Google Calendar uses, which means uers do not have to get used to I 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.

Navigation options

Explored navigation options and placement of the primary call to action "Add event" button.

Confirming dates

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 confirmation button.

The three main areas in question were:

• Button clarity
• Where to place the button
• Shape of container for the info and button

Receiving feedback and observing people interact with all the iterations showed that:

• Option A's button resulted in awkward positions for scrolling through the calendar and accidental clicks
• The buttons for options B and D did not immediately strike people as something that was clickable
• Options C and E provided a nice balance between location, touch area size for easy clickability, and button clarity

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.

Key flow

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.

Improving interaction

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.

Icon redesign

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.

Wrapping Up

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.