in Product Management, UI, UX

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 below:

I have also recorded a video demonstrating the prototype 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.

Today Screen

Today Screen

As you can see, the design uses cards to represent meetings.

Today Next Card

Today Next Card

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.

Meeting Card

Meeting Card

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:

Meeting Options

Meeting Options

Meeting Options

Meeting Options

Actions card lets you perform quick actions such as Email Guests or Navigate or Join the conference call for example.

Actions Card

Actions Card

Actions are context 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.

Agenda Screen

Agenda Screen

Month Screen

As you swipe down while you are in the calendar, the app will reveal the month screen.

Month Screen

Month Screen

Meeting Information Screen

When you tap on a meeting card, the app will load the meeting information screen.

Meeting Information Screen

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.

Inbox Screen

Inbox Screen

To respond, just click on Respond.

Respond to the invite

Respond to the invite

The meeting invite card gives you the right amount of information required to respond to the meeting.

Meeting Invite Card

Meeting Invite Card

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!

*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).

Write a Comment

Comment

Time limit is exhausted. Please reload the CAPTCHA.

Webmentions

  • Reimagining Calendar App with Cards layout – Chaks' Corner

    […] 6/6: I have published a new blog post that includes new mockup designs and an interactive […]