Brand Design System

Brand Design System

UI/UX • BRANDING • MARKETING

The brand identity was never planned so the colors, fonts, and website felt unfocused and pieced together. The new design system needed to reflect the company personality and address every digital element.

  • discover our core identity and design visual elements that fit.

  • create a unified, comprehensive design system to be used for marketing, branding, product design, and all digital interfaces.

  • build flexible interface components with guidelines that would speed up development.

Starting fresh

The Cabells’ branding had organically transformed over the years without any rhyme or reason. Colors, fonts, and imagery were all chosen without a deep dive into the mission of the company. With new products now in development, it was time for a unified design that we could be proud of. Where to start, though? I needed a new direction and wanted to avoid cliches. As a first step, I chose a single element that I had unconsciously associated with the company during my short time there—a pale shade of blue.

old design elements

Inspiration

The next step was to condense the company down to a few personality traits and core goals to build a design framework around. Matching specific design styles would come later. We’re a small, quiet company without a corporate feel so the words I settled on were introverted and relaxed. The mission of the company is to provide tools to improve the academic publishing process for the advancement of society, an idealistic concept that harkens back to the scientific interest and nervous optimism of the Atomic Age. Truth and progress are important concepts in our age as well, and neither are guaranteed. It just so happens that the pale blue color fit into the now retro mid-century style of that time period. After some time brainstorming, the image that came to my mind was that of a group of scientists living in the mountains away from the pressures of the city, quietly working on their research.

When I set out to design something that feels unique and authentic, I like to use at least 3 different sources of inspiration to pull from. This guarantees a sense of familiarity with just enough variation to avoid cliches. In this case, I chose the Atomic Age/mid-century aesthetic, the reflective and creative mentality of cool jazz, and the solitude of snowy mountains.

inspiration and design reference

A new style started to form that included geometric shapes, solid and heavy icons surrounded by empty white space, and slightly muted colors. My final goal was to refine it into a classic, rational, and inviting identity.

my design style concept with new logo, colors, etc.

Design system

After the core branding was formed, it was time to expand it to other departments like marketing, web development, etc. The main focus, though, was the product itself. The old Cabells website functioned both as a marketing site and the customer application. It was outdated and frustrating to use. I conducted an audit of the site, going through piece by piece, to identify the required components and to make sure every redesigned element would fit into the larger brand.

I sketched ideas first on paper, then created digital wireframes and final mockups. Typography, color, spacing, functionality, and style were all taken into account. It had to work well and look good. A comprehensive design system is the end result of that long process. This set of UI rules and patterns would make our development process quicker in the long run and ensure that the user experience was solid. The goal is to have everything worked out ahead of time and then simply reused later.

typography guide

color and icon guide

UI elements and patterns

marketing page concepts

Problems

This huge project hit plenty of roadblocks along the way. Looking back, the biggest regret I have was not focusing more on accessibility concerns, mainly issues with color contrast. This was my first attempt at designing a complete user interface, and I admit that I focused on making it easy to use (by my personal standards) and nice to look at. Along the way, I learned more about web standards and visual issues some customers were having. I come from a fine art background rather than design, so aesthetics naturally try to take precedence over functionality. The subtle change of fixing contrast ratios caused a ripple throughout the design, and I’m still trying to recover from it. Design is about balance, and if I had to start over I would take a different approach.

I also regret not being able to fully implement the design system with the engineering team. We had to juggle too many projects at one time and couldn’t build a true design system. It works now as my design reference, but without a dynamic and editable single source of code, it’s easy for elements to become outdated and inconsistent.

This is a never-ending process, constantly being updated. However, creating a new identity was the first step before starting work on the next project, the company website.

Related Projects

2019-05-21T14:23:24-07:00