Katie Hudak-Kay, Katie Hudak, Google Designer, Material Design, Seattle Designer, Interaction Design
Google Meet - Interaction Designer

HANGOUTS MEET

To comply with NDA, I have omitted & obfuscated confidential information in this case study. All info in this case study  is my own & doesn’t necessarily reflect the views of Google. For confidentiality reasons I have also omitted the actual values for metrics

To comply with NDA, I have omitted & obfuscated confidential information in this case study. All info in this case study is my own & doesn’t necessarily reflect the views of Google. For confidentiality reasons I have also omitted the actual values for metrics

PROJECT TL;DR

PROBLEM

Launch was blocked because Meet was available in Landscape mode and portait mode wasn’t up par.

A mobile landscape design and roll-out plan was needed in order for Material Design to approve public launch.

ACTION

Led a design audit of the current mobile build

Designed flows based on user testing & successfully evangelized for the best experience with stakeholders

Built prototype for testing

Worked with Eng to optimize use of existing code

RESULT

Material Design sign-off for public launch

Designs that fit user’s mental models — immersive and multitasking views

Externally tested flows that would transition seamlessly onto tablet when supported

PRODUCT OVERVIEW

PRODUCT OVERVIEW

meeting list

LANDING PAGE

The landing page is where the meeting list lives. When you're signed into your account, all meetings on you calendar appear here. You join meetings from this page and can also create a new one as needed

green room

GREEN ROOM

The Green Room serves as an intermediate step on your computer, it doesn't appear in conference rooms. 

It's a hair check and helps provide users with a preview of what folks will see on the other end. If there is any private information around you, the Green Room gives you a chance to remove it. 

actions

PINNING, MUTING & REMOVING

Pinning locks a participant to the main screen for thier computer only

Muting silences the audio fof the respective participant for the entire meeting

Removing Kicks people out of the meeting after a confirmation dialog 

Meet crosses six platforms. It was critical that designs felt cohesive across all surfaces:

PLATFORMS

Meet crosses six platforms. It was critical that designs felt cohesive across all surfaces:

  • Web
  • TV
  • Mimo
  • iOS
  • Android
  • Buddy (touchscreen display)
Katie Hudak, Interaction Design, UX Design

INITIAL RESEARCH

INITIAL RESEARCH

I asked myself why users might need to take a meeting in on mobile in landscape mode. I began by digesting past user feedback and understanding all aspects of the user needs. I established three key use cases.

Katie Hudak, Designer, Google Designer, Material Design

Users need a way to view presentations in full-screen

Users need a way to view presentations
in full-screen

Katie Hudak, Designer, UX Design

Users must be able to access links in chat

Katie Hudak, Designer, Interaction design, Google Designer

Users want to be able to see facial expressions and body language
more clearly

KEY FINDING

Enterprise products are high-stakes for users

Enterprise products are high-stakes for users

Preliminary research confirmed that people knew how to use Meet on mobile but expressed confusion around the drawer in the people list.

People were unsure if the icons in the drawer affected the people above or below them and wouldn’t feel comfortable interacting with them.

This echosed past research that found users are less likely to explore enterprise apps to figure things out becasue the stakes are higher.

I like to say that you can accidentally hang up on your mother, but you never want to hang up on your boss.

It became clear that there were two differnt needs and models that users had for their mobile meetings:

  1. Multitasking view
  2. Immersive view
Katie Hudak, Interaction Designer

People were unsure about who the icons in the drawer affected

Designing the Multitasking View

In multitasking view, users wanted access to meeting details, participant info & chat

I start out my design process with sketches to explore a wide variety of options and little overhead cost.

As I started sketching I reflected upon the intitial research to see if I could increase user understanding of the icons in the drawer and who they affected.

SKETCHES THAT DIDN'T WORK

Katie Hudak, UX Designer, Designer

Self-view pulled out

Why: breaks visual pattern of who is in the meeting and movement splits attention between you and who is talking - on the “mainstage”

Katie Hudak, Designer, UX Designer, Interaction Designer

Exposed Icons

Why: visually cluttered & overwhelming

split-ms

Split main-stage

Why: Not enough priority on speaker. Could work on other platforms that Meet touches but mobile is too small.

THE SOLUTION

multi-task-solution

I created a design that added more context for the user by moving the actions that dropped down to an inline drawer. This let people know who they were pinning, muting, and removing.

Designing the Immersive View

Designing the
Immersive View

In the Immersive View, people wanted to maximize the video meeting space and minimize
on-screen distractions

In the Immersive View, people wanted to maximize the video meeting space and minimize on-screen distractions

