Google Chrome

Decoupling sign-in and sync on mobile

By Mariana Stariolo

This project had the goal to offer to mobile users a consistent experience between the sign-in flow in Desktop and Mobile, increasing comprehension, trust, and empower users that sign-in to Chrome with their Google Account.

Represent the user’s voice

As a UX Designer at Chrome working on the Identity team in Munich and Paris, It was my job to help come up with design solutions for Chrome products across the globe. Designing globally and for billons of users presents a lot of challenges that don’t come up if you are creating products for a more limited market. We constantly see how cultural context and infrastructure matter to good design.

My tasks in this project:

• Understand the problem & ideate:
  I analize quantitative and qualitative data, constraints, and design possible user flows and wireframes.
• Communication with stakeholders
  Present and get the buy-in on designs, cross-team communication to align requirements and constraints. Flat communication with cross-functional team
• Design execution
  Wireframes, High fidelity mocks based on Android/iOS design specs, Prototypes and slides decks for present the project with stakeholders or run a user study. Refinements based on feedback we got on research studies

The Team

This project was divided in 2 plataform and each platform had their own team. I was the UX designer in both teams.

Google aims to create a products for everyone. My challenge as a designer was to avoid “Personas”. Instead, I created “mindsets”, those mindset are mental states that the user can going trough in a particular situation. To represent them we use actors that you can find along all Google products. Actors has specific images and names but any other extra data.

Always ask WHY…

A great start to finding a solution it’s to define “the goal” and “the how” to helps the final user, keeping in mind the company mission.
Asking “Why” always helps me to understand the problem in-depth.

I put myself in the user’s shoes

To achieve this, first, I used Chrome from scratch, as a new user, I take screenshots of each flow and I prepared a document with all the flows as a future reference.
Then, I had a one-one meeting with the Design Lead, the Product Manager, and the Engineer lead.
I was looking for answers about:

• Why is this feature important?
• What problem are we trying to solve?
• What impact does it have in our users and on the business?
• How this project benefits users?
• What opportunities does it create?
• How does it extend the company’s mission?

I find different ways to solve, simplify and reduce the flows. But sadly not all of them match with the time and the resources we had available.

The method we used in the project was “agile” so better to have earlier results and improve on the way.

Not everything is rosy

It’s impossible to avoid unforeseen situations, it’s part of every project, look for the best way to solve them in part of the process too.
While we progressed with the project we had blockers to solve:

Time

The UX team proposed the “best possible way” to solve the main problems in the design. After the presentation with the lead engineers, we realized that the timing was not enough to reach the scope we had. So we decided to create 2 versions of this project. The first version aimed to have an MVP.
After we got rid of the screens and “nice to have” elements, we also realized that the project was too big. We had a lot of scenarios (First run experience, web sign-in, manage settings and sync, error cases) and we run out of the time. So we decided to divide the project into 2 milestones.

Other team involved

Web sign-in flow involved different teams across Google (based on different countries). They added more constraints to keep in mind, we had to align scopes with them, adding more effort and load time for the project.

Corona Virus

The virus nocks humanity doors. Google proposed to work from home as a way to keep everyone safe. New challenges came up: everything took more time, internet breaks and non-direct communication. The project was extended a few weeks to adapt us to the new method of work. To improve that, we decided to communicate more ofter via Google Hangouts.

The takeaway

Until here, we had around 12 months of work. Different challenges appeared over the road. The key was always to have good communication.

My process was:

• Analysed the problem in-depth taking all flows that the user can do, and take step-by-step screenshots
• Created white-board sessions with the team. In this way, we exposed a complex problem and propose different solutions in an agile method. In that way, we had instant feedback from the engineer and the product manager. the main objective was to create the product’s structure and define features. With the team, we had the opportunity to quickly plan and validate the value of of the design of a screen
• Designed wireframes in paper
• Designed High fidelity mocks to define how a product will look at project completion
• Refinements based on design system specs to assure consistency overall Google products, and based on user feedback we got in the User testing session.
• Keep the Figma file clean and well-structured so engineers can easily analyse each flow, use the red flags and leave comments
• Created decks (slideshows) to present to stakeholders
• Iterate

