CADRE: Platform & Website

Creating the website and the platform gateway UI/UX of CADRE.

CADRE: Branding

Designing the visual identity for the CADRE project.

IUEcho

The proposed digital feedback system for Indiana University

Grantit

The social-credit-based micro-loan solution for Hong Kong Millennials.

Heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Link

Introduction

As an important part of the work I've done working as the UI/UX designer of the CADRE project, I created a complete set of branding material for CADRE including logos, brand colors, and so on. The creation of the branding assets has been documented here. Interested to see actual applications of these graphic assets? See more in my other case study, CADRE: Platform and Website.

Ideation and Sketches

A fun coincidence that happened in the ideation stage in which the team tried to think of a visual identity for CADRE was I and Matthew Hutchinson, our in-house database manager and data schema specialist, both thought of using an owl as our visual identity. In Matthew's picture, the owl would be named Hootenburg and is a post-steam-cyber-punk half-cyborg bird who can shoot laser beams from one eye. For me, thinking of using an owl is not just because owls are my favorite birds, but also because of how owls are often connected to erudition, academia and education. Naturally speaking, owls are also known as great predator birds who possess big round eyes, amazing night vision, wide-spreading powerful wings, and hunting skills. Tying all these traits of an owl to our project, I was hoping the image of an owl would signify what CADRE as a search & query platform is capable of: fast and accurate data fetching, functions that support users to reach target data and network with ease and efficiency, and massive datasets for users to dig into.

Taking a photo of an great horned owl on Wikipedia as reference, I drew the first sketch on my iPad in Procreate:

First sketch of the CADRE owl.

Simplify the Simplification

The team loved the owl, but also posed a very obvious problem: the level of details for sure won't be preserved when the logo is used on a smaller scale, and a more polished, modern, sleek visual style definitely is definitely needed. Additionally, for a single logo, there are too many different visual elements involved, and the impact of each element would be weakened. Soon I created a simplified vector version of the owl:

CADRE owl, second version

Instead of having network as an individual element, I attempted to "combine" it with feathery patterns on the owl's chest; the outcome was better than I expected, so we moved forward with this design.

Another problem emerged: the owl is definitely too tall for a logo. We were not going for anything that's typically round or square, but to cater to the height of the graphics means we could be losing other details because they are simply too small. At this point I had to make a big, hard decision: we are going to use the head part of the owl.

Visual Identity Development

Zooming in on the Essentials

Deciding to only keep the head and nothing else was a big decision for me, because this way I will need to work harder on making the image clear and legible so audience recognizes it easily. A lot of drafts were made during this period, attempting at figuring out what's the best possible style and composition:

Owl head variations.

Other Possibilities?

My boss Val suggested that we don't have to be limited to the owl and I make some "safer" options since after all CADRE is something created in the academia. My immediate thought was letter logos that are very straightforward; for letter logos legibility is also usually not a problem. Some versions I made in this stage are as the followings:

Ideas for CADRE identity other than the owl.

Among the five options listed above, number 2 (first image on the left below) and 4 (middle and right image) are scratched very soon after the first sketches were made. Number 4's problem was simply legibility - the stylized letters was not easy enough to be recognized as "CADRE" immediately; Number 2's problem was the team thought it seemed too general and is not special to reflect what CADRE is; additionally, the "network" element in it does not seem that much like a "network", but rather feels like having more to do with bio-medical or genomic fields.

Scrapped designs: Number 2 perspective letters (leftmost) and number 4 layers + network (middle and rightmost).

Logo options I provided were discussed among project directors and in an all-member meeting. Eventually the team's decision was to move forward with an improved version of owl head.

What color should it be?

Other than typical considerations any team or designer would have for their color palette such as uniqueness, visibility, mood of colors and so on, accessibility was included in our thinking process starting the first day of woking on the color palette for CADRE. I wasn't familiar with accessible design or taking care of audience groups with special needs before this project, but after intensive research and learning I learned that at least on the color aspect, different kinds of color weaknesses and color blindnesses need to be catered to. Typically this is not a major point that'd be considered by VI designers, but I decided to take it seriously because our intention was to build a data-mining platform for everyone.

How people with different color blindness see compared to people with normal vision. Image from Wikipedia. Source: https://en.wikipedia.org/wiki/Color_blindness#/media/File:Color_blindness.png

Taking this into consideration, I came up with four sets of accessible color palettes to be used on the own head logo. All of them involve some kind of blue, which if we refer to the comparison diagram above, tend to be the hue that's the least affected by color blindnesses; worst case scenario the blue gets seen as a dark turquoise color.

The palettes were applied to the shape for demonstration:

Owl head with different colors

At the same time I also tried out each of the other shape options that were not chosen with the four palettes, just to see if any of the combination would strike a second spark.

Some drafts of trying out different combination of shape options and palettes

The Final Design

After some minor tweaks and adjustments, work on creating branding assets for the CADRE project was completed:

A collage of the full set of CADRE branding assets.

Typography Choice

Initially we wanted to use the weight Medium from Benton Sans family, which is an Indiana University brand font. Unfortunately, several details of "CADRE" in Benton Sans did not line up with our vision of CADRE and how we want our audience to perceive CADRE as. See the image below about how Benton Sans Medium is different from our final pick, Yantramanav by Erin Mclaughlin, a font published under Open Font License.

Where Branding Meets Web Design

A perfect example to explain how branding of CADRE influenced web design of CADRE is the web design color palette created after the whole branding.

The web palette created after branding colors are defined.

Colors in the web palette were also used in multiple illustrations, therefore it included a wider range of colors with relatively less contrast.