In our previous article ‘Visualizing User Experience Data, we defined a framework to measure the User Experience of a product. In this article, we want to share how we can use Google Data Studio to visualise those metrics and facilitate decision making during the design process.

Data Studio

Data Studio is a free tool offered by Google that allows you to create interactive dashboards and reports with data visualizations using multiple sources of data.

Data Studio user interface is pretty intuitive, however, there are two key concepts you need to manage to get started:

    1. Data sources let you connect data sets. This is the first thing you have to do before adding charts to reports.
    2. Reports let you visualise data. You have to select one or many data sources to feed data displays. Reports can be shared, interacted and exported.

Starting a new report is as simple as clicking on a button. If you don’t want to start from scratch, you can follow their tutorial that explains how to work with reports step-by-step.

datastudio user interface
Data Studio User Interface

Reporting UX metrics

In order to visualise the user experience metrics defined according to the HEART framework we’ll be using the following chart types:

  • Scorecards to display real-time values of key indicators.
  • Time series to show data over time and identify patterns.
  • Bar charts to compare data partitions and identify patterns.
  • Pie charts to identify proportions within a data set.
  • Scatter plots to identify potential correlations and proportions.
  • Heatmaps to compare data relationships.
  • Stacked Area charts to compare proportions over time.
  • Geo maps to see proportions based on a location.

Data within a time range

Data must be presented within a date context. We will add a date range filter to all pages in order to filter data displays.

In order to get this filtered view, the data source must provide a time dimension value and the chart ‘Default Date Range’ must be set to ‘Auto’.


A scorecard is the simplest graphics possible since it represents just one single aggregated metric at a time.

We’re using scorecards to display:

  • The median of every task performance metric (time on task, errors and effort).
  • The unique (distinct count) number of users, pages, events, or tasks executions.
  • The ratio of interactions per users or session.
Scorecards and time-series charts to display KPIs

We have also set the ‘compare with the previous time period’ option so we can quickly see how big the change is. Besides, we have included a line chart with a trend line to provide more context to scorecards.

Scatter plot

We can use scatter plots to find a potential correlation of values. We have two initial hypotheses that we want to explore based on UX metrics:

  1. Is the effort to complete a task related to the time to complete it?
  2. Does more effort imply more errors necessarily?
Scatter Plot with an exponential trend line


In order to get a view of how much user interactions are registered by time of the day, we have created a Pivot Table with a Heatmap style. The Row dimension is set to ‘Hour’ and the Column dimension to ‘Day of the week’, using ‘Distinct Count’ of users as the metric to be represented.

Heatmap created with a Pivot Table

How can I obtain the hour and day to display a pivot table?

Google Data Studio allows you to create additional fields defined by a formula. So you can add custom calculated fields to display using a complete set of functions, aggregations included.

In this example, we have duplicated the timestamp field ‘uuid_ts’, changed the type so it includes hours when displayed.

Changing the field type on Data Studio

After that, we have added a new field called ‘Hour’ that extract the hour of the timestamp using the ‘HOUR’ function, and set the type to ‘Hour (HH)’.

hour field

The same has been done with the day of the week by using the ‘WEEKDAY’ function and setting the type to ‘Day of the Week (D)’ so instead of numbers (1, 2…7), we can see weekdays (Monday, Tuesday… Sunday).

Custom fields on Data Studio
Custom fields


A conversion funnel is a very popular representation to identify the number of users who drop-off during the performance of a task.

Plotting funnels with Data Studio is not as straightforward as we wish, so we’ve taken an alternative representation in order to get the same insights.

We have displayed two similar bar charts with a reversed orientation where value numbers are displayed only in one of them. This doesn’t calculate automatically the percentage of drop-offs but you can compare it visually.

Funnel chart using Bars

More than just raw data

When creating Reports and Dashboards there’s more than just a set of beautiful charts representing key information. We should work on preparing the data to accurately feed those graphics with values that we can trust.

In order to work with data, Google Data Studio offers some interesting capabilities.

Joining information from multiple sources (a.k.a. Blending data)

By default, when we drop a chart into the report, it uses one single data source. However, for the occasions where data is distributed into two multiple tables, we can ‘blend’ them and get a chart displaying joined data.

As of today, Data Studio allows you to blend data like a ‘left join’ operation in SQL, meaning that the left set of items includes information of the right set but it’s not limited to it. Needless to say that for those sources to be joined, they need to share a ‘key’ field.

Most of our UX Data is blended from two sources: Events and Users. That way we can keep users’ traits in one table and event logs in a different one. Depending on the need, we have alternatively filtered the source or the view, or nothing at all but exposing a filter to allow report consumers to interact as they wish.

Data blending on Data Studio

Blending data becomes incredibly powerful when you have your data distributed across multiple analytics platforms.

Calculating fields

We have already seen an example of how useful it could be to use calculated fields when displaying heatmaps. Adding new calculated fields can be used to also generate derived metrics like the Net Promoter Score (NPS) value.

In this example, we have created two calculated fields, one to tag every single respond as a ‘promoter’ and another one as a ‘detractor’ based on their rating.

Calculated field to identify Promoters (NPS)

Using the value of that field, we can then create a new one with the result of the NPS formula, which is nothing but the difference of percentages between promoters and detractors.

((sum(promoters) - sum(detractors)) / COUNT(id)) * 100

A personal note about Data Studio

As a designer, I must confess that I’m a fan of every single Google project, whether they are abandoned at the end of the day or not it’s never a downside for me to try their next big thing. I started playing with Data Studio early in 2018 and I’ve seen an incredibly huge growth of the tool since then. Updates are released every two weeks and they’re never minor or inconvenient. Yet the tool started with silly crashes now it’s getting more stable and interesting every day.

Obviously, Data Studio is not the only tool for data analytics we use at Ebury, but it’s the tool that helps designers and developers to keep a frequent eye on data when needed, which is almost every day.

We’re hiring!

We’re looking for a Front-end Developer in our Málaga office and a Junior Graphic Designer in our London office. Ebury is an inclusive workspace that values diversity and everyone is welcome, be part of it.

Join the team changing the future of FinTech

Apply now!