Style Guide for Hired
Rebranding our product design language
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.
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:
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.
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.
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.