I spent two years working as a Sr. Visual Designer with the Cloud UX team in Seattle. Here are a few projects from that time.

I spent two years working as a Sr. Visual Designer with the Cloud UX team in Seattle. Here are a few projects from that time.

I spent two years working as a Sr. Visual Designer with the Cloud UX team in Seattle. Here are a few projects from that time.

I spent two years working as a Sr. Visual Designer with the Cloud UX team in Seattle. Here are a few projects from that time.

I spent two years working as a Sr. Visual Designer with the Cloud UX team in Seattle. Here are a few projects from that time.

Cloud UX Identity

Cloud UX Identity

Cloud UX Identity

Cloud UX Identity

Cloud UX Identity

The Challenge

The Challenge

The Challenge

.

.

Create a logo and identity system for the largest UX team outside of Mountain View. The mark needs to be able to scale to encompass the various products within the Google Cloud Platform. 

Create a logo and identity system for the largest UX team outside of Mountain View. The mark needs to be able to scale to encompass the various products within the Google Cloud Platform.

Create a logo and identity system for the largest UX team outside of Mountain View. The mark needs to be able to scale to encompass the various products within the Google Cloud Platform. 

Create a logo and identity system for the largest UX team outside of Mountain View. The mark needs to be able to scale to encompass the various products within the Google Cloud Platform. 

Create a logo and identity system for the largest UX team outside of Mountain View. The mark needs to be able to scale to encompass the various products within the Google Cloud Platform. 

logo-base
logo-one-colors
logo-construction
colors-blank
colors-annotated
construction
construction-codes
color-examples
color-examples-use
cloudsy-font
cloudsy-sample
sub-teams
logo-with-background
shirt
shirt-alt-design
sticker-2
Collage

Google Cloud : Product Logo System

Google Cloud : Product Logo System

Google Cloud : Product Logo System

Google Cloud : Product Logo System

Google Cloud :
Product Logo System

The Challenge

The Challenge

The Challenge

.

.

In the absence of a clearly defined brand, leverage existing iconography and imagery to develop a system of product logos that not only feels more Googly, but also has the room to grow within the brand as a whole

In the absence of a clearly defined brand, leverage existing iconography and imagery to develop a system of product logos that not only feels more Googly, but also has the room to grow within the brand as a whole. 

In the absence of a clearly defined brand, leverage existing iconography and imagery to develop a system of product logos that not only feels more Googly, but also has the room to grow within the brand as a whole

In the absence of a clearly defined brand, leverage existing iconography and imagery to develop a system of product logos that not only feels more Googly, but also has the room to grow within the brand as a whole

In the absence of a clearly defined brand, leverage existing iconography and imagery to develop a system of product logos that not only feels more Googly, but also has the room to grow within the brand as a whole

Cloud-home
Cloud-debug
Cloud-billing
Cloud-whatever
Cloud-dataproc
Cloud-VPC
Cloud-hybrid
Cloud-sql
Cloud-bigtable
Cloud-monitoring
Cloud-pubsub
Cloud-developer
Cloud-network
Cloud-containerreg
Cloud-finance
Cloud-geonomics
Cloud-flash
Cloud-IAM
Cloud-Launcher
Cloud-machine-learning
cloud-console
cloud-icons

I also designed well over 200 pixel perfect icons for the cosole UI. In addition to the custom icons I also converted material design icons from 24px down to 18px maintaining pixel perfection along the way. 

I also designed well over 200 pixel perfect icons for the cosole UI. In addition to the custom icons I also converted material design icons from 24px down to 18px maintaining pixel perfection along the way. 

I also designed well over 200 pixel perfect icons for the cosole UI. In addition to the custom icons I also converted material design icons from 24px down to 18px maintaining pixel perfection along the way. 

I also designed well over 200 pixel perfect icons for the cosole UI. In addition to the custom icons I also converted material design icons from 24px down to 18px maintaining pixel perfection along the way. 

I also designed well over 200 pixel perfect icons for the cosole UI. In addition to the custom icons I also converted material design icons from 24px down to 18px maintaining pixel perfection along the way. 

rejected-logos

A fraction of the rejected logos.

A fraction of the rejected logos.

A fraction of the rejected logos.

A fraction of the rejected logos.

A fraction of the rejected logos.

And here's an old concept on visualizing how Cloud's products could work together.

And here's an old concept on visualizing how Cloud's products could work together.

And here's an old concept on visualizing how Cloud's products could work together.

And here's an old concept on visualizing how Cloud's products could work together.

And here's an old concept on visualizing how Cloud's products could work together.

component-flow

Google Cloud Platform Redesign

Google Cloud Console Redesign

Google Cloud Console Redesign

Google Cloud Platfrom Redesign

Google Cloud Platform Redesign

The Challenge

The Challenge

The Challenge

.

.

Focusing on the most utilized space in the console, the App Bar, deliver a scalable solution that orients the user and communicates available functionality. 

Focusing on the most utilized space in the console, the App Bar, deliver a scalable solution that orients the user and communicates available functionality.

Focusing on the most utilized space in the console, the App Bar, deliver a scalable solution that orients the user and communicates available functionality. 

Focusing on the most utilized space in the console, the App Bar, deliver a scalable solution that orients the user and communicates available functionality. 

Focusing on the most utilized space in the console, the App Bar, deliver a scalable solution that orients the user and communicates available functionality. 

