REDESIGNING GOOGLE’s PAYMENTS PLATFORM UI

Senior User Experience Designer, Google
2016-2019


In 2016, I led the redesign of the web interface of Google’s Payments Platform UI.

As the design lead for this project, I interfaced regularly with UX teams on AdWords, Admob, Adsense and more to get this project launch-ready.


The team

Within the payments org, I collaborated closely with the following:

• Product Manager

• Engineering Lead

• Dev team (3-4 core, 15 total)

• Project Manager

• Jr Visual Designer

• Sr UX Researcher

• UX Content Strategist


Background

Our UX Researcher identified that users were confused with how we laid out billing information. For example, using parentheses instead of a minus sign to represent negative values was too accounting-specific. Information was also disorganized and dense, burying main actions.

Old design - Notice how the UI is geared towards accountants, which were not always the end users of this page.

Additionally, our support team had indicated that a top customer complaint was confusion about billing. In parallel, Google was going through a company-wide pivot to the new Material Design system, so this needed to be incorporated in our new designs.

Scope:

  • 55+ Google products integrate with the billing interface

  • 165M customers in the platform

  • 78% of users visit the billing page of a product they use at least once a month

I defined a multitude of user stories to highlight the complexity and ensure we designed for our different types of customers, whose billing situations arranged from invoicing to automatic withdrawals, different country requirements, and user types.


Design

One notable example was the rethinking of the homepage UI, particularly the hero card that displayed what you owed (or would be earning) in a certain timeframe. I created an anatomy structure for the card in order to have it support all of the use cases the team and I had come up with. I also drafted the content for each use case and ran it by our content team to ensure company voice and tone guidelines.


Guiding principles

Given the size and scope of the project, I was working with several specialists across the design team including content, research, and visual design. I came up with guiding principles to quickly distill the north star for new components we’d be introducing to the UI, including the balance card. Example below:

The balance card should always be placed in the most prominent position and include the most important content and actions to reduce confusion about amount owed and when.

  • Display current balance owed to or owed by Google

  • Enable the user to pay off balance when applicable

  • Contextual, depending on type of invoicing strategy a customer has (e.g. “automatic payments”)

  • Display last payment made with amount and timestamp


Reusability

After research and delivery, I contributed to an extension of the Material Design system for payment and ads products. This balance card (below) was a new component, for example.


Impact

We launched new UI in 17 products in 4 months (which is a feat for any large enterprise-level company!). One metric from the AdWords team within months of launch was a 3.5% reduction in support contacts around billing confusion.