Building ZipRecruiter’s Design System

Company: ZipRecruiter

My role: Senior Product Designer

Project type: 0-1

Device: Web, mobile web, IOS, and Android

Audience: B2C

Timeframe: June 2022 - December 2023

Company overview

ZipRecruiter is an online employment marketplace that leverages advanced technology to connect job seekers with employers. Founded with the mission to make the job search process more efficient and effective, ZipRecruiter provides a platform where employers can post job listings, and job seekers can apply, all while benefiting from intelligent matching and distribution technology that ensures the right candidates are paired with the right opportunities.

The need for a design system and modernized UI

As a design team, we encountered significant challenges due to the absence of a design system. This lack of a cohesive framework made designing projects inconsistent and implementing design changes arduous. The absence of a design system resulted in fragmented UI elements, inconsistent user experiences, and increased development times, as each project required unique solutions rather than leveraging a standard set of design tokens and components.

Additionally, the product as a whole looked very outdated (see screens below). It had a gray background, which made it look dated, and many of the pages had an inconsistent look and feel. Overall, the product lacked a modern aesthetic, giving a poor first impression. According to usability heuristics, a minimalistic and modern design is crucial because if a UI looks good and modern, users are more likely to believe it will work better. This perception significantly affects user satisfaction and trust in the product.

Quantifying the need by conducting a UX expert review

As a design team, we conducted a UX expert review of our product to start quantifying the issues we’ve been experiencing. Below are just a few examples of the issues the team identified.

Our UX expert review of ZipRecruiter's entire product revealed 320 issues across the web and mobile web consumer experiences. Notably, 203 of these issues were visual in nature, indicating that a staggering 63.4% of the UX problems could be resolved through the implementation of a design system. These findings provided compelling evidence of the critical need for a design system.

Additionally, our marketing team had commenced a brand refresh with an external agency, further highlighting the urgency of a design system. Implementing the new brand identity across our product without a standardized design system would have been impractical and inefficient.

Given the pressing issues identified in the product development lifecycle, the UX expert review findings, and the necessity for a streamlined brand refresh, senior leadership granted us the green light to develop and implement a comprehensive design system.

Establishing design principles and aligning with the brand refresh

As ZipRecruiter embarked on a brand refresh, incorporating new elements into our brand identity, it was crucial to align the foundations of our design system with these updated guidelines. The new brand persona, "Maverick on a Mission," encapsulated our renewed vision and commitment. Described by three key attributes—fresh, effective, and human—this persona provided a clear direction for our design endeavors.

Recognizing the importance of integrating these brand elements into the design system, I transitioned from my role as a feature designer to become the sole design systems designer. This shift allowed me to fully dedicate myself to the creation and implementation of the system, ensuring that it reflected our refreshed brand identity.

Design Principles: ensuring modernity, simplicity, and accessibility

To create a system that was both aligned with our brand and user-friendly, we developed specific design principles. In addition to adhering to the brand guidelines of being fresh, effective, and human, we established that our design system should be modern, simple, and accessible. We believed that if the user perceived the product as modern, simple, and well-organized, it would enhance usability and trust in the product.

Defining our foundational styles

Now that we’ve established our design principles, it was time to explore and define our foundational styles which will be used to build the rest of the design system.

Typography: Establishing visual harmony with the numeric scale minor third

The first foundational element I focused on for our design system was the typography scale. Our primary typeface, Aeonik, was chosen for its subtle personality and exceptional legibility, making it ideal for both print and digital applications.

To create our typography scale, I explored numeric scales derived from musical intervals. Just as musical intervals are selected for their harmonious sounds, typography scales based on numeric ratios produce visually pleasing results. These scales provide a consistent framework for selecting typography sizes, serving as a flexible baseline rather than rigid rules.

Since our product is so text-heavy, we needed to choose a scale with good visual contrast to make our pages easy to scan and read. So I quickly mocked up a few screens and applied the different scales so that we could make an informed decision as to which scale worked the best for our product.

Minor Third

Major Third

Perfect Fourth

We ultimately decided to adopt Minor Third as our typography scale because it had the perfect balance of contrast and optionality so we could successfully design a strong visual hierarchy between different elements on the screen. We ultimately decided to adopt Minor Third as our typography scale because it had the perfect balance of contrast and optionality so we could successfully design a strong visual hierarchy between different elements on the screen.

Ensuring accessible typography

I kept accessibility top of mind when defining our typography scale. Although WCAG (Web Content Accessibility Guidelines) does not specify font sizes, the Bureau of Internet Accessibility recommends a minimum font size of 16 pixels for body text to enhance readability. Accordingly, I set our base font size for body text to 16 pixels and ensured that our smallest text, used for captions and smaller labels, was no smaller than 12 pixels. Additionally, to comply with WCAG guidelines SC 1.4.12, I ensured that the line height for body text was at least 1.5 times the font size, applying this standard to both the 16-pixel, 14-pixel, and 12-pixel text. This approach promotes readability and ensures a better user experience.

