Portfolio of Suvo Ray
Design, Art, Type and everything in between
In 2018 we went through a major revamp of the Calendar. From the Left-right model to a full-fledge calendar that can scale will all the required functionality of the M365 calendar.
One of the primary responsibilities for me was to do the visual design and make a scalable framework for Teams calendar. In this project, I will discuss the visual design aspect of Teams calendar.
As a product we want customers to have effective collaboration but also give back time to them. We want customers to navigate and scan the calendar surface quickly to consume and create calendar events according to their needs. The entire visual design is based on these principles of quick consumption and the creation of calendar events.
The most primary and basic component in the calendar is event cards. An event card gets created when a user invites someone to an event through the calendar. A user can also block his/ her own calendar through an event card.
I have considered 1 Hour ( 60 mins ) to be the standard size of an event card and according to that, I have defined the rest of the cards (15mins, 30mins, 45 mins, >15mins, or custom time).
The architecture of the Event card has 6 major components
1. Show as bar
2. Event name
3. Organiser name
4. Location
5. Charm icons
6. Event card background
Show as bar represents time and triaging aspects of the event cards.
It represents if the meeting is accepted, tentative or free. Apart from that the height of it bar also represents the time of the event. By default, the color of the show as is brand color but it changes as customers apply category colors to any particular events.
Customer as Attendee:
By default, all meeting in which a customer is invited is un-triaged. Only when a customer RSVP the event, the show as bar changes its state accordingly. This helps the customer in quick scanning and triaging their calendar events.
Customer as organiser:
When a customer creates an event as an organiser the meeting gets created as accepted in their own calendar.
Free:
There are 2 ways how a free event get's created.
If an event gets canceled, the show as bar changes to free state. It no longer blocks time in an attendees calendar.
While creating an event if an organiser un-checks the request-response option. These events are created keeping in mind that it's optional for invitees to triage or attend the event.
e.g: While going on holidays most customers create All day events to inform the team about their unavailability. In this scenario, the event created is for the information purposes for the invitees and not for someone to attend the event.
Time:
15 min's is the smallest height of the card we show in Teams calendar. But customers can create meetings less than 15 mins also. eg: any meeting from 1-14 mins. The length of the show as bar represents that time duration of the meetings created by customers.
It represents information or activity of the event. For example, the below icon represents that it’s a recurring meeting and channel meeting. There are several information and activities that can come in the charm icon but the most common are recurring channel meetings and live events.
The background represents triaged, un-triaged and live state of the event card. In terms of visual design, the background of the un-triaged meeting has a less saturated shade than triaged meetings. In the live state, it changes to a dark shade of purple (Changes according to the category applied). The dark purple helps in quick scanning and giving a clear indication to the customer that the event is live.
Join button: The join button appears in an event card only before 15mins of the start time of the event and stays there till the event is over.
The first click on the event card opens the meeting peek (next section) and the second click takes the customer to meeting details.
The event cards have both hover and keyboard interactions. As feedback during hover, we change the color and the mouse cursor for feedback.
It is the preview of the meeting details. The idea is to give customers a glance at the meeting details without going inside the meeting details. This helps in less context switching and more informed decision about going into the meeting details.
The controls of the meeting details change according to the events.
Private meeting: Join, RSVP status
Channel meeting: Join, Add to calendar
Offline event: RSVP status
Ongoing meeting: The header changes to live color with the information of how long the meeting is live.
Apart from the default light theme we also design for dark and high contrast themes. Below are the mocks for that. Accessibility of color and keyboard is always considered from the start of visual design. All content in the default and dark theme passes the contrast ratio of 4.5:1 except for disabled content. The same ratio is 14:1 for the high contrast them. Keyboard and screenreader specs have also been made for all this surface. I will discuss accessibility and how we approach it in some other project.
I know in general I am supposed to talk about numbers but on a personal level that was never my goal while working on this project. The visual enhancement was done to actually improve the user experience and make Teams calendar more delightful for customers. Microsoft Teams currently have 250 million monthly active customers and 145 million daily active customers, who complete their day to day work using Teams.
UX designer: Nishtha Pangle, Adithya Jayan, Prerna Pradeep, UX lead: Chad Voss
Visual design: Suvo Ray, Creative director: Colin Day
UX engineer: Vitthal Roonwal
Icons: Fluent Icons
Reviewer: Mark Swift, Jeremy Brown, Daisy Geng and many others
