Enhancing Asanify HRMS’s payroll process as a UX intern
As the sole UX designer on the team, I improved existing interactions and added new features to meet Asanify’s growing customer base.
Note: This case study uses dummy data and does not contain sensitive company or project information.
About Asanify
Asanify is a platform that helps small and medium-sized businesses worldwide manage their payroll and human resources. In November 2020, I joined Asanify as the 5th engineer on the team. I was tasked with improving current interactions and developing fresh functions for our product’s expansion into the Western market.
Some projects I worked on during my tenure
- Improving the Payruns module
- Adding “Login via OTP” functionality
- Multiple shifts functionality for an attendance policy
- Import Bulk Data
In this documentation, I would like to discuss the design process that improved Asanify’s vital Payruns module.
Project Overview
When a company founder or its HR runs a payroll, Payruns is the final stage of the process. Asanify Payruns lets you view your past payrolls for a given financial year, organised into quarters. It is the same as expected from any other HRMS software pay-run flow, with a few gains.
We would take a look into two particular aspects of payruns:
- Intuitive summary of each payroll run, such as pay cycle, status, amount, processed date, etc.
- Comparing two payroll runs to identify the difference in salary components for each employee.
Understanding the Payroll Process
Payrolls are added in the “Processed, Not Paid” stage after the “Run Payroll” process. When a user confirms the payment, it moves to the “Processed and Paid” stage.
If the company has an Asanify virtual wallet, it can initiate a payout from the wallet balance. The payroll remains in the “Processed and Payment Initiated” stage till all the payouts are made, after which it moves to the “Processed and Paid” stage.
A payroll is shown in the “In Process” stage if the user has processed the inputs during “Run Payroll” but is not confirmed. Once the admin confirms the payroll and generates the payslips, the payroll runs to the “Processed, Not Paid” stage.
Recognising the issues with UX
For a better grasp of its interactions, I conducted an audit of the current interface.
- Aesthetic & Visual Appeal: The interface used dated UI paradigms for the payroll status. Each status had its own table. Getting the status of a previous payroll could sometimes be a pain for users.
- User Efficiency: The experience was a kitchen sink of incoherent IA. Exporting payroll data was a common task on the payruns page, but it required using the more actions menu.
- Cognitive Overload: According to Fact Finder, attention is spread more evenly in a grid view than in a list, where it decreases from top to bottom. We began incorporating this design language in Asanify for different modules like “Goals and OKRs”, “Import Bulk Data”, etc.
- Usability Patterns: Asanify holds weekly testing and feedback sessions with our customers to hear about their issues and desired changes.
Users prefer to see a payroll run based on their pay cycle / financial year.
- Customer Feedback: Based on the requests on our intercom channel, we identified our customers’ pain points, such as checking the difference in salary components of two separate payroll runs.
- Visual Hierarchy: With the existing design, it can be problematic for users to prioritise information and traverse the interface efficiently due to the lack of visual hierarchy caused by clustering.
Resolving the problems — step by step
Incorporating feedback from client interviews and comparing payroll solutions such as Zoho Payroll and TriNet Zenefits, I iterated on the design until I was satisfied. In order to make application decisions based on data, my team and I would also do Hotjar drills weekly. After that, I oversaw the team’s alpha testing until we were ready to release a product.
Here are the possible ways to access the Payruns dashboard:
- “Payroll” module > “Payruns” on the left navigation menu.
- “Apps” in the top navbar > “Payroll” module > Payruns Dashboard
- One can view the payroll in the Payruns Dashboard after the “Run payroll” process.
Payruns Dashboard
User Story: As an admin, I want a view of all my past payrolls and the ability to perform actions based on the payroll stage so that I can easily maintain my comapny’s payroll history.
You can see a filter bar and individual cards for each payroll in the Payruns dashboards. You can filter payrolls by fiscal year for employees and by calendar month for contractors. This is because a contractor raises an invoice on a one-time basis or for a specific period (weekly, monthly, or yearly). Employee payrolls are further grouped by financial quarters.
Visual cues were used to highlight data points in the cards based on their hierarchy:
- When you click the pay cycle, an external link opens the payroll details page.
- Depending on the payroll stage, a different call-to-action (CTA) is displayed next to it.
- The net salary is highlighted as the primary data, followed by the payroll processing date.
- Lastly, we have the action buttons, that I will go into later in the article.
Compare Payrolls
User Story: As an admin, I want to compare every component in two previous payroll runs to ensure accuracy.
The traditional method for comparing payrolls from different pay cycles is to go through each salary component in the payroll spreadsheets. This process is laborious and open to human mistakes. Spreadsheet applications are skeuomorphs of the old spreadsheet ledgers used by businesses, mimicking their rows, columns, and cells to provide a familiar experience. Asanify decided to take over the task of comparing payroll runs and offer users an unsurprising interface.
The Compare Payroll interface can be dissected into the following:
- Users can use the table’s search bar to look up anyone by name or ID.
- Column headers indicate salary components, whereas row headers indicate names and IDs.
- When pay cycles are compared, the cells display the amount for each salary component and whether it increased or decreased relative to the earlier pay cycle.
- A fixed column on the spreadsheet’s right side displays the net salary.
Payroll Details
User Story: As an admin, I want to see the payroll summary and payout status for each employee/contractor to ensure that funds were successfully transferred to their bank accounts.
The “Payroll Details” page contains sections like:
- Total Summary: The user can view details about that payroll, such as the processed date, pay cycle, gross salary, total outflow, and so on.
- Payout Status Summary: Displays the outflow of funds after a user makes a payout, along with their respective payout status (Success, Pending, etc.).
- Employee and Contractor Details: This table displays the following for each individual: basic information, salary components, payroll calculations, total payable, status, and payout details. When we click View Payroll Calculations, we get a detailed breakdown of provident fund processing, pre-tax deductions, and more.
When we want to view an individual’s payout details, a “Payout Status” sidebar displays the dates and statuses of all payout attempts.
Payroll Actions
Payroll actions are available from the Payruns dashboard and the Payroll Details page. The actions available for a payroll depend on its stage: “In Process,” “Processed, Not Paid,” “Processed and Payment Initiated,” and “Processed and Paid.”
- Download Excel: Payroll data is available for download in Excel (.xlsx) format.
- Initiate Payout: Admins can initiate a payout through Asanify’s virtual wallet if the company has funds in its account. In this case, funds are transferred to the receiver’s added bank account (via local bank transfer or SWIFT) or UPI VPA (in India only).
- Record Payment: Record the payout date outside Asanify using NEFT, IMPS, RTGS, Cash, Cheque, etc.
- Regenerate Payslips and Invoices: Admins can regenerate any previous payslips (for employees) or invoices (for contractors).
- Delete Payroll: Following confirmation, admins can delete any specific payroll data and payslips (for employees) or invoices (for contractors).
- Generate ECR File: Updates to Asanify in November 2022 allow users to generate ECR files and submit EPF returns promptly.
Key Outputs
- Travel Time Reduction: The project’s primary goal was to improve user interactions by reducing the amount of time it took for the mouse pointer to navigate the portal.
- Metadata Filtration: The ability to filter items using multiple parameters is a crucial feature that users were previously unable to.
- Screen Real Estate Optimization: A more open and aesthetically pleasing experience was achieved through the strategic redesign of the layout and the removal of superfluous elements.
- Imrpoved Learnability & Efficiency: The improved features of the B2B product make it simple for new users to complete basic tasks when they first see the interface, while seasoned users can breeze through more complex tasks after getting the hang of the software.
Conclusion
With the revamped payroll functions, I could improve workflows, productivity, and user satisfaction. Attention to detail in user experience research, stakeholder engagement, and the use of industry best practices led to substantial improvements that tackled important issues like cognitive overload, aesthetic appeal, and customer discomfort.
After graduating from college, I spent some time documenting 📄 every detail of the project and experience in this article!
After graduating from college, I spent some time documenting 📄 every detail of the project and experience in this article!
Time to wrap up the article
I hope you find this blog informative and creative. If you have any questions, suggestions, or opportunities for me, please contact (my LinkedIn). I would be delighted to have a conversation with you.