Spacing: Maintaining visual rhythm by utilizing minor third

Following the successful creation of our typography scale, the next foundational element I focused on was generating our spacing scale. Recognizing the importance of maintaining visual consistency and harmony across different pages, I also decided to use a numeric scale for our spacing. To retain the visual rhythm established by our typography, I also opted to use the minor third scale for our spacing scale.

Corner radii: Balancing aesthetics and functionality

The next critical step in our design system development was defining our corner radii. In our product, buttons initially had a super-rounded 48-pixel corner radius. Before establishing a corner radius scale, I conducted research to understand the implications of different corner radius styles and what they convey to users.The next critical step in our design system development was defining our corner radii. In our product, buttons initially had a super-rounded 48-pixel corner radius. Before establishing a corner radius scale, I conducted research to understand the implications of different corner radius styles and what they convey to users.

Given our brand refresh that emphasized being fresh, effective, and human and our goal of maintaining a modern and simple aesthetic, we decided to use an 8-pixel corner radius for our primary components like buttons and inputs. This choice provided a balance between a friendly appearance and a professional, clean look, aligning well with our brand identity.

Iconography: Reflecting our human touch

Following the establishment of our corner radii, we moved into the iconography phase. The goal was to ensure that our icons complemented the moderate corner radius style and reflected the personal, human touch our brand represents. We selected an iconography set that had a hand-drawn feel, conveying warmth and approachability while maintaining a modern and effective appearance. Although I did not personally design these icons, we carefully chose a set that embodied our brand's personality.

Color: Overcoming the challenges of a color palette designed for the needs of marketing and not product design

The next major decision in our design system was establishing our color palette. This process was particularly challenging because product design did not have a strong representation during the brand refresh decisions. While our VP of Design was involved, the specific needs of the UI were not fully considered alongside the requirements for marketing’s print and digital assets. Consequently, the color palette we were given presented several challenges. I’ve provided the brand refresh color palette below.

Challenge: Using Zip Green as our primary color

Our new primary color, Zip Green, was intended to be used as our primary button color. However, this color posed significant issues:

1. Accessibility: Zip Green did not meet accessibility contrast ratios when paired with a white label. This required us to use a black label on the green button to meet accessibility standards.

2. Visual impact: The green button with a black label appeared jarring on white surfaces, conflicting with our brand's desired human, effective, and modern aesthetic.

Solution: Use black as our primary button color on white surfaces

Given the challenges associated with using Zip Green as our primary button color on white surfaces. We decided to adopt a black button with a white label instead. We decided to still adopt the Zip Green button into our system but specified that it should only be used on pages with dark backgrounds (like interstitials) or as our primary button when we create a dark mode theme.

Challenge: Building our neutral scale with Zip Gravitas

Marketing's primary “black color," Zip Gravitas, was a dark greenish-blue hue. This posed several challenges for our neutral scale:

1. Color neutrality: Building a neutral scale off a blackish-blue base resulted in a scale that was more saturated and blue, rather than neutral.

2. Visual clarity: Using Zip Gravitas for typography, buttons, and overlays led to a UI that looked muddy and lacked clarity.

Solution: Use Zip Grey to build our neutral scale

To resolve these issues, I used Zip Gray, a more modern base color, to develop our neutral scale.

Challenge: Lack of UI utility colors

Another significant challenge was the absence of utility colors in the brand color palette, such as background, stroke, and status colors. This limitation restricted our ability to communicate different states and feedback to users effectively.

Solution: Generating a spectral color scale

To address this, I generated a spectral color scale based on Zip Green. This scale provided a harmonious range of colors that complemented our primary brand color. I created a scale for each color ranging from 50 to 950, resulting in a full spectrum that included shades of red, blue, and other necessary hues. This comprehensive scale ensured that we had the flexibility to address various UI needs, such as error states, informational messages, and success indicators.

As a next step after generating the spectral scale, I reduced the color palette down to just the hues necessary for our UI utility needs. This constrained color palette was crucial for maintaining consistency, clarity, and efficiency in our designs. By limiting the number of colors that designers had access to, we ensured a cohesive visual identity and made it easier for designers to apply colors purposefully. This focused approach helped us create a more intuitive and accessible user experience while simplifying the design and development process.

Ensuring accessibility compliance

I kept accessibility top of mind when defining the final color palette. Adhering to WCAG (Web Content Accessibility Guidelines) standards, I ensured all text elements met a contrast ratio of 4.5:1 against their background colors, as outlined in SC 1.4.3. This ratio ensures readability for users with visual impairments. I maintained a minimum contrast ratio of 3:1 for interactive elements like buttons and inputs, as recommended in SC 1.4.11. By prioritizing these accessibility standards, I aimed to create a color palette that is both visually appealing and inclusive, ensuring that all users can interact with and benefit from the design effectively.

Component creation: Prioritizing execution over documentation

