Reimagining Calendar App with Cards layout

Building a calendar app mockup using Google’s cards template.

6 min readMay 22, 2014

Earlier I wrote why I love cards layout and was thinking what if we could build a calendar app that used this cards layout.

A Quick Survey

I did send out a quick survey to few to find out how people use calendar app and below are the raw responses:

You just woke up and opened your calendar app. What is the first thing you want to see/know from your calendar?

To be honest, I don’t use my calendar app that much, but I would want to know what is coming up first in my day, and then a brief list of what is after so I can start to plan out the day.
What events I have today, grouped by morning, afternoon and night and color coded to business and personal What’s on today’s agenda.
Tasks & Events. What’s happening today and a calendar view of the month that shows dots or something on days that have an event What I have that day.
When is my first meeting? The day, and what I have t do that day (urgent tasks). Maybe a positive quote/image. I prefer to see the zoomed out monthly view

How many times in a day do you check your schedule?

maybe 2-3 times
Five or so
Depends on how busy my day is, if I have a lot going on I’ll be checking more frequently than if I have nothing to do that day. I’ll also check a lot more if it’s easy to get directions/message attendees/relevant messages and emails are displayed/etc
5 — it’s surprisingly difficult. I don’t have a good app that I use in my iphone, ipad and mac. would like one
3-5

How do you know there is a meeting conflict in your schedule and how will you improve?

i realise late
no idea how to improve it
1) graphical overlap; 2) alert.
Unprove by checking on iPhone before promising availability to anyone.
Google Calendar is pretty good at visually representing your schedule. You’ll know you have conflicts because you’ll see overlapping blocks.
Visually looking at my calender and then trying to reschedule colors overlap If the days overlap? Then I’ll reschedule one of the events? I’m a bit unclear what constitutes a conflict here. I only know their is a meeting conflict because I manually input most things, or if I am using a google calendar, it will warn me that there is another event at that time. I think the warning is a necessity, because I absolutely hate it when you accidentally schedule two things at once. I think about it.

How do you let attendees know if you are running late for a meeting and how will you improve?

Usually a text.
email, i can’t think of a better way to do it, as my cal is a supplement to email not the other way round maybe if i used cal, a way to click on person’s name and it wouould say preset messges — eg. 5 mins, 10 mins late etc Email Send an email.
I think Cal, from the makers of Any.do have some great exchange calendar that allows you to send notices. Ideally I would want something that discreetly pops up in a notification on the screen of those I want to see it. Quick text.
I’m rarely late though.
text I call or email.
Don’t know how to improve. Text/email/phone

What is the task you frequently perform in your calendar?

Adding events/tasks.
Prioritizing, Checking for attendees’ available slots, writing a quick agenda and notes for meeting pre-work, rescheduling, adding attachments for attendee pre-work.
create meetings / eventsDirections, ideally with a calendar view built in so I don’t need to swap apps. I used to use a calendar on ios called tempo that would show me relevant emails and messages that I used frequently as well.
create meetings
Organizing my week adding meetings — i use fantastical on the mac, and their nlp is fantastic. the main reason i use it create events for meetings, block out the time, and put in address information so that Google Now will know where I have to go.

Based on the data, I decided to focus on showing what’s important and letting users perform the key actions necessary on a meeting. The mockups below does not include any design for adding, editing or deleting events.

After quickly mocking few designs in Balsamiq, below is what I came up with.

If you like my design and interested in building a calendar app with cards layout, please contact me. I am more than happy to discuss further.

Calendar Views

The app basically has three views — Today, Agenda and Month

Today

Today revolves around:

— Your next immediate meeting and the one after.

— Focus being on what’s next.

— Some key information like date, month and current weather.

As you can see, you get options to navigate or tell you are running late. These actions are dynamic and will hold whatever actions are applicable to the meeting.

Here is another mockup of Today view with an option to join the conference call, which comes up when you have a conference call setup in the meeting:

Today View with no more meetings for the day

And below your options for running late:

Agenda

Agenda view, as it names goes displays your agenda for today.

It also displays any conflicts you might have:

Tapping on a meeting will take you to the meeting info:

Just like in Google Now cards, you tap on the top right dots for options.

Month

Month view will allow you view your schedule by month and day. Below is the default month view with a calendar and top two events for that selected day in that month (by default, Today).