Artificial intelligence App

UI / UX Case Study


The recruitment app, powered by AI, streamlines the recruitment process by utilizing data farming to identify the most suitable candidates for job openings. This eliminates the need for employers and job seekers to invest significant time and effort in the process. The platform is designed with security and privacy in mind, and it also tracks email activity for added convenience.

Problem to Overcome






UI / UX Design


Artificial Intelligence App

Project Duration

Feb 2023 - April 2023 (3 months)

Design Process Journey

We followed a comprehensive design process to ensure the best user experience for our project. Our process involved careful research of user needs and behaviors, leading to the development of an intuitive and easy-to-follow process that includes the following steps:


  • AI Matching: We utilized AI algorithms to match candidates with suitable job openings, resulting in improved process efficiency and effectiveness.

  • Keyword Search: Our platform includes efficient keyword search features that enable candidates to easily find relevant job openings and employers to efficiently match candidates.

  • Email Automation: Our system automatically sends email notifications to candidates to gauge their interest in job openings.

  • Private Protection:  We handle candidate information confidentially and securely, adhering to data privacy compliance regulations.

  • Data Farming:  Our AI-driven candidate sourcing platforms collect and analyze candidate data from multiple sources, identifying patterns and ensuring data privacy compliance.

  • Candidate Sourcing: We prioritize and match candidates to job requirements using AI-based platforms.

  • Application Tracking: Our software tracks job applications and candidate email activity while respecting privacy.
    Screen Enhancement: We establish effective and continuous screening processes for candidates.

  • Transparency: We design an efficient and transparent recruitment process that benefits both candidates and employers.

Recruitment Consultant Flow Diagram

A recruitment consultant flow diagram is a visual representation of the process followed by a recruitment consultant to find and place suitable candidates in job positions for their clients.

Admin Flow Diagram

An admin flow diagram is a visual representation of the process followed by an administrator or an administrative user to manage and operate an application or system. The flow diagram typically shows the different stages of the administrative process. 

Low-fidelity wireframes

Once the planning is finalized, we begin the design process by sketching ideas on paper. Next, we use Figma to create low-fidelity designs based on our sketches. During this stage, we finalize the components and create rough images of how the application will look.

Style Guide

Tech Stack

This document serves as a guide for the design elements in the high-fidelity design, providing information on how each element should look. The primary objective of this style guide is to enhance performance and save time. It covers various aspects such as colors, typography, headings, body copy, and image captions.


The colors used in the project are displayed in color palettes.


Font family (Lato)

The font family that we utilized in this project is Inter. This typeface is a neutral, versatile, and Sans-Serif font that serves as the system font for several Apple operating systems, such as iOS, iPad OS, macOS, and tvOS. Inter comprises nine weights, four widths, and variable optical sizes that optimize legibility. Additionally, it includes a rounded variant.


The icons that we used in the project are:

UI Kit Component

A UI kit, short for user interface kit, comprises various design elements such as UI components and styles that provide meaning and functionality to users. These components include navigation menus, input fields, and tiles which we used to speed up the design process and achieve our project milestones.

Alignments and Grid

For our project, we utilized a 12-column grid system with a margin of 25 pixels. The size of the icon boxes varied according to the specific requirements. The height between sections was also set to 25 pixels, as well as the distance between two sections in the navigation bar. We applied constraints and auto layout techniques throughout the design system to ensure that the design remains consistent and responsive across all screens.