Case Study

UX RESEARCH

Usability

Hirehelp system re-design for better usability

HireHelp is a hiring tool for US Districts that make it manageable for k12 schools to process hiring of their school stuffs, like teacher, coach and other stuffs. It helps hiring authorities by Eliminating spreadsheet-based trackers, identifying the most effective recruitment strategies, and set and track clear talent acquisition goals, all with minimal effort.

I helped making the process configuration easy, made pipeline visualization functional and effective filtering of the candidates.

Background

The present case study was a redesign and consulting project. HireHelp approached us to fix a usability problem that needed to be fixed. When I took over this project, I continued to use the colors, font family, and visual tone from the previous project.

my role

I was the solo UX/UI designer on this project and was responsible for consulting and redesigning the service. I owned the end-to-end design process, presented concepts and user flows to cross-functional teams, and facilitated design reviews and iteration with stakeholders and executive leadership.

Problem

District school authorities were the main clients of Hire.ai that used the platform to handle recruitment of the teachers, instructors and other school stuff they may require. The Districts were facing problems managing hiring steps for different roles, pipeline visualization for various recruitments and filtering the applicants.

It was vital for for Hire.ai to make the product scalable and manageable because that's crucial to earn more revenue.

Outcome

The three flows of the system were completely redesigned for a better customer experience of more clarity, efficiency, and accurate user expectation. A new web app was launched in December 2021 and the clients said that it is now 60% easier to manage the recruitment, tracking application pipeline, and filtering applicants.

Duration

October 2021

Tools

Figma, FigJam, Illustrator

Teams

Design: 1 UX designer (me),
‍Engineering: 1 developer,
Stockholder: 1 agent of Hire.ai, product manager

Understanding the Problem

Organizing Steps

Below is an Excel spreadsheet one of client's large districts made to represent the workflow candidates go through in HireHelp for various types of positions. As seen that for each different type of job, there may be up to 25 statuses; in total they have around 50-60 statuses(the highlighted ones are common across roles and white are unique to that role).

As a short-term solution to this problem — to allow districts to accommodate different screening processes for different jobs — HireHelp allowed Districts to edit their Custom Workflow on a job-by-job basis. This means that in addition to being able to customize the master list of statuses from their settings page, they are able, on a job-by-job basis, to select which statuses from their master list are applicable to that job. Thus, for a District like the one below, they would add all 60 statuses to their master status list on the settings page; then when posting jobs, they would select only the statuses applicable to that job posting in the Custom Workflow section.

Configuration of steps is difficult

If a district like the one above has 60+ statuses across various jobs, with the current method, they first need to combine those 60 statuses into a master list on the settings page, before they can select the correct custom workflow for each job.

Figuring out how to combine these statuses into one list in the proper order, such that each job’s custom workflow will also be in the proper order, is time consuming.

Additionally, there are certain special types of statuses in Hire.ai, which means that the order of statuses on the settings page has important implications, so this makes combining multiple workflows into one order even more challenging.

Pipeline visualizations aren’t functional

There are several places in the Hire.ai application where we present a visualization of the screening pipeline. In districts with dozens of statuses in their master list, these pipeline visualizations are not functional.

They aren't functional partially not only because they are very long and overwhelming, but also because we can’t accurately represent conversion rates through the screening process, if the statuses shown are non-sequential.

Process

Kicking it off

Converting business problems into design question.

We started this project by kicking off a team meeting including designers, developers, and representatives of the stakeholder. We discussed the pain points users are facing and fixed the goals Hire.ai is aiming to achieve out of the design. We distilled its needs and transformed them into a design problem that we can work on.

In the previous design, the flow of creating processes, filtering applicants, organizing processes across all the recruitment frameworks, and the way how the applicant pipeline is visualized is usable for recruiters that recruit for 1-4 positions. But the system becomes messy when there are a lot of recruitments going on.

So the design question I asked was:

How can I redesign the system to let the users manage the hundreds of application processes of different types of recruitments while maintaining proper order and having the functional process pipeline for higher usability?

Understanding the workflow

1. Workflow of adding different statuses

The challenge was that there is no structured way to organize the different statuses

So the primary challenge in front of us was the proper information architecture of the statuses. Every job recruitments need different sets of processes and statuses. Some statuses are immutable . Those are not deletable and re-organizable and should be in similar order across all the jobs. Other statuses are optional and can be added as needed.

