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.
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.
Consolidation & order
The panel features are sorted, grouped and organized into a logical order while consolidating vertical height by introducing multiple columns.
A flexible, interlocking grid
A 1, 2, 3, and 4-column, interlocking grid was developed to ensure maximum modularity and extensibility in the future.
Color pickers, menus, & other interface elements were designed to fit in various column widths of the modular grid.
A color coded symbol library was developed in Sketch that enables rapid design and development of each of the property panels.
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.
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
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.
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.
Theme color map
A spreadsheet was developed for front-end engineering with the mapping all theme elements.
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.