Glassdoor - 2018 to 2019

Creating a unified system of design for Glassdoor's jobseeker and employer products

As the Glassdoor product team continued to grow, so did its design language. We had a style guide but it wasn't robust enough to provide the team with enough flexibility to speed up their workflow. We knew we needed to approach the basic components with a more systematic approach and develop guidelines on how and when to use these designs.

I led the creation of our design system Prism to unify the design language between designers, engineers, and product managers.

My Role

Design lead

Team

Jordan Girman, Design Director
Eric Cumlander, Sr. Product Designer
Michael Chambers, Product Designer
Sankha P., Engineering Lead

Timeline

November 2018 - December 2019

Problem

Our product was wildly inconsistent across every page of the website

Since we set up our teams by product verticals, there was a lot of difficulty in maintaining consistency between the products.Development time became costly because designers were handing off inconsistent components to engineers and recreating commonly used patterns over and over again.

Identifying inconsistenes

First, where are all of our inconsistencies?

We started the process off by printing out all of our screens between B2B and B2C doing an audit on the entirety of our product to uncover truly just how inconsistent things were. The resulting find was that we had a whole bunch of crazy inconsistencies in the wild which gave us a starting point of identifying which components to tackle first.

Framework

Focusing our efforts on the foundational elements

Taking inspiration from other design systems, we focused on developing our core foundational elements (atoms) first in order to build out a solid framework for which our components and patterns could be built upon. Defining our typography, colors, spacing, and grid allowed our team to spend less time debating on small details to focus on the larger experience.

the result

A unified visual language

As a result, we consolidated our components into a single source of truth for both designers and engineers to reference.

Impact

An updated design language and faster design exploration for the team

Standardizing our components helped us push our product forward by allowing designers to focus more on the overall experience of products rather than spending time recreating components over and over again. Having a unified design language also helped us create more consistency across our product making the entire experience feel more cohesive.

Documentation

Facilitating the documentation process

We used Zeroheight to highlight usage guidelines, best practices, code snippets with the Storybook integration, and any other key pieces of information to help maintain consistency. Having documentation meant that people had a place to refer to if any questions about the system arose and empowered the team to use the system to its potential.

Rollout process

A slow takeover of the old components

Pushing out the entire design system at once wasn’t feasible so we had to identify key product areas that could road test the new system. To our luck, we were able to work on a full redesign of our enterprise product concurrently with the design system and used that as an opportunity to stress-test the system and present it to key stakeholders and clients.

Our approach was a "slow takeover" where our design system components would slowly be injected into the product until eventually the entirety of our product would be using the new system. As of October 2019, about 80% of our employer product and 10% of our jobseeker product uses the new design system components.

Takeaways

Communication is essential
Having so many moving parts of a product meant that communicating out updates about even the smallest components was crucial in making sure everyone was using the most up-to-date components. We test-drove multiple solutions from bi-weekly email newsletters and Zeplin/Slack integrations to weekly design team updates until we ultimately landed on utilizing Zeroheight to gather all documentation and updates.

‍Creating a roadmap is essential
We went into this process with a vague idea about what we wanted to do but we didn’t know exactly how to do it yet. Once we identified what components we needed, we had a clearer path forward. However, because the design systems team did an 80/20 split of time, things often fell off the radar and momentum forward often fizzled out due to time constraints. Developing a roadmap and aligning it with the product goals could have helped us be more successful from the get-go.