Google Data Studio

Google Data Studio

Google Data Studio allows users to easily turn their data into dashboards and reports with beautiful data visualizations. I joined the team prior to initial launch to overhaul the primary control panel under tight deadline. I worked closely with the Project Managers and Engineering team to ensure that it launched meeting Product Excellence standards.

Screen Shot 2017-12-10 at 1.27.14 PM.png

The design challenge

When I joined the Data Studio team, the product was in active development  – engineers were adding features to the property panel as they completed them. As a result, the panels were long and unorganized.

The primary design goal was to consolidate the panel features to reduce the vertical height and the need for scrolling.

Screen Shot 2017-12-10 at 5.04.30 PM.png

Consolidation & order

The panel features are sorted, grouped and organized into a logical order while consolidating vertical height by introducing multiple columns.

Screen Shot 2017-12-10 at 5.07.15 PM.png

A flexible, interlocking grid

A 1, 2, 3, and 4-column,  interlocking grid was developed to ensure maximum modularity and extensibility in the future.

Modular components

Color pickers, menus, & other interface elements were designed to fit in various column widths of the modular grid. 

Screen Shot 2017-12-10 at 5.41.40 PM.png

Symbol library

A color coded symbol library was developed in Sketch that enables rapid design and development of each of the property panels.

Screen Shot 2017-12-10 at 1.33.33 PM.png

Collaborative Development

Google Drawing was used to create a live, collaborative development portal.

It contained everything the FE team needed – specs, assets, interaction direction and revision notes.

Screen Shot 2017-12-10 at 1.33.51 PM.png

Final specifications

The outcome delivered much more than just refinement to the Data Studio property panels, it has resulted in an efficient and modular system that will be included in the ACUX design spec.

Screen Shot 2017-12-10 at 5.28.06 PM.png

The results

The modular design system is proving to be invaluable for rapid design extension and development. 


"From the moment she joined the Data Studio team, Claire proved to be efficient, creative and impactful in her work." 

Dave Wright, Staff Interaction Designer


Data Studio Themes

Screen Shot 2017-12-10 at 5.47.53 PM.png

The design challenge

The default theme for Google Data Studio is based on the Material Design font and color palette. The goal of creating pre-defined themes was to enable an easy starting point for a variety visual styles. 

By mapping colors to a palette the user could make quick and easy sweeping changes to all the elements of their Data Studio reports.

Screen Shot 2017-12-10 at 5.50.59 PM.png

Palette formula

A systematic approach was taken for determining the color map. It is based on the concept of having a high contrast value range in, with a high saturated colors in the mid-tones. This ensures the appropriate amount of contract and legibility.

Screen Shot 2017-12-10 at 6.07.40 PM.png
Screen Shot 2017-12-10 at 6.07.00 PM.png
Screen Shot 2017-12-10 at 6.09.52 PM.png

Theme color map

A spreadsheet was developed for front-end engineering with the mapping all theme elements.

Screen Shot 2017-12-10 at 6.17.24 PM.png

The results

The Data Studio themes are allowing premier GA customers – who are currently test driving the product – to rapidly style their analytics reports to their brand.


"Claire quickly understood the technical constraints of each problem she was handed, created an array of solutions and communicated final design decisions to the engineers clearly and in a language they understood. " 

Dave Wright, Staff Interaction Designer

Informative illustrations

Informative illustrations

CarJojo website

CarJojo website