Style Guide for Hired

Rebranding our product design language

StyleGuide_Hero

Introduction

Shortly after I joined Hired in June 2016, our design & marketing teams worked with the agency Moving Brands to overhaul the brand. One outcome of the rebrand was that we moved away from a mellow green & gray color palette to a stronger and more assertive red & black palette. From a pure brand perspective, this color change was extremely important, and very successful in distinguishing us from our competitors. But we knew that in order for it to work in our product design, we’d have to reckon with the fact that red already has strong connotations in the field of user interface design.

Therefore I took it upon myself to rebuild our UI style guide in a way that enabled us to be completely user-friendly while still maintaining consistency with the core brand palette.  I worked in partnership with Cindy Tsui, our senior brand designer on the marketing team. We also involved the product design team as well as key product managers and engineers in order to create broad support across Hired and make our new design language sustainable.

Research

We started by looking through both the existing (pre-rebrand) style guide and visualizing what a simple mapping from our previous brand colors to our new palette would look like. For example, red was our primary color in the new palette, and we examined what it would be like to use it for both for primary buttons and primary links. We uncovered two key challenges:

  1. Red dominated the UI on key pages with several CTAs and links. When we tried to correct this by making some links black, another important brand color, they no longer read as links.
  2. Red has a strong association with danger & errors not only in the world of UI, but in the real world of road signs and fire trucks. But using red to signify errors in our UI would have confused people who had come to see it as our most important brand identity color. So we had the idea of identifying a different color that could work for errors without diluting the meaning of our main brand color.

We considered how other “red brands” handled these issues.  Looking at YouTube, OpenTable and Shutterstock, it seemed that their solution was to use red quite sparingly in their product design – more as an accent color than a primary color.

StyleGuide Research

Design Process

One goal for our style guide was that it had to provide guidance for two very different types of pages – marketing-style pages for the user's first moments on our site and detailed interaction-heavy pages that the user would encounter later in their experience with Hired. The marketing-style pages need to drive the brand with large bold graphic elements and punchy typography. The more interactive pages need to support complex information hierarchies and nuanced sets of actions. Cindy and I worked back-and-forth between examples of both types of pages until we had a coherent set of standards that described both.

StyleGuide solutions

Final Solution

Defining the appropriate uses of red was the hardest decision for us. We promoted it to be the color for only extremely important CTAs. In order to avoid the proliferation of red on the page that would occur if we used it for links as well, we introduced a teal as the primary link color.  We also introduced a second button color, a very dark blue-gray. 

For errors and warnings, we chose a strong magenta in order to avoid confusing users about the meaning of red in our product design. We did some user testing to make sure that this didn’t create any usability problems and we are confident that it did not.

For the rest of the product design palette, we went from four grays to fourteen to cover the needs of our multifarious different page types. We settled on a cool gray range to use in combination with red on our marketing-style pages, and a warm gray range for UI elements to be easier on the eye in the more interactive parts of the site.

The style guide is now complete, and we are currently in the process of working with our engineering counterparts to roll the new styles out across the live site.