Once the information is sorted an arrow will appear next to row the user selected to sort the information by.

Densifying complex data tables

Improved GAM report tables by addressing excessive padding concerns and minimized horizontal scrolling; enhancing users experience for efficiently analyzing data


The Opportunity : Report tables in GAM suffer from horizontal scrolling issues due to excessive column padding, especially when users select a variety of dimensions and metrics. Hindering users with large datasets because it reduces the amount of information visible at once

The Opportunity : Report tables in GAM suffer from horizontal scrolling issues due to excessive column padding, especially when users select a variety of dimensions and metrics. Hindering users with large datasets because it reduces the amount of information visible at once

The Opportunity : Report tables in GAM suffer from horizontal scrolling issues due to excessive column padding, especially when users select a variety of dimensions and metrics. Hindering users with large datasets because it reduces the amount of information visible at once

The Product: Google Ad Manager (GAM), provides a one stop solution for publishers to manage and optimize their ad revenue. GAM provides ads infrastructure to the largest and most complex companies in the world.

The Product: Google Ad Manager (GAM), provides a one stop solution for publishers to manage and optimize their ad revenue. GAM provides ads infrastructure to the largest and most complex companies in the world.

Solution: Create a way to tighten column padding without loosing the current functionality of filtering and sorting

Solution: Create a way to tighten column padding without loosing the current functionality of filtering and sorting

Final designs

Once the information is sorted an arrow will appear next to row the user selected to sort the information by.

Use case: Sorting within tables
Use case: Sorting within tables

From the chart level filter users will select sort from there users will be able to select how they wish to sort the information in the table.

From the chart level filter users will select sort from there users will be able to select how they wish to sort the information in the table.

From the chart level filter users will select sort from there users will be able to select how they wish to sort the information in the table.

This solution created a chart level filter presenting them with the option to filter, sort and hide columns.

This solution created a chart level filter presenting them with the option to filter, sort and hide columns.

From here users will be presented with a table where users can add in their desired filters for each column. Once a filter is applied users will be able to see the filter icon appear with a badge indicating the amount of filters applied.

In addition to the badge users are able to hover over the filter icon and a tool tip will appear allowing for users to see the filters applied at a quick glance.

Use case: Filtering within tables

Final designs

Impact

Reduced Horizontal Scrolling: Users can view more information on a single screen, minimizing the need to scroll back and forth.

Improved User Experience: Streamlined data analysis and navigation with readily accessible data points.

Enhanced Efficiency: Reduced scrolling saves users time and effort, boosting productivity.

Preserved Functionality: Maintains the existing filtering and sorting capabilities for optimal data exploration.

Reduced Horizontal Scrolling: Users can view more information on a single screen, minimizing the need to scroll back and forth.

Improved User Experience: Streamlined data analysis and navigation with readily accessible data points.

Enhanced Efficiency: Reduced scrolling saves users time and effort, boosting productivity.

Preserved Functionality: Maintains the existing filtering and sorting capabilities for optimal data exploration.

Through my exploration, I designed a high-level filter to address the excessive column padding issue. This approach eliminates the need for multiple filters within each column, but it presents a new challenge. How we effectively compartmentalizing all filtering options for each row within a single filter.

Exploration 1

For my initial exploration I chose an extensive dropdown that sectioned each row and once users selected filter they would be presented with the option to filter based on the column

This option felt similar to the previous UI meaning it wouldn't be as jarring to users however, the dropdown felt overwhelming at first glance.

Exploration 2

For this exploration I went in a different direction from the previous dropdown feature and chose an expansion table to consolidate all filters

My team felt expansion tables were the right choice because they empower users to control the amount of information they see at a time but this design needed work

Exploration 3

Before settling on the final designs we explored a condensed expansion table where users could expand each section allowing for them to focus on a specific filter

This option allowed for users to see at a quick glance when filters were applied to a specific area. Overall we decided against this option because it requires more clicks for the users to expand information

Use case: Filtering within tables
Use case: Filtering within tables

Dive Deeper: More great reads await!

Landing page experience

Design system modernization

Build your own workspace

Nail art

Dive Deeper: More great reads await!

Dive Deeper: More great reads await!

Hi, Im Kira