top of page
PayScale Basic.png

PayScale

Industry

Human Resources

Years

2017 - 2018
Website

Project type

PayScale was founded in 2002 to help employees and employers obtain accurate information on job market compensation. Since its founding, it has become one of the leading competitors in compensation data and software.

They came to our team in need of a site redesign. Their primary goal was to increase engagement and conversion for two different user types: employers and employees. For us to succeed, we had to clean up the current UX to guide employees and employers through the appropriate flows.

Mark Avatar PayScale.png
JB Avatar PayScale.png
Mark Nader

Primary UX designer & researcher

Jeff Bick

Creative director

CW Avatar PayScale.png
Chris Woodhouse

Project manager

Multiple stakeholders.png
Client

Multiple stakeholders

2 primary users

HR Pro Avatar.png

HR professional

am performing compensation reviews,

When I

know that the salary we are offering to employees matches their market worth,

I want to
so I can

save our company money while keeping employees happy.

Employee Avatar.png

Employee

am having compensation reviews,

When I

know that the salary I am getting paid is what I am worth,

I want to
so I can

be sure that I am getting paid fairly.

Old Site.png

Original site

PayScale’s original site required users to select one of the two main Calls-to-Action in order to access the navigation. Some of the company’s resources were available below the fold, so there was somewhat of a split in the experience.

We recommended two things immediately: Never hide the navigation, and if the site needs to guide users into one of two directions, make that dichotomy a lot more clear.

Before jumping into the redesign, we focused on the information architecture and site map. Our guiding question was:

“How can we guide HR professionals to the B2B products and employees to the B2C content?”

Original information architecture

IA layout 1.png

PayScale’s original navigation was split into 3 sections. Laying out their site map helped us realize where a lot of confusion was happening.

Vague headers unclear to first-time users, repeated content in disconnected sections, and a large cognitive load of disparate links made it difficult for users to find their way to what they were looking for.

A new information architecture:
two sections for two users

Our proposed site map organized the existing content into two categories, matching the navigation and structure to our users.

Site Map.png
Large Mockup.png
Small Mockup.png
Medium Mockup.png

1 color palette,

2 different users

PayScale is an exciting and energetic brand, so we wanted to capture that while maintaining the professionalism that would be expected from a company that handles a large amount of important data.

Purple left.png
Purple mid.png
Purple right.png
HR Pro Avatar.png
Employee Avatar.png
Red left.png
Red mid.png
Red right.png
HR professional
Employee

A darker, cooler, yet modern palette encourages HR professionals to know that the software they are purchasing is accurate and legitimate.

A brighter and warmer palette invites employees to engage with PayScale’s content, and carries the energetic nature of PayScale’s brand.

B2B Mobile Mockup 1 1.png
B2C Mobile Mockup 1 1.png
Red Mockup.png
Purple mockup.png
bottom of page