CLIENT: Google

TIMELINE: September 2020 - current

TEAM: People & Sharing

ROLE: UX designer

TOOLS: Figma

Case study

As a UX designer in the People & Sharing team at Google, I designed and managed the process of aligning our multiple surfaces that are central to person views. Two of them were for mobile (Android Contacts and People Sheet iOS), and two for the web (Web Contacts and Web Companion). 

These products were designed at different times, built by different engineering and product management teams, and had significantly different UI design. A substantial part of my job was to coordinate and harmonize the redesign of the UI for each of these four products. I also translated two products into the new Material design system known as Material You.

Problems & project goals

The goal of this complex project was to address the following problems:

1. The UI design of People & Sharing surfaces was different, which was especially noticeable on the Web when navigating from Web Companion to Web Contacts. Web Companion used card components, while Web Contacts placed all content in a single card, which resembled a large pop-up. Besides this misaligned design, the card itself forced users into unnecessary scrolling. 

2. It was impossible for the engineering team to reuse the same Web and mobile components across all of our surfaces. This significantly slowed down the development process and product alignment.

3. The value of each content piece for each product has previously not been discussed and researched coherently among the teams. It was time to collect relevant analytics, run user research, and connect the dots.

4. Android Contacts app and People Sheet Android needed to be redesigned with the new Material Next specs.

My goal was to create a unified design system that would align user experience in Android Contacts, People Sheet iOS, and Web Contacts.

This system will enable the engineering team to reuse the same components and save time. Like most products at Google, the overall goal was to drive user engagement for all these products.

Design thinking

I started this design project with detailed planning, in which I included product, engineering, and design teams.

The first pillar was to address UX and content changes. Each of our surfaces are on a mission to connect people and facilitate fruitful relationships in different contexts. For example, Android Contacts is an independent app bundled with Google-branded phones (ex. Pixels) and it was designed as the one place to view contact details. People Sheet Android and iOS are the so-called People Primitives - a set of universal components that are central to person views across some of Google’s top apps like Gmail, Calendar and Google Docs, which are used by 200+ Million customers. The goal of the primitives is to display only the most important contact information in the appropriate context. How do we know which content is appropriate for each surface? The plan was to collect analytics, user feedback, and run additional user research.

The second pillar was UI alignment. To facilitate a coherent user journey between Google products, I needed to make sure that each surface shares similar UI components with each other: headers, content presentation, and iconography. In addition, Android Contacts and People Sheet Android needed to be redesigned in the new design system that Google introduced - Material Next.

Last but not least, I needed to make sure that all design work is done taking into account the MVP scope for each product, engineering limitations and risks, and design limitations. It was crucial to define success metrics for each product redesign.

Problem solving

Parallel to researching product specs and timelines for each surface, I broke down the task list for each product. Since it was my first project for this team, aligning icons was the first step as it gave me the opportunity to familiarize myself with the products.

Icon audit

I went through the shipped version of each app, observed functionality and usage of all icons, and uncovered misalignment problems. For example, some of the icons didn’t align with the Material Design specs, while some didn’t align with functionality between platforms. The result of this icon audit was a Figma file with all icons listed along with their instances and functionality. For each misalignment problem I proposed a design solution and also filed design bugs. At the end of this project, icons were gradually aligned across our products.

Web Contacts redesign

The first product to go through the redesign was Web Contacts. 

Web Contacts is a Google Web product that helps people manage their contacts.

There were two main design decisions to make here:

1. Do we want to display contact information in card format?

2. Do we want to group information based on the source?

After many discussions where we analyzed pros and cons of each option, the card format was chosen.

The second question was content-related and was particularly relevant for our Enterprise users who use Google Workspace products within their organization. In addition to contact details, they would also see Directory information that came from their organization. For example, when looking at their co-worker’s profile, they would see this person’s Managers and Reports.

To answer the second question, we ran user research with Enterprise users. The goal of this research was to find out whether it was important for people to see contact details grouped by their source: for example, all user-generated info first, followed by directory info. After analyzing the findings, we reached the conclusion that having a more opinionated approach towards how we present contact data will be a better solution - for our users and also for the scalability of our future features. That’s why the redesigned Web Contacts displayed interleaved contact information, where user-generated contact info cards were “mixed” with Directory cards in the order of their importance.

Android Contacts redesign

Android Contacts is Google’s mobile product, bundled with Google-branded phones, that helps people manage their contacts.

Android Contacts app redesign started 9 months later than Web Contacts. By then we already knew that a card format solution was beneficial for our customers and our product system. We also had redesigned People Sheet iOS to a card format, and Android Contacts was the last app that we needed to align. While it was still uncertain whether the redesign would be in Q3 / Q4 2021 or later, it was clear that we needed to add a new feature of Directory content information by Q4. Directory content contains data available only for Enterprise users and controlled by admins in their organizations.

My design strategy was to explore two Android Contacts versions: one with Directory data added to the existing UI and one where it is added in a card format. I pitched the card format solution to the stakeholders and it was finalized by the team to be built in Q4 2021. After redesigning the UI into a card format and adding the Directory cards, I redesigned the UI using the specs from Google’s new design system - Material Next.

Project takeaways

At the end of this design project I created a unified design system that aligned user journeys in Android Contacts, People Sheet iOS, and Web Contacts. Redesigning our products into a card format enabled the engineering team to reuse the same components across different surfaces. Importantly, it saved us time and helped move to a more sustainable development model. Our customers browsing content in cards also saved time by hiding the least valuable content by default (an example of sustainable design). Switching to Material Next enabled having coherent user journeys across Google’s multiple mobile products. 

The redesign had a positive impact on our success metrics and business goals.

After Web Contacts redesign, the number of our paid Enterprise 1-day active users went up by 40%, from 213K to 301K.

It’s reasonable to believe that Android Contacts and People Sheet will also benefit in similar ways when they are released in late 2021.