INTRVWR

Recruiters need an easy way to track their candidates in the pipeline, and colleagues need a dead-simple way to know who they are interviewing, and when. INTRVWR is a two-sided app for hiring teams to organize themselves, and their candidates, in an easy, swim-lane driven UX.

Background

The client brief covered a few key constraints:

Allow Recruiters to organize and easily see the ‘stage’ of their candidates

Allow colleagues to see who they are interviewing, when, and provide feedback in the form of a rating or score for talent.

Make it easy for both user groups to collaborate in a web app environment.

Design Approach (7 hours-ish)

After reading the design brief, I collected my thoughts on paper and took a look at existing platforms that operate for recruitment, two-way hiring, or project collaboration. Along the way I sketched out notes and ideas between paper & Miro to capture key activities, flows and a mood board that collects some of the stronger concepts out in the world.

After defining key flows: Scheduling and Reviewing Upcoming Interviews, I moved into Sketch to formalize ideas into wireframes and capture a few key screens.

Once I had a few clear app screens, I focused in on moving the Recruiter Landing View into high fidelity to showcase the advanced user use-case in detail.

Keeping thoughts organized with Miro

Tools

Pencil, Pen & Paper

Miro (Ideation, Flows)

Sketch (Wires, UI)

FontJoy, Google Fonts, coolors.co (Visual Design)

User Flows

Given this workflow is two ways, we need to understand what activities are shared between the two user groups, and what activities are unique. Additionally, we need to know when one user group activity should trigger a notification or change in the other group’s experience.

Activities like See Upcoming Interviews, See Candidate Status, and Scheduling Interviews would be brought into wires & ui

Wireframes

Interviewer Dashboard

Provides timeline of upcoming interviews with relevant status, links to job description applied for, and a profile of the applicant (including resumes). Colleagues can also submit referrals.

Displays agenda & co-interviewers just in case a swap is needed, and shows which recruiter scheduled the event - so larger teams can still communicate effectively should anything come up.

Recruiter Dashboard

The landing view for recruiters includes an upcoming master-view of all interviews they have scheduled, as well as a swim-lane driven talent pipeline manager to allow clear overview of candidates and where they are in the process.

Candidate cards include notification badges relevant to the display context: In a schedule they help give notice if events are pending or confirmed. In a pipeline they indicate if feedback is available for review.

Scheduling

Scheduling is a PITA. I can only imagine what fresh hell it is to be a recruiter in a high-growth org. As such, a huge differentiator here is allowing interviewers and recruiters to connect their calendars, and offer a dynamic meeting time suggestion UX. Like Outlook does, but not at all like Outlook does.

This UX provides a quick scheduler based on Interviewers (and back ups) are available at what time. Recruiters can put in a total duration, or add a duration for each interviewer. Times slots are found dynamically and displayed in gold. Black-out means no more than 3 people are available. Grey is available, but not viable for the necessary duration. Recruiters can chose a few times and send a compiled availability to the candidate at the push of a button. Once the candidate choses their preferred time slot, the appointment is confirmed.

Post-Interview

After their interview, colleagues will be able to provide feedback and a rating via modal prompt from their timeline. To keep this as simple as possible, Ratings are on a 5 point scale - 1 being thumbs down (don’t hire), 3 being neutral, and 5 being thumbs up (definite hire!)

Interviewers can see all roles candidate has applied for, their preferred contact methods, and the source of their application.

Score is collected from all colleagues and produced as total average score after all interviews are completed to prevent bias.

High Fidelity

Given the complexity of our Recruiter use case, I wanted to bring the Recruiter Dashboard into high fidelity to capture two unique content interaction types: Interview Timeline and Candidate Pipeline.

Moodboard

While the display components are very similar to one another, the cards in the pipeline can be dragged & dropped manually, or moved programmatically as updated.

I looked to different calendars, project organizers, and profile UIs for inspiration on how to best organize information.

Splashes of yellow capture attention to anything that is pending or new, and both grids break off into the page to reinforce vertical v. horizontal UX. Key activities, such as adding candidates and scheduling interviews are always readily available on the navigation elements.

Colors:

Cool purples & blues are easy on the eyes for workflows, while pops of yellow capture attention and urgency. Deep blues and purples differentiate the experience and provide a rich HUD effect for the agenda timeline.

Typefaces:

Rubik & Overpass

Overpass for user content, such as names and notes. Humanist with sharp, clear edges and light-weight fonts.

Rubik for interface copy and copy generated by the system, such as interview stage, job description, buttons. Blocky and bold.

I initially completed this as part of a timed design challenge for Asana. But because they didn’t hire me, I’m just going to publish it instead.