Because this was a very different use case, I made a list of what I would need to include within the immersive view.

I stripped everything back and added features back in while maintaining parity and giving users an easy transition between each mode.

After sketching and refining there were 3 main views:

3 MAIN VIEWS

Katie Hudak, Designer, UX Designer, Interaction Design

Controls, tabs & filmstrip open

First appears when you rotate your phone into landscape

Katie Hudak, Interaction Designer Google Designer, UX Design

Self-view only

Self-view can be swiped away to provide an unobstructed view on the presentation or speaker

Katie Hudak, Interaction Designer, UX Designer

Filmstrip and tabs visible

Tapping on the self-view opens &
closes the filmstrip and brigns back the tabs at the top

ACTIONS IN IMMERSIVE VIEW

Next I started exploring icon options for pinning, muting,
& removing participants

Next I started exploring icon options for pinning, muting, & removing participants

Katie Hudak, Interaction Designer, UX Designer

Icons are too light against the background, even on an actual video feed

Icons are too light against the background, even on an actual video feed

Katie Hudak, Interaction Designer, UX Designer

Feels like one button and is too intrusive, overlaps with peoples faces

Katie Hudak, Interaction Designer, UX Designer

Vertical alignment takes up less video space but it is still unclear who the actions will affect

THE DECISION

Keeping the vertical alignment and changing hte button shapes gave context to the user and stayed out of their way

NAVIGATING BETWEEN IMMERSIVE VIEW AND MULTITASKING VIEW

interaction-between

LOCALIZATION & PRIVACY NEEDS

LOCALIZATION & PRIVACY NEEDS

Katie Hudak, Interaction Designer, UX Designer, Google Designer

Localization was tricky on mobile since the tabs were titled
with words. 

I implemented icons on mobile which resulted in a better experience across languages. This brought us closer to exact parity with TV & Web platforms which also used icons.



Localization was tricky on mobile since the tabs were titled with words. 

I implemented icons on mobile which resulted in a better experience across languages. This brought us closer to exact parity with TV & Web platforms which also used icons.



Katie Hudak, Interaction Designer, UX Designer

When the user is on the chat or details tab, their self-view appears outside of the right panel. It can be dismissed by swiping and gives users a less interrupted view of the mainstage while meeting Legal & Privacy requirements.

When the user is on the chat or details tab, their self-view appears outside of the right panel. It can be dismissed by swiping and gives users a less interrupted view of the mainstage while meeting Legal & Privacy requirements.

USER TESTING

We went through two rounds of testing and both tured out well for the proposed designs.

I built a prototype to test with external users and worked closely with research. We used Concurrent Think Aloud Testing to understand how users felt about the new designs

Consistency between the two views was key.

Katie Hudak, Interaction Designer, UX Designer
Katie Hudak, Interaction Design, UX Designer

“This is actually really nice. There are still the people on the side & I like that there are three buttons at the top — it’s the same as before”

"I would tell them we should get away from Webex. The features here are nice!"

"I would tell them we should get away from Webex. The features here are nice!"

Katie Hudak, Interaction Design, UX Designer, Google Designer

We also tested to see how people would react to an atypical use of the caret. 

Users didn't notice that it was pointing right and opened to the left.

They thought it made sense to have it reaveal icons.

I worked directly with Google Material team to establish approval for this new caret pattern.

Material implemented my caret pattern as standard across Google

PHASED ROLLOUT

BALANCING BUSINESS, ENGINEERING, & USER NEEDS

BALANCING BUSINESS, ENGINEERING,
& USER NEEDS

Through close conversation with engineers and product managers, I knew that designing and building out the updated mobile experience would be challenging before our public launch date.

With that in mind, I established a plan so that Meet would provide users with a seamless experience and ensure legal and privacy needs were met while engineers built out the full mobile design.

Katie Hudak, Interaction Designer, UX Designer, Google Designer

First we launched a partial immersive view, which would allow users to see the filmstrip and their self-view. If they engaged with a participant, it would open into the multitasking view.

The multi-tasking view had little overhead because it simply moved the mainstage video to the left of the tabs.

filmstrip-only-controls

In a fast-follow release after our public launch, we prioritized adding in pinning muting, and removing into the immersive view. 

This gave users the functionality they expected from the portait & multitasking views and maintained the lighter weight experience of the immersive view.

Katie Hudak, Interaction Design, UX Designer

The third and final release rolled out the updated drawer which increased user confidence in who they were pinning, muting, and removing. 

The phased roll-out plan presented to key stakeholders allowed the entire product to launch publicly, on schedule.