With our styles defined, the next phase was to move into component creation. A significant challenge during this phase was the lack of product and engineering stakeholders. This was solely a design team project aimed at quickly creating components for consistent use in designs, with the engineering integration to be figured out later. Our VP of Design advised me to prioritize component creation and product redesign over documentation, which, while practical in the moment, later led to issues.

To ensure I built only necessary components that worked across different devices and met our needs, I began by redesigning our entire Job Seeker product. This process involved creating design components as I progressed, presenting them during design reviews, and iterating based on feedback from the design team.

Ensuring accessibility in component creation

I kept accessibility top of mind when creating our design system components, ensuring that all aspects of the design adhered to key accessibility standards to provide an inclusive user experience.

Touch target sizes

I adhered to WCAG SC 2.5.5, which specifies that touch targets should have a minimum size of 44x44 pixels. In addition, Apple’s Human Interface Guidelines also recommend this minimum size. To align with Material Design’s higher recommendation of 48x48 pixels, I ensured that all components with touch targets maintained a minimum size of 48x48 pixels. This approach guarantees accessibility across web, iOS, and Android platforms.

Focus states

I followed WCAG SC 1.4.11, which emphasizes the importance of clear visual cues for focus indicators. I implemented distinct focus states to assist users who rely on keyboard navigation in easily identifying the currently focused element.

Collaboration with engineering

By January 2023, approximately six months into the project, we finally secured engineering resources from the web and mobile apps teams. The inclusion of engineering resources and product support (only from the mobile apps), was a huge step forward. However, on the web side, the absence of product support remained a significant challenge. To solve this, we formed a design system working group where web engineers volunteered to work on components in their spare time. This lack of product support and full-time engineering dedication for our web product led to several issues, including inconsistent implementation and slower progress.

Implementing design tokens with Figma variables

Around the same time, Figma released its variables feature, enabling the implementation of design tokens directly within Figma. This presented an ideal opportunity to collaborate with both engineering and design to create and integrate design tokens. Design tokens are named entities that store visual design attributes, such as colors, spacing, and typography, and they help bridge the gap between design specifications and implementation.

Best practices for design tokens:

As I began to explore different naming structures for our tokens, I kept the following in mind:

• Consistent naming conventions: Ensure that tokens have clear, descriptive, and consistent names to facilitate easy understanding and usage across teams.

• Scalability: Create a naming structure that allows for future expansion without necessitating a complete overhaul of the system.

Color tokens

Space tokens

Radius tokens

Finalizing the design system and redesign: Successes and challenges

By April 17th, 2024, we successfully completed Milestone 1 of the redesign, implementing the entire design system across iOS and Android. This achievement was due to strong product support and effective collaboration between design and engineering teams. The redesign was fully integrated, leading to positive user feedback and improved analytics.

The mobile app experience before the redesign

Milestone 1 of the mobile app redesign

Milestone 1 involved a 1:1 test of the redesign to ensure stability while minimizing risk. Results showed a 3% - 8% increase in average clicks, a 1% - 6% rise in cost per click revenue, and improved engagement metrics such as MAU rate, Responder rate, Avg Responses, and Clicker rate.

Milestone 2 of the mobile app redesign

Milestone 2 focuses on additional UI enhancements that were deferred in Milestone 1.

Web implementation: ongoing challenges

On the web side, the implementation of the design system faced ongoing challenges. The lack of fully dedicated engineering resources and product support meant progress was slower and less consistent. Engineers volunteered their spare time to work on components, resulting in varied levels of commitment and quality. This ad-hoc approach led to coordination issues and a lack of cohesive implementation across the platform. I’ve created a JIRA board to help track their progress which has helped but web still has a long way to go.

Home

Job page

Messages

Profile

Lessons learned: Hindsight and best practices

Reflecting on the project, several key lessons emerged:

1. Early Collaboration: Involving product and engineering teams from the start would have fostered better collaboration and streamlined the process. This early involvement could have improved decision-making and design system integration.

2. Comprehensive Documentation: Prioritizing thorough documentation from the outset would have minimized communication challenges and provided clearer guidance for engineers across iOS, Android, and web platforms. Detailed documentation also supports component refinement, resulting in higher-quality outcomes.

3. Three-Pronged Approach: The success of the mobile app design system relied on active involvement from design, engineering, and product management. This collaboration ensured all perspectives were considered, contributing to a cohesive design system. The absence of product support in the web implementation led to coordination and direction issues, highlighting the importance of product management.

4. Effective Token Implementation: Design tokens and a clear naming convention facilitated collaboration between design and engineering. Implementing tokens early streamlined development and maintained visual consistency across platforms.

Conclusion: Enhanced consistency across platforms

implementing the design system at ZipRecruiter was a challenging yet rewarding endeavor. The redesign significantly improved visual consistency and user experience on iOS and Android, addressing previous inconsistencies and streamlining future development.

Moving forward, it’s crucial to apply these lessons to the web implementation, emphasizing early stakeholder involvement, thorough documentation, and a collaborative approach. By leveraging these successes and addressing remaining challenges, ZipRecruiter can enhance its design system and deliver a seamless, engaging user experience across all platforms.