cuix-logo-2.png

Cloudera Product Design Language

Latest work on bringing the brand and product closer together.

High Level Page Comparison

High Level Page Comparison

A side-by-side comparison of our three main digital properties was useful to show where we can align.

Examples of different purpose

Examples of different purpose

It was helpful to show other examples of web apps that are targeting different audience. While our marketing and customer portal properties target the buyer persona, our products target the technical user. The example on the left shows a site designed for users looking for information—more of our marketing purpose; the one on the right is for technical, analytical users who are scanning through large volumes of data—more of our end-user purpose.

Bringing brand colors into the product

Bringing brand colors into the product

In addition to different audiences, there are other limitations: where the brand team uses proprietary fonts and icon families, the product can’t do that due to the 100% open source nature of products. But, a good way to align is via our color palette.

navigation-before.jpg
 Another way to align is to use the same logo that the brand uses in corporate communications, and bring consistency to our app headers.

Another way to align is to use the same logo that the brand uses in corporate communications, and bring consistency to our app headers.

Product Design Language

Product Design Language

Finally, similar to the brand having clear guidelines for their communication design, we began the process of creating a clear design language to apply across our products. The language is guided by design principles that align to our brand principles and company values.

color-swatches.png
color-accessibility.png
iconography.png
 Branding and principles are applied to the new product user interface, keeping in mind accessibility and our end users.

Branding and principles are applied to the new product user interface, keeping in mind accessibility and our end users.

Moments in the product

Moments in the product

Finally brand expression is brought in by using our brand iconography and modifying it for the engineering persona.