Finding Best Matched Candidates

Screening candidates efficiently for recruiters and hiring managers




UX Design
March. 2023




UX/UI Designer
Mobile Web Application
Design Lead: Joanna P.
UX research, Hi-fi Mockup, Prototyping
Design Overview

Recommending Best Matched Candidates For Users

Based on filter conditions, group candidates to Best matched, overqualified, and normal. Recruiters and Hiring Managers are able to save time of screening and assorting applicants and find best matched candidates efficiently.

Screening Applicants With Multiple Filters

Users can screening applicants and identify potential candidates with filter conditions. The Best Matched candidates list will be updates with the change of filter conditions.

Tracking recruitment record synergistically

Synergistic recruitment records allows multiple users monitor and record recruitment process, bridge the information gap between members in hiring teams.

Marking Competitve Candidates' Priorities

Hiring managers may prioritize the most competitive candidates and flag them as high-priority to ensure a swift and smooth recruitment process.

Design Context


Divercity is a diversity and inclusion measurement and recruiting platform that helps companies and HR professionals accurately measure and track their diversity, find and connect with diverse talents. It is a start up firm based in LA. Their mission is to demystify and solve the diversity hiring gap in the tech industry and to bring more equity and inclusion through a combination of community, relationships, and artificial intelligence technology.

Design Problem

1. Recruiting platform and job boards overwhelm recruitment team with tons of applications.
2. Easy access to job opportunities for job hunter also increase the number of unqualified and irrelevant applicants.

Design Process

User Archetype

Before get started, I draw two user archetypes for both recruiter and hiring manager to better understand their needs and frustration.


I conducted 3 Interviews, two with hiring managers and one with a recruiter. From the interview, I captured the attitudinal metrics during the interview which prompt my deisgn decision.

😰 Stressful: The recruitment process is stressful. We received lots of applications but there is no way to screen carefully one by one.

🤯 Overwhelmed: Candidates may suit for the position in different ways. Sometimes I feel overwhelmed by different kinds of information that are given.

🤔 Confused: There are information gaps between hiring managers, recruiters and candidates. Sometimes I feel confused after receiving candidate’s email saying they have talked with hiring managers.

😣 Frustrated: Competitive candidates only have short opening window. They may hired by other companies if interviewing process is too long. This is frustrating.

Task Map

According to data we got from interviews, I draw this task map consist both hiring manager's task map and recruiter's take map. There are 7 main steps in in the hiring steps, and in each step, HR and HM involve in the process collaboratively.

Wireframe & Iteration

At the beginning, I drew two different layout with navigation bar at different position and conduct a uesbility test to compare the performance.

After the testing, I found that the layout with left navigation bar performed better. Texts and buttons on side navigation bar are larger and more intuitive. After the test, I draw a low-fidelity wireframe for screening applications flow and managing recruitment process flow.

Testing & Iteration

1. Searching and Archive Positions: adding a search bar and dropdown filter to facilitate navigation.Keep all records for later review.

2. Standard & Freedom: unifying candidates' card size and style on every page. The height is responsive so that can fit various volume of data.Changing the yellow tag background for higher color contrast with background to achieve accessibility

3. Users Free Control: according to users' searching habit I got from testing and interviewing, revising the year of work filter from a dropdown box to a input year range to fit more criteria. And update the status filter from drop box with check boxes on the list to only check boxes which is more intuitive.
4. Error Prevention: Revising the text on CTA button to make the action clearer to prevent false actions. Allowing users to unsave all best match candidates so that they can withdraw mistaken operations.

Concern & Iimitation

Even though the design change may help solve the pain-points that HRs and HMs are facing, there are still some exist concern and limitation.

What I Made

Next Step

1. Conducting further interviews with cadidates.
2. Coming up with recommandation regulations and standards.

What I Learned

1. Spacing

When dealing with the UI and final hi-fidelity mock up, Joanna gave me lots of valuable comments and feedbacks on spacing, which I barely noticed before. Besides, I also got better understanding of design system and how to

2. Error Tolerance

Humans are prone to making mistakes. When doing design, it is important to keep this in mind and create systems that are forgiving, allowing users to recover from errors seamlessly.