A New Hero System for ZipRecruiter
Overview
ZipRecruiter is a growing employment marketplace of job seekers and businesses that actively connects employers and job seekers.
As ZipRecruiter has expanded over the years, so has its marketing website. It has organically grown to accommodate the latest product features, content, messaging, and aesthetic changes. Years of this resulted in significant design debt that was noticeable to site visitors and our developers.
To understand what needed to be fixed, we conducted a visual audit of every single page on the marketing site. We found many inconsistencies among text size, weight, color, cards, spacing, and alignment. In tandem, we made another important observation: the need for a hero system to adapt content to specific needs.
PROJECT
Hero System Design
MY ROLE
Discovery, research, UX design, UI design, front-end QA
TEAM
Lead Designer (myself)
Creative Director
Motion Designer
Copywriter
Front-end Engineers
Project Manager
Problem
When navigating from page to page, varying sizes of heroes and styles resulted in a fragmented experience. Our task was to create a hero system to adapt to our specific content needs in a consistent manner.
Our lean team took an iterative approach in executing hero options. In our initial research, we gathered inspiration from competitors and dozens of brands outside of the hiring industry where we looked at how their heroes translated across their site. We were specifically inspired by various design patterns, interactions, typography, photography, and layouts that informed our own creative solutions. We broke down each of the site’s strengths and weaknesses, which helped us determine if a particular solution could work for the hiring industry.
During ideation sessions, we determined that the hero of each page should accomplish the following things:
be flexible to accommodate an image (or not), video player, or animation
prioritize a benefit-driven headline with a call to action
include a distinct brand element
BEFORE
AFTER
Design Iteration
We came to the conclusion that our new system should have three sizes of heroes to choose from. Our rationale for choosing a given size should be purposeful and should serve to support the focus of the page content.
Largest: This large image size would serve our homepage and landers that drive action to our registration funnels etc.
Medium: This size houses a smaller image for pages that are more content focused. We used this size for lower intent pages like our How it Works page.
Smallest: This size has no image and strives to inform and direct visitors towards specific action or information (e.g. find out what subscription plan works best for them). Examples include our Contact or Plans pages.
WIREFRAMES
We started to wireframe the structure of each hero making sure to include all the necessary content across three sizes. Here’s some initial exploration putting our sizes to the test. We had dozens of variations determining the placement of the content card paying close attention to the action’s hierarchy based on the intention of the visitor.
COLOR EXPLORATION: TAKE 1
Simultaneously, our marketing design team was refining our visual identity to develop a cohesive and differentiated look and feel for our brand. For the next phase of designs, we applied these new colors, typography, and photo styles to extend the new differentiated look to the site. Our goal was to use the new identity, adapted for the website, to unify all hero sizes.
In our initial color exploration, our biggest hurdle was determining the correct proportion of our brand colors to use. Too much of one color led to hierarchy or accessibility issues, and not enough color didn’t differentiate our brand enough.
COLOR EXPLORATION: TAKE 2
We value what color brings to a design, and we wanted to be thoughtful in its application to clearly communicate the brand without hurting usability.
We inched a little closer each time and started to strike a balance by using a small proportion of our most differentiated brand color: lime green. We used it to help visitors focus on what matters most in a hero section, the headline and call to action.
Refining the Hero Elements
COLOR
We leveraged our lime, by assigning it priority actions. We dubbed the newly minted UI elements, Limelites. We believe that the success of a Limelite depends on it being the only lime-colored UI element in view (except for the logo). In the smaller sized header, the lime UI element rotates vertically and the height adjusts to the number of lines in a headline.
In addition to the lime green, a very light shade of our dark green is used as a gradient background. Its subtle tint is another nod to the identity update while elevating the page content. When exploring the use of color, we felt that a full flood of color in the background was too jarring and was impractical in applying it well across the entire site. The gradient provided a nice balance while allowing our visuals and photography to take center stage.
Here’s our How it Works hero demonstrating the use of color:
1) BALANCED BACKGROUND: Gradient anchors card and visual putting the content
into focus.
2) BRAND COLOR: Limelite guides the visitor’s attention to drive action.
3) CARD CONTENT: Card houses headline, copy, and CTA.
TYPOGRAPHY
Another significant change during the redesign of our headers was typography. To maintain consistency, we introduced a new serif font in our updated identity system. We rolled out the new typeface slowly in order to gauge reactions, applying it at first to select marketing materials such as direct mail, ads and a single landing page. It was well received and also differentiates ZipRecruiter in the hiring space.
When we compared our new serif font against the former sans serif font, the designs looked more elevated and made our brand feel like a more established company (less entrepreneurial).
PHOTOGRAPHY
The role photography plays is crucial in positioning us as a brand. Photography not only draws the eye to the primary call to action, but can also humanize the content by making it relatable. With this in mind, choosing a hero photo should be intentional and directly correlate to the type of content on the page.
On pages where there is no photo in the hero the focus should be on a concise and functional headline. This enables visitors to easily find what they need.
MOTION
Applying subtle motion adds a layer of life and sophistication that helps define our brand’s “body language.” With CTA cards, we added a simple upward motion on page load to add emphasis and focus to the primary action.
With content that benefits from attracting the visitor’s attention, we cycled through the most important part of the headline. This motion technique delivered more than one message in a small piece of real estate.
Measuring Success
In the launch of the new heroes, we wanted to test them against our existing designs as part of our goal in establishing a regular testing cadence. Testing a small portion of the site with new styles allowed us to see if it affected performance. We tested the heroes on our employer homepage and job seeker homepage since these drive conversions for each side of our marketplace. This is similar to AirBnb who’s marketplace consists of guests and hosts.
The test proved that the new heroes didn’t hurt conversions. Now that we had a hero system in place, it would make refreshing the rest of the pages on our site much more efficient.
SEE MORE WORK