Google Play Store: Top Charts 2.0

Redesigned Top charts footprints across Google Play Store to be more reliable by deploying “trusted genome” metadata tags, and modernizing the filters framework to be mobile native, to help users refine their search intent to discover better, more personalized content.

Role

Lead UX Designer

Deliverables

UI+UX

Prototypes

Visual Design

New Filter Framework

Team

3 Other UXDs

1 UX Researcher

2 UX Managers

1 Product Manager

2 Phonesky APK Eng

Duration

4 months

Why is Top charts important to Play?

Top charts is the most visited subnav for both apps and games.

3.9% of traffic for Apps and 4.9% for Games globally, higher in Japan Korea (JPKR) for games, with 7.1% visitors.

20% browsers come to Store looking for popular games, 5% for apps.

A significant segment of our users come to this second subnav in search of quality games, especially in APAC. Yet, we do not offer the necessary controls to search and discover quality, personalized content on a granular level.

Problems

1. Lack of meaningful controls (no filtering by ‘new’ or by category e.g. “racing games”, “family”)

2. Too many apps & games (over 500! - effectively an infinite scroll page) while 95% installs come from only the top 200 on ‘Top free’.

3. Hard to tell how each item is trending – how? in which markets?

4. The ‘installed apps’ toggle off by default, causing numbers to skip if a TC item is already installed.

Goal and solution

Help users discover popular apps and games by making Top charts more reliable, trustworthy, useful, and discoverable by expanding metadata tag coverage and enabling deep, meaningful filtering on Top charts, as well as a more context agnostic UI.

Design summary

The new proposal showcases a cleaner design with consolidated filters:

• one for Top Free, Top Paid, Top Grossing,

• a second to search by Categories, and

• a third to filter by ‘New’ (where n = any new app or game in the last 30-60 days.)

The previous ‘Trending’ filter, which we learned from research was hardly used, didn’t make sense to keep as a filter, so I decided to remove this from the filters row and made this a trending icon within the title of each app.

Affected surfaces

I sought to overhaul the existing information hierarchy (IA) on three surfaces, as well as the IA in Play verticals (Movies/TV and Books on the bottom nav):

1. The main Top Charts subnav, which is the highest-trafficked tab after the default opened “For you” tab,

2. The Top Charts landing page, which one can access by tapping on any Decide and Discover (DnD) chips from an app/game’s detail page,

3. Mini top charts, a cluster format, like any other H-scroll cluster, on the home stream.

Main CUJ: TC Primary Subnav

The biggest delta between the previous and proposed design is the usage of the bottom sheet to show more filters, since bottom sheets are native to mobile. I wanted to move away from using drop downs for the filters in mobile, since they are a desktop pattern and don’t scale well for unanchored UI such as the Mini top charts, which is an in-stream cluster. This was a big impetus to redesign the filters as we saw other 1P app teams like Google Maps adopt bottom sheets and make its usage more ubiquitous in supporting deep search on mobile.

Re-examining UI details

Scaling TC2.0 to larger screens

For every new feature or optimization on Store, “beyond mobile” large screens were always considered as part of the scope. TC2.0 was no different, and using Play’s chromatic scaling framework, I worked with the Beyond Mobile team to arrive at the most optimal scaling for different breakpoints.

That raised the question, what is the appropriate interaction on larger breakpoints and screens for new filters? Would a bottom sheet be appropriate to stay consistent, a dialog since it’s web native, or another interface? In the end it made sense to use a dialog instead of a bottom sheet to be contextually relevant to the form factor.

Trending icon: no longer a filter

Research showed that it was safe to remove the Trending filter since it got poor engagement. So I made it an icon under the item number, essentially making it another metadata classifier for an app/game.

Initially, I tested different colors and icons for the trending icon. I used the brand Play green to indicate trending upward to distinguish it better from a red for trending down. But UX research showed red is an auspicious color for East Asian countries like China, Korea, and Japan, where 7.1% of our visitors come to search top games, so to be context-agnostic, I left color out and made the trending icon the same color (G900) as the number initially, but opted for IconDefault so it doesn’t fight for attention with the number, which is of most importance to Top Charts.

New Filter Interaction Explorations

All horizontal filters: Painful to users and Eng

The horizontally-expanding filters were painful for both users and engineers to maintain, so something had to change. With the introduction of Categories, we had to seek a better framework for displaying Categories, and bottom sheets were the logical solution. When scrolling horizontally on a narrow viewport like mobile, users forget what’s not in view, a.k.a. “Out of sight, out of mind”. We saw from data and research that engagement plummets for any filter or content that’s not peeking.

Partially expanding horizontal filters: Even more painful !

Eng initially pushed back that creating bottom sheets would require a considerable amount of resource. To appease their fears of workload, I tried a version where only the chart modes (Top free/paid/grossing) triggered a bottom sheet, and everything else including the horizontally expanding filter for Categories can stay the same. Yet, this mixture turned out to be even worse than the All Fireball iteration above because the width of the scrollable viewport for Categories became even narrower since the Top free filter is fixed and doesn’t scroll in this version.