Introducing one feature and improving an existing one

To help you get the most out of your Google Account, Chrome on mobile lets you sign-in with a single tap, even when not using sync. When you sign in to a Google service like Gmail, you can now choose to sign in to Chrome with one of your Google Accounts on the device – with a single tap and without having to re-enter your credentials. If you prefer to sign in without adding your account to the device, you can simply dismiss the dialog. And if you want a temporary browsing session, the menu provides a quick way to open Incognito mode.

On the other hand, “to sync” became optional. Users can decide to sign-in without synchronizing browsing data into Google Account.

Changes on Settings

Turn on sync

Users that didn’t opt in to sync during the “first run experience”, can easily turn on sync from settings.

Sync page

This is a page to manage all options related to sync: What data types to sync, the option to turn off sync and other advanced settings.

Sign-in from content area

Sign in easily to Chrome

While the user sign in to a Google web service, we offer the option to sign in to Chrome using account already signed in into other Google apps.

• The user not need to introduce his credential
• The user will be signed in into Chrome and into the web content area

Account chooser

When the user doesn’t want to use the pre-selected account, they can:

• Select a different account
• Add account to device
• Sign in temporarily (incognito)

How I got here

I made the design and manage the requirements using different tools. But I would like to highlight Figma (Clap! Clap!).
Figma is the most powerful design software that I knew. The main benefit is that is a live collaboration tool. It keeps teams on task and encourages full disclosure. Figma is easy for anyone to use on any platform, and lets teams share their work and libraries quickly, add comments, export styles, and is very easy to make quick prototypes with it. I just love it!. Everyone can access to my file and leave comments and insights.
Other tools that help me to make this project are: and Google Hangouts Meet (for team communication), Google slideshows (to prepare decks for stakeholders), Google documents.

Users loved it

The metric show positive numbers about this changes:

• Increased the rate of signed-in user.
• Increased in general user satisfaction. User feels more safe and in control.
• Increased the user understability in topics related to being sign in.
• Enable “Password” and “Payment” features to users that don’t sync.

The media also, presented this feature as a positive improvement of Chrome ecosystem.

My learnings along the project

Involve engineers in the phase to understand the problem.

After taking a lot of screenshots, sign-in/out tons of times. I didn’t have an answer to very basic questions. I read the PDR over an over again, searched documentation for previous projects (like the same project for Desktop) but without success.
After a talk with the lead engineer, I exposed my situation and he solved all my answers in less than 1 hour.
I learned a new lesson: If you struggle to ask engineers. As a result, everybody will save time.

Involve Product Managers and Engineers in white-board sessions.

After the first set of mocks, I had separated meetings with PMs and Engineers, both had a different approach for the same problem, both with valid points. The UX lead proposed to have a meeting together to align requirements, the result was a white-board session where we solved mains problems with the different angles. Everybody was happy with the results, we solve the main problem in less than 2 hours.
I learned a new lesson: White-board sessions with PM and Engineer gives always excellent insights. As a result, the project progress faster.

Each person has valuable knowledge to offer.

For me an excellent way to learn is speaking with people about their daily tasks at work, they’ll help you to figure out when you need them, how to reach them at the right moment, and how to improve times and work quality before to reach them.
For example, I learn from Florian (user researcher) how to ask better questions and how to prepare a flow for the Research Plan. I also learned from Sabine (product manager) how to design around constraints because not all situations are ideal. Each person plays an essential role and has a bundle of knowledge to offer, so it’s important to always be curious.

Designing for a large ecosystem.

Google is large and complex, and Chrome is part of that ecosystem. You have to make sure that your design makes sense in the flow of the larger ecosystem. For example, when using a certain UI pattern, you have to make sure it is in line with those of other products from Google.

Design for accessibility.

When working on a product that is used by millions of people around the world, it is crucial to consider accessibility. I was more cautious of the colors, text sizes, and contrast ratios in my designs.