Portfolio
Rawatib – When Payroll Becomes Automatic
Redesign of a salary tracking application for Algerian workers, featuring a clear, modern, and intuitive interface.
Client
Brainiac
Project type
Web app
Industry
Human Resources
Year
2023
Adopted by
+100 companies
Usage
2,000+ payslips generated / month
Compliance
In line with Algerian law
Deployment
6 months
About the Project
As a UX/UI designer, I was tasked with designing an HR application in Algeria to simplify the digital payroll management of local companies, with a user-centered approach tailored to HR professionals.
Brainiac, an Algerian tech company, entrusted me with the mission of designing Rawatib, an all-in-one platform to automate and digitize the entire payroll process. The goal was to comply with local regulations while offering a smooth, fast, and reliable user experience.
This project is part of a broader initiative to modernize HR tools in Algeria, where very few ergonomic and complete solutions currently exist.
The Problem
Before Rawatib, Brainiac’s client companies were facing several challenges:
01
Fragmented and Non-Centralized Tools
Most companies used a mix of Excel files, emails, and manual processes, making payroll management tedious and error-prone.
02
Lack of Automated Tracking
Absences, missions, overtime, and leave were not automatically linked to payroll calculation. Everything was handled separately, making data consistency difficult.
03
Frequent Errors in Payslips
Without verification or automated calculation tools, errors were frequent—especially with tax deductions (IRG), allowances, or bonuses.
04
No Visibility on HR Contracts
The status of contracts (permanent, temporary, trial period, end of contract) was often poorly tracked, leading to oversights or administrative deadline issues.
05
Complex Social Declarations
CNAS and IRG declarations are done outside the payroll system, leading to risks of delays, non-compliance, or penalties for the company.
06
No Overall View of Workforce Costs and Movements
HR departments lack a centralized dashboard to anticipate payroll costs, employee movements (hiring promises, departures), or upcoming notice periods.
This situation highlights the urgent need for a modern HR platform, tailored to the Algerian context.
Objectives
We defined clear goals with the Brainiac product team.
The overall objective was to propose a UX/UI design for HR, directly aligned with their operational needs:
Centralize all HR management in a single tool:
Offer an all-in-one platform that combines the management of employees, contracts, payslips, absences, and social declarations.
Automatically generate compliant payslips:
Automate the calculation of salaries, bonuses, absences, and IRG/CNAS deductions based on monthly input data.
Reduce HR processing time:
Minimize time spent on repetitive tasks by automating key actions: payslip generation, document sending, payment orders…
Salary checks included.
Anticipate social obligations (CNAS/IRG)
Notify HR at each step of the month to prevent delays in administrative declarations.
Simplify salary payments
Allow the creation of bulk payment orders, supporting various payment methods: bank transfer, CCP, cheque, or cash.
Automatically track missions
Enable HR teams to add and monitor work assignments, with direct impact on payroll.
Mission tracking / expense handling.
Manage contracts and status changes
Visualize active contracts, trial periods, and upcoming expirations, with a history of amendments.
Contract lifecycle management.
Maintain a clear payslip history
Easily access archived payslips for each employee, with month-by-month comparison.
The graphic approach, both minimalistic and modern, strengthens the application’s identity while ensuring smooth navigation.
Design Process
This UX/UI design process was fully tailored to the daily needs of HR professionals in a local context, enabling effective digital transformation of human resources in Algeria.
01
Understanding the HR context
The project began with a series of workshops and interviews with HR managers, accountants, and executives.
The goal: understand their constraints—tight deadlines, complexity of Algerian labor rules, and fragmented tools.
02
Defining personas and user flows
Based on field feedback, we defined several user profiles (HR, manager, accountant) and mapped their journeys: payroll processing, absence tracking, contract management, CNAS/IRG declarations, and more.
03
UI Design & Visual Consistency
The interface was designed to minimize cognitive load: clear typographic hierarchies, subtle yet contrasting colors, and reusable components.
A design system was built in Figma to ensure overall consistency.
04
Handoff for Development
All mockups were documented in Adobe XD and handed off to the development team with clear specifications: interaction behaviors, error cases, responsiveness, and implementation guidelines.
Project highlight
Recent Projects
Want to collaborate?
Whether you’re looking for a UI/UX designer for your team or a partner for your project, I’m ready to take on new challenges by your side!