Reimagining Calendar App with Cards
My experiment of reimagining the calendar app with cards user interface.
Recently I wrote about how cards user interface is slowly becoming the de-facto design for mobile apps.
I thought why not give this cards design a spin. So, I picked to design a calendar app that used the cards design. The goal is to see whether we could re-imagine calendar app with cards without losing the need for users to easily track their daily schedule or accept invites and be productive managing their day.
I initially started with Balsamiq mockups and got some good feedback on the design. Overall feedback was not that good — I saw people were not able to get what I was trying to do with the wireframe mockup. So, I decided to build an interactive prototype with good design elements.
I used Sketch to build the mockups and Marvel App to build the interactive prototype.
You can try out the prototype here (iPhone recommended for best experience) or watch the demo below:
While I am a product manager, I am also passionate about UX/UI. While my design skills may not be perfect, I spend considerable amount of time practicing UX/UI. Feel free to leave a comment on what you think about the design and what can be improved to make it better.
If you like what you read/see, and interested in taking the next step — building the calendar app — with the same design, please contact me. I am more than happy to discuss further.
Without further adieu, below is the design:
Today Screen
The app starts with letting you know whats next in your schedule.
As you can see, the design uses cards to represent meetings.
The next immediate meeting is well highlighted with information such as: subject of the meeting, time, location, attendees, weather information for that particular meeting etc., — while other meeting cards contain the basic information required.
Just like in Google Now cards, the meeting cards also have the vertical hamburger button (Yep, hamburger button!) that will allow you to manipulate any options available, such as:
Actions card lets you perform quick actions such as Email Guests or Navigate or Join the conference call for example.
Think of these actions as context aware or meeting aware so they can provide you with the right actions when you need them.
Agenda Screen
As you scroll up the Today Screen, you will scroll to view your list of other meetings for the day.
Month Screen
As you swipe down while you are in the calendar, the app will reveal the month screen.
Meeting Information Screen
When you tap on a meeting card, the app will load the meeting information screen.
The goal is to not just use cards but also make it easier so you can grasp and focus on the information needed as quickly as possible in a glance.
Inbox Screen
Inbox screen holds all the pending invites in one place.
The meeting invite card gives you the right amount of information required to respond to the meeting.
To respond, just click on Respond.
Summary
The more I work with cards, the more I love them! I feel the calendar app looks much cleaner with cards interface. My prototype does not cover all the scenarios, but I think it shows how useful cards design can be to represent information to users.
Don’t forget to let me know what you think about the design!
You can follow me in twitter @chakkaradeep and my blog at Chaks’ Corner.
*User photos used in the mockups are downloaded from uiFaces website. These awesome users have given their consent to be used on live websites (not just mockups).