Old IA of current statuses

Old user flow of making statuses

The problem with the IA and workflow of making statuses

It become painful for user who have 6-7 job openings and each job have 10-12 statuses, that equals 72 statuses in a one single list. The statuses usually look like "resume submitted", "first screening", or "conducted first interview", etc. So, If the user make one new status, they have to drag it across all 70 processes to place in the proper place.

Old IA of current statuses

Old user flow of making statuses

2. Pipeline visualization

The challenge was that the pipeline showing sequential statuses of ALL processes for each job postings.

So, it's not group-able by job postings or key/immutable steps. The lack of structure and proper filtering option made it 70-80 steps long. Although it shows the number of applicant in the pipeline but that dosen't help if user needs to understand the relative conversion rate.
‍

Present method of pipeline visualization

So, to maximize the usability and manageability of multiple types of hiring and pipeline visualization,

I need to redesign the structure of the information architecture of the statuses and redesign the pipeline so that it is structured, filterable and conversions are easily understandable.

Optimizing the old IA and user flow

The user story to cover adding statuses flow

I wrote 2 user stories to cover adding and managing statuses. One for adding statuses to the master list and other is for assigning those statuses to job postings, keeping in mind the strict order in the list.

The second one is relating to the pipeline visualization and user interactions with it.

1. User story to add and manage statuses.

2. User story to visualize pipeline

In order to adding the statuses to the Master list while keeping the sequence right, we implemented grouping the statuses. What we found that, every status the users create can be grouped according to their purpose. It will reduce the 80-90 different statuses into 6-7 main statuses containing related sub-statuses.

For example, the statuses like "Collection of application, short-list the applicants, and Send the applications to HR" can be the sub-status of "Hiring pool"- the main status.

This grouping of the statuses will be helpful in assigning statuses to new job postings by selecting them from sub-statuses of few main statuses.

We also found that, in the case of adding new statuses, users want to add them before or after at specific steps (sequencial), respecting immutable statuses. So we provided them the CTA for adding statuses where they want it to.

We updated the information architecture and user flow accordingly.

New information architecture for status list

New user flow for making custom and sequential statuses and sub-statuses

New pipeline visualization structure

Our new pipeline visualization is changed significantly because from the top view, it's showing the number of applicants in each collection of statuses as oppose to showing ALL the statuses across all the jobs.

Moreover, the user can see the number of applicants belonging to sub-statuses of each status collection.

This chart is filterable by job postings to see the pipeline of applicants in each statuses of the specific jobs.

Re-designing screens of adding status.

Simplifying flow of adding statuses that don't make the list large and are in proper sequence.

Instead of displaying 70-80 sequential steps, the users will see only 5-6 main status-collections. Then if needed, these collections are expandable. User have option to add statuses exactly before or after immutable steps, like "Hiring pool" it the image below- to maintain sequences.

These immutable statuses are similar across all the job processing and cannot be altered position. Some of sub-statuses under this item will be selected by default. But user can add sub-statuses under immutable statuses.

Selecting status workflow for different jobs

Simplifying flow of assigning statuses by simply checking and unchecking of simple list and nested list items.

Previously, when posting a new job, users needed to assign statuses for process workflow by checking boxes from a list of 70-80 statuses. It was harder to assign specific status that should be after a specific step (sequential).

In the new design, all user needs to do is to check primarily which status collections are relevant for this job and then what sub-statuses are relevant. They have to select from 5-7 options including immutable collections.

Immutable statuses are checked by default and can't be changed. Although, the user can select the sub-statuses that belong to this immutable collection.

Interactive and functional pipeline visualization

Simple and interactive pipeline that is able to tell a lot, but when it's necessary.

Our simple bar chart is "status-collection-led" and primarily only shows the number and proportion of the applicants belonging to each collection. Different colors represent different sub-statuses which is dynamic as the number may fluctuate according to the process.

When expanded, it will show the specific proportion of the applicants belonging to each sub-status.

The result

Hire.ai implemented our new design is implemented at December 2021. The process of all three interactions proved more than 50% better than the previous one, as disclosed by the stakeholders.
The customers filed fewer complain about the long list, managing and assigning statuses.

17%+

Client retention rate increased by more than 17%