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 component/ framework for Teams calendar. In this project, I will discuss the visual design aspect of Teams calendar.
Calendar lets customers create and consume meetings and helps efficient management of time. Teams calendar helps customers to see events of a particular date or a date range. It also helps users to create events and invite others to have an online meeting.
Currently, the calendar defaults to the current work-week but customers can manually select different layouts. In teams, we currently have 4 different types of views. The science of event creation and consumption remains the same in all the different views but according to the density of the events, customers can prefer different views.
Calendar [view =”week”]
Calendar [view =”work week”]
Calendar [view =”day”]
Calendar [view =”agenda”]
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.
In terms of architecture Teams have 3 major components, app bar (fixed to left) Power bar (Fixed to top), and then comes the canvas. Everything that is inside the apps is present in apps control, in simple terms all the apps load inside the canvas.
Inside the canvas, we have defined the structure of the app in the following ways.
1. App header: Fixed to the top, consist of the app name on the left and primary action on the right. The decision of keeping the primary action on the left is because the app header will remain fixed on-screen while scrolling.
2. Action bar: Fixed right below app header. The action bar consists of actions that can be taken in the calendar surface. That includes date picker, navigation between different dates, go to today, and view picker.
3. Calendar surface: The surface comes right below the action bar and is scrollable in nature. Here is where we find all the dates, events, and times.
The surface is where the user will be able to grab a quick view of their entire calendar. There are multiple views of the calendar surface, currently, we have only 3 (week, workweek, day, and agenda) in the team's calendar. According to the preference and the density of the events, customers might choose to have different surfaces. Currently, for a new user, we default the view to week view.
The x-axis represents the date and the y-axis represents the time in a week, workweek, and day view. This is subjected to changes for the different views of the calendar. The vertical height is designed in a way that at a single glance customer will be able to consume at least 8 hours on a 1366×768 screen.
The red line on the surface is the current time marker. It helps customers to scan the surface quickly to understand the upcoming events. The visual design of the current time is divided into two parts the solid line represents the current time marker today and the dotted line represents it for any other day.
The surface is also where calendar event cards live. There is 6 part in the surface which represents 4 different aspects of time and date.
1. Today
2. Day
3. Working hour
4. Non-working hour
5. Today + non-working hour
6. Today + working hour
Width & height:
The height of each slot remains the same irrespective of the screen size, It’s 88 px event slots and 60 px for date header. The height of the date header follows the similar height of the app header. The height of the event slots is calculated using 15mins card as a reference.
Height of event slot = (4x15min event card height) + margin around each event card.
The width of all the slots is dynamic according to the screen size and different views. The entire calendar is designed to be responsive for all breakpoints.
The surface has hover and keyboard interactions. We have introduced hover interaction in the surface because by clicking on the surface we can create calendar events. The same action can be achieved through keyboard navigation on the surface.
There are multiple views of the calendar surface, currently, we have only 3 (week, work-week, day, and agenda) in the team's calendar. According to the preference and the density of the events, customers might choose to have different surfaces. Currently, for a new customer, we default the view to week view.
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, 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, Adithya Jayan, Prerna Pradeep, Kanika Tibrewala and many others
