selected work — google (2019-2021)
Designing for Scale
At Google, I led a multidisciplinary team of designers, UX engineers, content strategists and researchers focused on Google Cloud Platform.

As an industry-leading provider of public cloud services, Google provides critical infrastructure-as-a-service at immense scale. GCP offers over 100 products, is available in over 25 regions worldwide, and supports several large enterprise customers including Deutsche Bank, Twitter, McKesson, PayPal, Home Depot and UPS, among others.
The Google Cloud Console
Rethinking UX complexity
The Google Cloud Console is the primary web interface for most Google Cloud users, offering a multitude of cloud services and solutions -- including serverless compute environments, cloud storage, databases, automated deployment, data analytics, machine learning and advanced identity and security controls.

When I joined Google to lead the platform design team, GCP had grown exponentially -- from six products in 2013 to over 100 in 2019. A console that originally was intended to support only a handful of options was now immense, complex and difficult to navigate.

The Google Cloud Console with over 100 products (circa 2019)
One of my team's key responsibilities was to own the overall structure and UX standards for the GCP console, from the information architecture to the design of global surfaces such as the main dashboard, navigation system and search functionality. As the team overseeing the holistic experience of GCP, it became clear that we needed to radically rethink how the console would scale to accommodate an increasingly complex future.
Breaking down complexity
We started by decomposing the anatomy of the overall console experience. This was a critical step in driving a clear understanding of how each piece in the system would work and interoperate with the other pieces.

We also broke down Google Cloud's complex taxonomy. Within the information architecture are products, projects and resources -- each of these representing a different layer of hierarchy for each customer's cloud.

Google Cloud console anatomy
Scale demands flexibility
Once we had a strong sense of how each part of the system would work, we looked at ways to make the system more flexible. For example, it was obvious via user studies that most customers only needed to access a small slice of what Google Cloud offers. Furthermore, many users only manage a subset of projects within their company's cloud setup.

Our goal was to give users more control over what they see, by providing a flexible navigation system with quick access to frequently-viewed projects and resources, as well as the option to select specific objects as favorites. Lastly, we highlighted key projects or resources that are in need of attention (for example, when a service might be close to exceeding its usage quota).

All of this helped users cut through the huge array of information and options, leading to a more focused and productive experience.

The redesigned Google Cloud console
By the end of 2020, these and other UX improvements to the GCP console resulted in consistent improvement in usability and satisfaction scores, and favorable ratings when compared to other leading cloud platforms such as AWS and Azure.

GCP year-over-year usability scores (1-5 scale)

GCP end-of-2020 satisfaction ratings compared to AWS and Azure
Google Cloud Design System
Supporting product excellence at scale
Built on the Material design language, Google Cloud’s design system is the largest design system within Google, serving an internal audience of over 1,500 engineers and 350 UX contributors by the end of 2020. The system supports over 20,000 component instances throughout the console and over 2,500 total pages in production.

The Google Cloud design system
The system: components, patterns and page templates
The Google Cloud design system consists of atomic design elements, including a WCAG 2.1 AA accessible color palette and various typographic and layout styles. These elements are referenced throughout the component system, which in turn is used to compose more complex assemblies, all the way up to highly declarative page templates that are used to solve common problems across the console experience.

GCP design system - the Menu component
Elevating clarity
The Google Cloud design system consists of atomic design elements, including a WCAG 2.1 AA accessible color palette and various typographic and layout styles. These elements are referenced throughout the component system, which in turn is used to compose more complex assemblies, all the way up to highly declarative page templates that are used to solve common problems across the console experience.

Mobile guidelines
Google Data Visualization
Making the complex understandable
During my time at Google I was fortunate to work alongside some of the world's most skilled designers and engineers in the field of visualizing complex information. As part of the Platform Design organization, the data visualization team, headed by Manuel Lima, provided creative leadership serving not only Google Cloud, but all of Google itself.

Google's COVID-19 heatmap, one of the high-profile diagrams created by the data visualization team, was accessed by millions of users during the global pandemic
A system for expressing data
We took a systems-based approach with the goal of expressing data in accurate, intuitive, consistent and accessible ways. Elements such as color, opacity, line weight, density and motion were all utilized to form an expressive language for telling stories with data. These elements were used as the foundation for an extensive library of charting components -- from simple bar charts to complex scatter plots.

As part of the effort to drive greater awareness of best practices around data storytelling, this systems-based approach eventually led the team to create the Material Design data visualization guidelines, which are utilized throughout the company and by the Android development community.

Data visualization color system

Specifications for the line chart component
Enhancing observability
Within Google Cloud itself, the team provided many of the advanced visualizations seen throughout the console, which enhance the experience of monitoring critical infrastructure-as-a-service concepts such as network traffic, resource usage, and regionalization.

The Sankey diagram
Tools that empower people to tell data stories
Lastly, the team built tools that empowered Googlers to build their own visualizations. For example, the Beck Maps tool enables users to create their own interactive topology maps, which can be used to visualize system architecture, user workflows, or any other sequential data, all powered by Google Sheets.

Beck maps
Bridging the gap between design and engineering
One of the key missions of the Platform Design team was to find innovative ways to increase velocity among product builders in the Cloud org. Specifically, we targeted opportunities for reducing friction between design and engineering teams throughout the software development lifecycle.

Canvas-based vector drawing tools such as Figma have come a long way, but they still exclude a substantial amount of important UX details from a design specification. For instance, even well-crafted mockups often don't follow the rules of the DOM, leave out loading and error states, and fail to account for accessibility, leading to a significant amount of bugs that end up needing be resolved downstream in the implementation.

High-fidelity code prototypes represent a substantial advancement in the quest to overcome these problems by integrating design and engineering practices into a more seamless process. Prototypes serve as a much more faithful representation of the intended experience, allowing teams to design, test, iterate and build faster, with higher-quality results.

However, for many designers, it's a daunting task to become proficient in HTML, CSS and Javascript -- and to integrate these technologies into their workflow. For frontend engineers, the developer toolset can often make it difficult to understand exactly how the rules of layout and interactivity work together to produce excellent features.

To address these problems, we built a full-featured prototyping tool, which we called Codesign.

Codesign is a browser-based prototyping application, which uses the actual production components from the design system and an intuitive layout engine that leverages real code properties. The resulting output isn't a vector-based mockup or exported design document, but rather a true web experience using HTML, CSS and Javascript, as demonstrated below.