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

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

Overview

Interaction Design, prototyping, user research - 2016

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

Getting to know Google Meet

Meet crosses 6 platforms— ensuring consistency across all was paramount

Katie Hudak, Interaction Design, UX Design


Web

TV

Mimo

iOS

Android

Buddy 

Meeting participant capabilities

keep
Pinning

Locks a participant to the main screen for thier computer only 

mic_off
Muting

Silences the audio fof the respective participant for the entire meeting

remove_circle
Removing

Removing kicks people out of the meeting after a confirmation dialog 

Initial research

I began by digesting previous research done on Meet for web & TV platforms. My goal was to understand all aspects of our user's needs. From this research, 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 echoed past research that found users are less likely to explore enterprise apps to figure things out becasue the stakes are higher

Personal Design Motto

You can accidentally hang up on your Mom, but you never want to hang up on your boss

Enterprise products are high-stakes for users

Katie Hudak, Interaction Designer

It was clear that users had 2 different mental models for their mobile meetings: 

Multitasking view & Immersive View

Designing the Multitasking view

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

What didn't work

Katie Hudak, UX Designer, Designer
Self-view pulled out

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

Visually cluttered & overwhelming

split-ms
Split main-stage

Not enough priority on speaker

While sketching, I reflected upon the intitial research to see if I could increase understanding of the drawer & who they affected

The 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.

multi-task-solution

Designing the Immersive View

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

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

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

After sketching there were 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

Google Meet UX Design

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

Meet UX Design

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

actions-three-buttons

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

The Decision

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

Google Meet

Navigating between views

interaction-between

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 & both turned out well for the proposed designs.

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

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

Material implemented my
caret pattern as standard across Google

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.

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. 

Review

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

Let's work together! 🤓

© Katie Hudak-Kay 2020