Microsoft Teams

Teams Panels

Overview

As Microsoft Teams is expanding their portfolio offerings, the product team saw it fit to add a scheduling device to Teams devices. Along with Microsoft Teams Rooms (MTR), Surface Hub and more, Teams Panels will be the new addition. This new product category will include a scheduling panel that will help users find an available conference room to book ad-hoc meetings. Additionally, it will include third party extensions to host other apps on it.

Goal

Deliver design strategies to implement in a new scheduling device to help users book an ad-hoc meeting for conference rooms.

How it works

The Teams Panel will be a touch display mounted outside of conference rooms. Users will be able to book ad-hoc meetings and view the room's availability at a glance. In addition, the panel will have LED lights on the sides to indicate availability.

User research

Customer problems to solve

"I need to be able to tell a room's availability at a glance and confirm the location, so I can book an ad-hoc meeting."

Teams Panels was created to solve common customer problems while trying to book a conference room for an ad-hoc meeting. User research was conducted to identify pain points while trying to use scheduling panels. The team and I came up with questions to ask participants to understand frustrations and what they think could be improved. Participants included people who worked in corporate offices or environments where this type of product is used. Some pain points included a slow booking experience, not knowing the room's availability right away, not knowing which conference room they are standing outside of, and an overall user experience that wasn't user friendly. Users need a way to tell a room's availability and location so they can book an ad-hoc meeting.

Teams Panel MVP

To launch the first version of Teams Panels, the product will include:

Status/availability
Reserve flow to book ad-hoc meetings
Custom app extension (Nearby Rooms) to book available rooms nearby
Timeline calendar for upcoming meetings

Design process

Competitive research

Key features

Red, green, and yellow are used to show room's availability
Calendars are incorporated in the main screen
Background and theme are consistent throughout the design and images
Meeting name is most prominent
Check-in/start meeting feature
Extend meeting feature

Information architecture

Challenge

The primary challenge in designing this scheduling panel was figuring out how to display the upcoming calendar. In addition to the most important information (room availability/location), we wanted to implement an upcoming calendar for future meetings and time slots that may be available for future booking. My team and I designed multiple iterations and landed on a design we felt would be the best user experience and that aligned with the Teams brand and devices.

First iteration

Timeline calendar separated by the hour
Time stamp to show current time
Scrollable so users can see upcoming meetings
Too cluttered and showed too much information

Second iteration

Simplified version of the calendar
Each individual timeslot has the start and end time of the meeting to make it easier to read
Still seemed like cognitive overload and needed to be simpler

Final Design

After receiving feedback from stakeholders, I needed to design a simplified version and align with other Teams devices. This significantly impacted the overall look and experience of the panels. The navigation system, timeline calendar, and main meeting tile were updated.

Low fidelity

Time and date
Conference room name
Navigation buttons
Meeting information and availability

High fidelity

Main default display
Bold conference room name
Bold meeting information and availability
Up next calendar to view upcoming meetings
Reserve button to book meeting
Settings gear to configure app, background wallpaper, and LED lights

Visual Hierarchy

As the user's most important concern is figuring out where they are and if a room is available, I want to bring attention to the room name and meeting title. The visual hierarchy clearly emphasizes those elements in the design.

Reserve Flow

Usability testing

Users were given the panel to use and a survey to fill out. The goal was to find out if we reached our intended outcome and find any usability issues. We asked how easy it was to use features and to stack rank the importance of them. Results from the survey helped inform design decisions for future releases of Teams Panels. Based on this usability testing, we will be adding additional features such as future booking, ending meetings, and extending meetings.

Overall, most users found that the room booking experience was intuitive and easy to use. 63% of users said that it was very easy to identify that a conference room was available to book from the panel.

When asked what features users think are missing that can improve the product, many stated that they wanted more advanced room booking features (being able to book future meetings, canceling meetings, end meetings, extending reservation times). We then asked users to stack rank these features by importance to them.

Things I've learned

The nature of the product requires bright colors (green, red, yellow) to show the availability status as all competitors in the market do. The problem is that the colors don't align with the Teams branding and aesthetic. It was challenging coming up with a design that could incorporate the available color (green) and still look aesthetically pleasing. As this is an ongoing challenge, my team and I are still working to see how we can improve the look without compromising the ability to be able to tell availability at a glance. Additionally, as this is a new product added to the Teams devices portfolio, I was able to design it from start to finish. I learned how to pivot, and make adjustments when needed in order to align with the other devices.