TV Screen UI
Background
What is the product?
This UI was developed for the Webex Share which was an HDMI dongle that plugged into a TV and provided a room with Audio and Media content during a Webex meeting. When the device was not actively being used, it served as a room display with calendar and clock features.
What is the goal?
- Make use of existing room infrastructure (TV, speakers) for collaboration.
- Provide a lower cost meeting system by removing the video component of a meeting.
- Allow users to use any TV for an adhoc meeting.
Who is the user?
The users are knowledge workers who work from the office. This was designed for open plan offices with highly contested, bookable small meeting rooms.
Because companies that use Cisco equipment tend to use all Cisco equipment, it is likely that most users will be familiar with the RoomKit and Room System UI. Visitors who don’t have Webex installed and are unfamiliar with the UI are also expected to be supported.
What are the user’s goals?
- Determine if the room is available now or in the future
- See what time it is
- Connect to the screen
- Cast to the screen
- Start or join a meeting using the screen
Idle screen
There were two states to the idle screen – wake and half wake. When there was no one nearby (detected by ultrasound), the screen would be dark. This saves energy and provides a contrast to when the device wakes up. When a user running Webex walks close to the device, it wakes up and greets them by name. This is a delightful detail that worked well because it was so responsive.
Room name and number
It was very important for us to display the room name on the screen so that users could connect to the screen. Under the cast button on the Webex app, the user can see the names of all the rooms available to cast. The number was provided for the rarer case where the user wants to conference in the room. It isn’t used nearly as much as the name of the room so it is in a lighter color text to de-emphasize it.
Calendar
The most important information on the calendar is the current time, the room’s availability now, and the room’s future availability. We also wanted the time and the current availability to be glance-able from a distance. This was so users could quickly scan a row of rooms and see which ones were open.
We had a lot of conversations about what information should be displayed about a meeting. Sometimes meetings are about topics which are confidential to certain parts of an organization. Ultimately, we decided that the name of the meeting and the organizer should be displayed so that other users could contact the organizer if necessary.
Due to vertical space constraints, we aren’t able to show every meeting for an 8 hour workday. We felt that it was okay to only show the next few meetings. If users really want to see the whole schedule they can check the outlook calendar. Most users who are physically walking to the rooms to look and see which ones are open, are trying to find one that is open now- not in a few hours.
We went with a stacked design for the time. We thought it was more readable and neater than having the time on one line. We needed to add a leading 0 for hours under 10 to keep visual balance.
The color block for the current meeting block was meant to be a bold way to show availability at a distance. We chose blue to represent free instead of green because a green button in our design language is strongly associated with joining a meeting. The screen is not interactive and the user can’t push a button. We chose orange to represent busy/occupied, because at the time the design language had reserved orange to represent active meetings. Again, red was out due to connotations around ending or leaving a meeting.
Visual design
Since we are displaying to a TV, the UI is not interactive. There is no remote to control the UI. So it was important for the UI to appear as a display only.
In-meeting
During meetings, we show the participant list as the main activity on the screen. The active speaker has an animation that plays around their picture as they talk. When a new participant talks, they are animated to the top of the list. Mute states for participants are shown which can be helpful if participants know someone is trying to talk, but is muted.
We encourage users to share by showing them the icon they need to look for in their Webex app. We had other ideas for what could go in the right side panel like meeting agenda or active speaker insights, but those were sidelined for a simpler design.
When someone is sharing, the screen is completely taken over with the screen share with the active speaker overlaid on top. This was a difficult choice to choose what layout should be default since a user can only change the layout by using the Webex App from their laptop. Since the aspect ratio of the share and the screen is the same, we either have to scale down the share to have participants not overlap the content and have blank bars on the side or we need to overlay on top of the content.