appbar-sketches

Quickly sketching all of the assumptions and known problem areas helps inform the initial designs.

Quickly sketching all of the assumptions and known problem areas helps inform the initial designs.

Quickly sketching all of the assumptions and known problem areas helps inform the initial designs.

Quickly sketching all of the assumptions and known problem areas helps inform the initial designs.

Quickly sketching all of the assumptions and known problem areas helps inform the initial designs.

app-bar-visual-vari-2

During our initial rounds of explorations we struck out to find the balance between "desktop material" and developer centric software. We decided a solid colored bar (top) would help separate the navigation from the canvas and better ground the user.

During our initial rounds of explorations we struck out to find the balance between "desktop material" and developer centric software. We decided a solid colored bar (top) would help separate the navigation from the canvas and better ground the user.

During our initial rounds of explorations we struck out to find the balance between "desktop material" and developer centric software. We decided a solid colored bar (top) would help separate the navigation from the canvas and better ground the user.

During our initial rounds of explorations we struck out to find the balance between "desktop material" and developer centric software. We decided a solid colored bar (top) would help separate the navigation from the canvas and better ground the user.

During our initial rounds of explorations we struck out to find the balance between "desktop material" and developer centric software. We decided a solid colored bar (top) would help separate the navigation from the canvas and better ground the user.

With the base visual style in place, it was time to start exploring the various button styles. These buttons are the individual actions a user can take with the content on the page. They need to be easily distinguishable but not take up too much real estate. To support this, a combination of icon and text was chosen.

With the base visual style in place, it was time to start exploring the various button styles. These buttons are the individual actions a user can take with the content on the page. They need to be easily distinguishable but not take up too much real estate. To support this, a combination of icon and text was chosen.

With the base visual style in place, it was time to start exploring the various button styles. These buttons are the individual actions a user can take with the content on the page. They need to be easily distinguishable but not take up too much real estate. To support this, a combination of icon and text was chosen.

With the base visual style in place, it was time to start exploring the various button styles. These buttons are the individual actions a user can take with the content on the page. They need to be easily distinguishable but not take up too much real estate. To support this, a combination of icon and text was chosen.

With the base visual style in place, it was time to start exploring the various button styles. These buttons are the individual actions a user can take with the content on the page. They need to be easily distinguishable but not take up too much real estate. To support this, a combination of icon and text was chosen.

appbar-options
app-bar-visual-vari

Platforms by definition support many different patterns, and our platform was no different. The choices we made with the App Bar needed to be able to scale from product to product and feel as if they made sense regardless of the circumstance.

Platforms by definition support many different patterns, and our platform was no different. The choices we made with the App Bar needed to be able to scale from product to product and feel as if they made sense regardless of the circumstance.

Platforms by definition support many different patterns, and our platform was no different. The choices we made with the App Bar needed to be able to scale from product to product and feel as if they made sense regardless of the circumstance.

Platforms by definition support many different patterns, and our platform was no different. The choices we made with the App Bar needed to be able to scale from product to product and feel as if they made sense regardless of the circumstance.

Platforms by definition support many different patterns, and our platform was no different. The choices we made with the App Bar needed to be able to scale from product to product and feel as if they made sense regardless of the circumstance.

Supporting a responsive browser was a new feature for the platform. Taking this into account we created a system of graceful degradation so that the various components were able to truncate in a conventional manner.

Supporting a responsive browser was a new feature for the platform. Taking this into account we created a system of graceful degradation so that the various components were able to truncate in a conventional manner.

Supporting a responsive browser was a new feature for the platform. Taking this into account we created a system of graceful degradation so that the various components were able to truncate in a conventional manner.

Supporting a responsive browser was a new feature for the platform. Taking this into account we created a system of graceful degradation so that the various components were able to truncate in a conventional manner.

Supporting a responsive browser was a new feature for the platform. Taking this into account we created a system of graceful degradation so that the various components were able to truncate in a conventional manner.

appbar-truncation
app-bar-prototype

With all of the basic design rules in place, we then turned to the live prototype to test our assumptions and gather feedback.

With all of the basic design rules in place, we then turned to the live prototype to test our assumptions and gather feedback.

With all of the basic design rules in place, we then turned to the live prototype to test our assumptions and gather feedback.

With all of the basic design rules in place, we then turned to the live prototype to test our assumptions and gather feedback.

With all of the basic design rules in place, we then turned to the live prototype to test our assumptions and gather feedback.

Fast forward through the feedback rounds...

Fast forward through the feedback rounds...

Fast forward through the feedback rounds...

Fast forward through the feedback rounds...

Fast forward through the feedback rounds...

cloud-console-app-bar

The final, and current design, still utilizes our icon/text combo. We ended up adjusting the page title bar from full color to white inorder to reduce the eyestrain to the user.

The final, and current design, still utilizes our icon/text combo. We ended up adjusting the page title bar from full color to white inorder to reduce the eyestrain to the user.

The final, and current design, still utilizes our icon/text combo. We ended up adjusting the page title bar from full color to white inorder to reduce the eyestrain to the user.

The final, and current design, still utilizes our icon/text combo. We ended up adjusting the page title bar from full color to white inorder to reduce the eyestrain to the user.

The final, and current design, still utilizes our icon/text combo. We ended up adjusting the page title bar from full color to white inorder to reduce the eyestrain to the user.