As we looked forward into our 3rd year as a company, with over 23 million builds to date and more than 25 employees worldwide, we knew it was time to give our brand an updated look and feel. We worked to create a solid design base and cohesive style sheet. Instead of a huge overhaul to our site, we tackled the redesign like we do most things at CircleCI: by making continual, iterative changes as we determined what worked best for any given scenario.

The Vision

Visually conveying Continuous Integration and Continuous Delivery can be tricky. One of the major decisions we made was to create a streamlined, pragmatic look by focusing on typography and consistency throughout the site as part of our visual direction, and to use photographs only sparingly. When thinking of how to convey any given aspect of what we do and how we do it, we never think to ourselves, “we won’t use a photo for this,” instead we ask, “can we solve this problem or convey our message without one?”. The answer is almost always, “yes.”

The Process

Process_Screenshot_600_x_450

With our design decisions influenced by consistency and reusability, we spent time printing multiple variants of mockups to get an overlooking view of consistency between pages. This helped us identify elements that could be reused throughout the site. Using these key pieces, we built a set of guidelines–our style guide–to establish our consistent design and identity, which not only helps improve the speed and ease of implementation for our future designs, but also helps the workflow between the designers and developers. The style guide can also be applied to non-website specific designs, like build reports, newsletters, email templates, business cards, and sponsorship materials.

The Tools

I used a number of tools during this redesign: Hackpad, Photoshop, Illustrator, Dropbox, and my office white board. :) One tool, though, I found particularly interesting.

Precursor (created by former CircleCI employees, Danny and Daniel!), served two important use-cases for me during this project. One, to jot down my ideas and two, to clarify designs when working with developers.

An example of this: there were some undefined design decisions around how wonky the docs could look on a 27” Apple monitor. A quick jump into Precursor helped iron out some issues by letting me easily show the developers how the design would scale without me needing to go into photoshop and create a mockup in the larger size. Precursor definitely helped to make the design process easier, and I highly recommend it.

Summary

Summary_Screenshot_600_x_450

We hope you enjoy the more streamlined, consistent style that we’ve worked to bring you, no matter which device you’re viewing CircleCI on. Because our process is iterative, we will continue to find and address inconsistencies, bugs, and pieces that we feel don’t quite work right. Feel free to drop us a line with feedback! We’re happy to receive it!

To see more of Dan’s designs, find him on Dribbble.