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
Interaction Design, prototyping, user research - 2016
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
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
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
Meet crosses 6 platforms— ensuring consistency across all was paramount
Locks a participant to the main screen for thier computer only
Silences the audio fof the respective participant for the entire meeting
Removing kicks people out of the meeting after a confirmation dialog
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.
Users need a way to view presentations in full-screen
Users need a way to view presentations
in full-screen
Users must be able to access links in chat
Users want to be able to see facial expressions and body language
more clearly
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
In multitasking view, users wanted access to their meeting details, participant information & chat
Breaks visual pattern of who is in
the meeting and movement splits attention between you and who is talking - on the “mainstage”
Visually cluttered & overwhelming
Not enough priority on speaker
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.
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.
Controls, tabs & filmstrip open
First appears when you rotate your phone into landscape
Self-view only
Self-view can be swiped away to provide an unobstructed view on the presentation or speaker
Filmstrip and tabs visible
Tapping on the self-view opens &
closes the filmstrip and brigns back the tabs at the top
Next I started exploring icon options for pinning, muting,
& removing participants
Next I started exploring icon options for pinning, muting, & removing participants
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
Feels like one button and is too intrusive, overlaps with peoples faces
Vertical alignment takes up less video space but it is still unclear who the actions will affect
Keeping the vertical alignment & changing hte button shapes gave context to the user & stayed out of their way
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.
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.
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
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.
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.
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.
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.
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.
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