A popular venture capital firm wanted to create a platform to manage hiring for its portfolio of companies. The end product required was a web app that is to be used by 2 parties -

  1. Appointed platform Admins who review applications and shortlist based on different criteria
  2. Managers from companies who review candidates based on requirements and approve or reject them

Role

As a designer my role is to capture the use cases of each of the parties ( the admins and the hiring managers ) that operate this tool and facilitate the best user experience across them. Most importantly the objective is to get the right candidates show up for the right requirement and get them hired.

Working remotely

This project was worked on entirely remotely. We used a set of tools for facilitating collaboration -

  1. Slack for instant communication with stakeholders and product manager
  2. Trello for project management and tracking progress
  3. Invisionapp for collaboration on information architecture, task flows and high fidelity prototype.
  4. Sketch for UI design
  5. Zeplin for delivering assets and shipping final designs 1

We collaborated with the stakeholders twice a week, along with the product manager and presented our approaches. We gathered feedback and presented our assumptions to be validated. We used these insights to move forward with the design process.

Platform Goals

The objective of the tool was to work in a 3 step process.

  1. Applied candidate profiles float in the platform waiting for admins to take action
  2. Admins shortlist these candidates based on their qualifications
  3. Managers look up and find candidates based on requirement and approve or reject them for their role

The role of an admin was questioned initially but the client insisted on working with an admin to keep the platform applicants highly relevant and take care of aspects like email confirmation, updated portfolio, actively seeking opportunity etc. We decided to work with it.

Design challenge

For the admins - Product experience for reviewing tens or hundreds of applications, looking up their information and shortlisting them. Like the cat below -

For the managers - Searching and finding candidates matching for respective requirements and approving or rejecting them based on their skill sets.

Personas

We made two main persona’s representing the admin and the manager of the company respectively. Their goals and pain points are highlighted below that helps us understand their existing workflow better.

2

3

Competitor products

Though the use cases are completely unique to the platform looked at couple of other platforms which had job posting management. I learnt how they handled the search and find experience for job applicants.

As expected each applicant was associated to a job listing which was paginated and accessible through a dropdown. There were some interesting features in these tools that helped the hiring managers -

  1. All listings were associated to a job posting and you can review all the applicants related to it
  2. Viewed candidates appeared faded as a visual aid which can be helpful when going through multiple applicants
  3. Actions that can be taken on a candidate - New, Reviewed, Phone Screened, Interviewed, Offer Made, Rejected, Hired
  4. IIM jobs has a filter panel with multiple search criteria to filter out the right candidate
  5. Jobs can be posted from within the platform which appears on their job listings dashboard available to the applicants

4

5

Journey map

The target audience for this project are internal to the company. The admins were to be appointed newly and assigned roles and the inputs we got from managers is that they needed a candidate for a specific requirement through referral or any other channel which they could review before moving with the interview process.

Since we’re looking at a tool specific to the operating conditions of this audience our first vital step was to create a customer journey map to visualize the workflows.

For applicants

  1. Candidates discover the job application site on social media or a word of mouth referral
  2. Candidate fills out a typeform that captures all the work related information about candidate
  3. Information about the candidate along with his name and other personal details get recorded in the system waiting to be shortlisted by an admin

For admins

  1. Looks at each profile from a list of candidates who have applied for the role
  2. Reviews different work related information entered from the typeform ( on a separate dashboard, not typeform results )
  3. Shortlists candidate based on his / her credibility and relevance to the possible requirements at companies

For managers

  1. Search and find candidates based on requirement and create a list
  2. Review each profile in the list
  3. Approve or reject candidate based on match

Add alerts and emailers to the map

6

Information Architectue

From the journey map it was clear that there were different states to an application which required action taken by different parties.

6

We switched the terminology from Applied to Screening, Shortlisted to Live, Archived to Inactive and added a tab called mentioned inspired from Facebook notifications to highlight all profiles that have the specific user mentioned. However the terminology is consistent across the admin and manager views of the tool.

Profile Views

After trying out a few variations we ( product manager and stakeholders ) liked this information hierarchy where we had all the user information categorized based on states ( Screening, Live, Inactive and Mentioned ) and further filters to segregate them on different criteria.

The users information was moved to an overlay popup which contains links that open on a new tab for viewing.

7

Admin Checklist

Among different data points to verify we found a way to emphasize the actions needed to be taken by an admin through a section called Admin Checklist. This would automatically populate the actions needed to be taken by the admin before shortlisting the applicant.

8

Decision making

One of the experience points we wanted to tackle was decision making around selection of an applicant. Shortlisted candidates are likely to appear on several search results before it finds its right match. We conceptualized a communication channel within profiles that captures comments from each user and makes it visible to everyone

Facilitating teams In the current ways of communication within teams, the managers would find a profile and often had to discuss with a few others on the team before deciding to move forward. The primary communication today for this purpose happens through email. When profiles are discovered on the platform, switching back and forth between email for communication and the tool for taking actions was inconvenience.

This communication feature called “Comments” helped solve both problems in the platform. For future releases we provisioned visibility of these comments for within companies if required.

9

Manager View

The manager views were simply admin views without a provision to take any action. On the backend the clients wanted to track which profile a manager was looking at. We provisioned this by adding a Show Contact Details link which on clicking adds a tracking count on the backend.

10

Applicant flow

Mockups

Profile states

11

The applicants in one of these states needed a clear visual distinction for the state. Though the flow of the tool places the applicants only at the relevant section in the app, we believed visual reinforcing subtly was reassuring. In addition we could accommodate future states if any that was unforseen ( eg needs verification / over experienced etc )

12

Retrieving with Labels

Labels was one of the features we arrived at for better managing actions on profiles for the admins. While on web it is as simple as typing with a space, on mobile the experience is optimized to a simple tap interaction.

13

14

Retrieving profiles based on labels was as easy as filtering from one of the filters. At a single glance an admin could see all the profiles with a particular label.

15

16

Interaction Design

As an inhouse tool the clients wanted the tool to be less about the smooth buttery animations and interactions and more about functional necessary interactions that support the function.

Hence our approach to IXD was basic -

  1. Make interactions support effective workflows
  2. Allow interactions to support faster loading with AJAX or a framework like react or angular
  3. Keep users of the platform informed at every step about the status of action on an applicant

Viewing a profile

One of the ideas around viewing a profile outside of an overlay popup was an inline quick view. This interaction pattern felt more fluid, inspired by an accordion, as against a popup which exists as a separate element. Inline quick view had a better relation to its parent in terms of visual rendering and was one of the suggestions for viewing a profile.

17

Shortlisting a profile

For the managers shortlisting a profile a tags section that helps handle the next steps for the interview and keep track of the progress while sharing this with other team mates. This also reveals the contact information of the candidate which is tracked on the backend for personalized suggestions for the future releases.

18

Setting alerts

Later we added an alerts feature which is a simple email notification sent to the manager when a particular profile with matching information shows up.

19

Completing the customer journey

The last step left was to send emails to the applicants after a hire has been made. We made a set of emailers that is triggered automatically on taking action on a profile.

20

21