Microsoft Teams

Teams Panels

title just device

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.

Goal device image

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.

Conference room image

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

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

 

competitor devices

Information architecture

Scheduling panel flow chart

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
First iteration

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
Second iteration

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
low fidelity

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
High Fidelity

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

Reserve flow 1
reserve flow 2
reserve flow 3
reserve flow 4
reserve flow 5
reserve flow 6
reserve flow 7
reserve flow 8

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.

Screen Shot 2021-04-13 at 6.16.49 PM

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.

Screen Shot 2021-05-25 at 2.15.01 PM

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.

Selected Works

MicrosoftCase Study

© Copyright 2021 All Rights Reserved. by Emani Hill