CircleCI Brand System

Brand / Design Systems / Web

TLDR

Our team performed research to understand how our brand and visual language was being perceived. From that research we began a brand refresh that would better communicate our brand values to users. I led workshops to align the team on these new designs and document them in a new brand guide.

Geometric mechanical pattern on a dark blue background.

Research

Goals

  • Explore reactions to previous CircleCI design elements
  • Identify what elements are working and aspects that can be optimized in future visual design development
  • Determine guard rails that allow us to maximize design flexibility while staying on brand

Method

Digital Dialog Method on an asynchronous platform. Questions were posted and answered at the users own pace over the span of one week. 22 users were recruited– half customers, half prospects.

research screenshots showing how data was being synthesized

Research Synthesis

Through our research we distilled the data into 6 key findings that have become the design principles for our entire visual system.

Brand guideline page explaining CircleCi's core design principles

Exploration & Design Workshops

One of the challenges of exploring a brand refresh is knowing when to stop, how to align the designs, and where to start finalizing decisions.

We tackled this challenge by running weekly workshops dedicated to facilitating difficult discussions. This allowed us to make decisions we could incrementally introduce between all our explorations.

Topics we tackled included color, grid, shape language, pattern, and composition. We made sure to test the system on all uses cases from web to ads.

Mural of brand explorationsnotes with images detailing pattern guidelines

Brand Guide 1.0

We've externally released an updated brand guide detailing the most important and foundational parts of the brand. We are in the process of solidifying and documenting brand guidelines around our brand patterns. The guide will continue to expand to cover more details on our grid, colors, and illustrations.

circleci brand guide pages

Brand Application

Along with documentation I had the responsibility of implementing the new brand refresh on our redesigned homepage and product pages. For the product page in particular I proposed implementing an illustration style that would leverage our product UI in combination with our pattern library.

CircleCI product page site mockup
Product page execution environments section site mockupproduct page security section site mockup