CLIENT: Google

TIMELINE: August 2020 - current

TEAM: People & Sharing

ROLE: UX designer

TOOLS: Figma

Case study

On a team responsible for the core experiences across Google, I worked on a set of universal components that are central to person views across some of Google’s top apps (ex. Gmail, Calendar, Google Docs) and are used by 200+ Million customers.

Internally referred to as People Primitives, they are People Card (appearing when you hover over someone in a Web app), People Sheet iOS and People Sheet Android (appearing when you tap on a person on mobile), and People Companion (appearing as a sidebar in apps like Gmail).

My main UX design responsibilities included researching user needs for two personas (enterprise and consumer users), ideating, envisioning, and building digital experiences that are consistent across platforms.

Problem 1: Cross-app linking on the Web

One of the problems we solved for the People & Sharing surfaces was cross-linking and cross-alignment. We’ve been getting consistent user complaints in user research sessions and submitted user feedback that people want to be able to edit an existing contact and add a person to contacts. This feedback was consistent across People Card, People Companion, and People Sheet. The existing UIs for the mobile and Web didn’t accommodate for these user needs, which resulted in broken user journeys and unhelpful poor overall user experience.

It took customers at least 3 clicks to edit a contact from People Card, and we wanted to help users do it with 1 click.

At the same time, one of our products that highlight the most complete contact representation - Web Contacts - was getting redesigned. It was a great potential central spot for the People Primitives to link to.

Solution

By the time I received the request for designing the Edit/Add feature for People Card and People Companion, I was already familiar with the concept. We already had a similar Add to contacts feature in People Companion. Also, a month prior to that I started design explorations for an Add to contacts feature on People Sheet Android.

The mobile explorations were not set in stone, however. I created additional explorations for the Edit/Add to contacts icon placement for People Card and People Companion. After analyzing the cons and pros of each design version, the team approved the placement of the Edit/Add to contacts icon and all related flows and edge cases. All of us agreed that the upper right corner placement would be consistent with the current similar implementation in Web Companion and semi-final explorations for the People Sheet iOS.

Problem 2: Cross-app linking on the mobile

A similar problem was observed in our mobile flows as well in People Primitives - People Sheet Android and People Sheet iOS. People repeatedly reported that they want to be able to add to contacts and edit a contact. Some potential locations to link were Android Contacts and Web Contacts for these two surfaces respectively.

Solution

Our UX design team worked very closely with the product manager and the engineering team to brainstorm solutions for the Add to contacts feature. For People Sheet Android, we went for the solution that allowed people to create a new contact without leaving the screen. It was done by integrating the Add to contacts bottom sheet from the Android Contacts app. After adding a contact, people could easily edit it in Android Contacts by tapping on the Edit button.

In People Sheet iOS, the situation was a bit different. The first step in cross-app linking was allowing people to view more contact information in Web Contacts. This was done by designing a More Info button below the contact details section that takes to Web Contacts / View. Next, we enabled people to edit their own contact information in Google Account, which had been requested by the People Sheet iOS users.

Project takeaways

This project was a delight to work on because it involved cross-platform team collaboration across six different teams at Google. I enjoyed organizing the discussions, facilitating decision making, connecting the engineering teams in a pursuit of product alignment and making user journeys more sustainable and efficient.

Designing at scale came with challenges and constraints because the feature spanned several timelines and platforms. It was crucial to stay on top of the internal launch processes and requirements for each platform. Also, for some platforms the feature came hand in hand with upcoming product changes, so we had to design with these future changes in mind.

Special thank you to my manager Aaron Reiner who worked closely with me on this project and helping with the design strategy focused on alignment, consistency, and mindful product design.