Thailand's first locally developed Applicant Tracking System
What I Did
-
Rebranding
-
Website design
-
UI UX design
Other Team Members
-
Isaac – Architect
-
Phu – Full Stack Developer
-
Luc – Full Stack Developer
Tools I Used
-
Photoshop
-
Illustrator
Project Timeline
-
11 months for V1, design and development
What is RecruitCraft?
In 2012, Isaac developed an ATS for a recruitment agency as a side project, but soon realized its potential in the Thai market at large. He started getting more recruitment agencies as clients and within 2 years he had about 20 clients.
When I joined RecruitCraft in 2016, Isaac was in the process of making it a web-based product (earlier it was a desktop software that needed to be installed).
With my design skills and Isaac's tech prowess we took RecruitCraft to the next level, quickly signing up major clients in Thailand. Today RecruitCraft is used by leading banks, property developers, and FMCGs in the country.
The RecruitCraft website has been out of commission for a while now, you can find it in the Way Back Machine here though.
Why go web-based?
As the client base grew, the desktop software was having trouble in terms of scalability:
-
Pushing product updates for desktop software was difficult.
-
Desktop software is not mobile friendly.
-
Easy to implement a smooth free-to-try experience.
Branding.
The Logo
The RecruitCraft logo depicts the Recruitment Process, with the Human in the center. The arcs lend the logo a feel of circular motion, a process, a cycle.
The outer arcs represent the ever-evolving needs of employers, and the constant process of searching and evaluating candidates.
The central arc represents the Right Talent for the job; something that all recruiters aspire for but very few are able to get.
We understand this dilemma and created RecruitCraft with the objective to enable recruiters to get the right people for the right job in the shortest possible time.
Website Design.
Some designs from the website below:
UI Design
This was back in 2016, when online prototyping were in their infancy. In fact Figma and Adobe XD had just come out. At this time, most of my design work was done on either Illustrator or Photoshop. It required a lot of close collaboration with the developers to get the interactions just right.
Some of the screen and component designs below (more coming as I complete the case study):
The Candidate Details screen
The layout brings focus to the candidate's CV, something a majority of our clients felt was important for their screening process. The quick access widget on the right allows recruiters to quickly add notes, tasks etc.
The Quick Access Widget
Ås the utility belt is to Batman, so is the Quick Access Widget to the Recruiter. This widget enables recruiters to quickly add a note, a task, attach a file, refer to past emails, and view activity history, while on the candidate profile.
Personas
3 types of users interact with this system
-
Recruiter
-
Hiring Manager
-
Applicant / Job Seeker
PERSONAS
Anchalee
-
Recruiter
-
29 years
"I want to find the best matching candidate quickly, contact them easily and put them into the job vacancy workflow without jumping between separate systems."
Somyod
-
Hiring Manager
-
39 years
"I want to review and interview candidates suggested by the recruiter and provide my feedback quickly and easily."
Aphiwit
-
Job Seeker
-
26 years
"I want an easy, smooth and transparent application process when applying for jobs online."
The Flow
I mapped the flow for each of these users and to see how they interact with each other.
Interface Design
RecruitCraft has 2 main sections, namely:
1. Candidates: Search for candidates and manage the candidate pool.
2. Vacancies: Create and manage job vacancies.
Other sections include (used primarily by recruitment firms):
3. Companies: These are your clients
4. Contacts: These are contacts within those clients
5. Placements: Generate invoices for candidates you placed with your client.
General Layout
To develop familiarity for the user and reduce learning curve, I designed a standard layout for lists that would work for each of these sections. For example, below you can see the candidate list where I've marked each of the standard elements. Each section has the same layout, with just minor differences.
1. Main Navigation
The main navigation pane uses a nested layout, enabling users to open multiple tabs under each section so they can easily go back and forth, without having to load screens every time.
2. Search
For the candidate section, the search box can be expanded into an advanced mode that allows criteria-based boolean searches, field based searches or availability based searches (for shift workers). For all other sections, the search feature is basic, using just keywords.
3. List
The list is made up of tiles that were designed based on feedback from recruiters. From my interviews I understood that recruiters preferred seeing summary information about candidates when scanning through lists. Below you can see the anatomy of the tile.
4. Bulk Action Bar
Bulk actions can be carried out after selecting multiple list items. Each section displays different options for bulk action as the context is different. Below you can see the options for bulk action in the candidate list.
5. Filters
Recruiters reported the needed for powerful searching and filtering features, so I added a configurable filter pane on the right. Users can filter based on the existing options (which can be added or removed from the admin section), or even create a custom filter as needed.
Other Sections
Below you'll see a similar layout used for all other sections.
Candidate Profile
The candidate profile showcases the Resume front and center. Recruiters had expressed a clear need to see the Resume as a priority so they could evaluate not just the qualifications but also how the Resume looks.
1. Candidate Summary
This forms the header of the Candidate's profile, includes Name, Position, Company, Salary Info, Contact Info, Source and Nationality.
2. Candidate Resume Viewer
I wanted this to be more than just a viewer, and I'm glad my awesome team created the coolest tool I've seen. The resume viewer in RecruitCraft is truly unique in how the user can select any text and send that to a field via the context menu. This features is a big favorite for recruiters!
3. Tabs
These tabs let users navigate to other screens within the candidate profile, such as the candidate details page where all fields are available for editing. Users can also access notes, documents, emails, tasks, history, and vacancies that the candidate has been shortlisted for.
4. Action Bar
Similar to the action bar in the list view, this area contains buttons necessary for performing common actions for the current page. In case of the candidate profile, these actions include editing, shortlisting, sending an email and so on.
5. Tags
Tags are super useful for earmarking candidates that users want to look up later via the search feature in the candidate list.
6. Candidate Quick Access Widget
Since recruiters need to regularly add notes and tasks, review documents and refer back to emails, I designed the quick access widget to occupy minimal space while offering maximum utility. This widget is available for candidates as well as vacancies, companies and contacts, with minimal differences in each.
Vacancy Page
This is where recruiters create and manage vacancies, including the vacancy workflows and putting shortlisted candidates through the relevant stages.
2. Shortlisted Candidates
This section contains the candidates that have been shortlisted to the vacancy in question. Recruiters can preview the candidate profiles from here directly,
6. Vacancy Quick Access Widget
For the vacancy section this widget starts with a 'workflow' tab which displays the different stages of that vacancy with a count of candidates in each.
Key Usability Improvements
While working with clients I received a lot of feedback in terms of usability and I always gave each idea due consideration. This allowed me to make meaningful design updates to RecruitCraft, thereby making users' lives easier and happier.
1. Quickly cycling through candidates
A common request from users was to have the ability to cycle through a list of candidates without having to open each one individually first.
For this, I designed a preview pane that appears as an overlay, where users can view the candidate details and go forward / backward in the list without leaving that page.
This applies to any page where a list of candidates is visible, for example, the Candidate List or the Vacancy Page.
2. Quickly update candidate fields with data from the Resume
From my observation I could see that recruiters frequently came across candidate profiles that had either missing or incorrect data. For example, the resume parser might have identified the wrong text as the candidate's position or company. In that case they would have to open the detailed candidate page and edit those specific fields manually.
To reduce these steps, I designed a way to quickly and easily update a candidate's information simply by selecting text from the Resume and update the relevant fields with it.
Recruiters loved it, and this is still by far the most favorite feature across RecruitCraft's clients.
Key Learnings
RecruitCraft was my first real UI UX project and I learned a lot. A few of my key learnings below:
1. Don't presume what the user needs
Initially I often found myself trying to guess what the user would need, and then realize after presenting the solution that the core need was different. This resulted in wasted time for both me and the customer.
2. Manage expectations
Many times users would give me a wishlist of all the features they would like to see and my first instinct was to give it to them and make them happy. However I learned that as a UX designer my role is also to guide the users towards the best possible solution that works for everyone.
3. Don't forget the developer!
Since this was my first project of such a scale, I learned how important it is to keep developers in the loop when designing solutions. I had been presenting slick design solutions to the users which would excite them, but later presenting the same designs to the engineer I would learn about technical limitations, or impacts to other areas of the system, which would require me to redo the designs. The best way is to consult your engineers first!